Skip to content

Instantly share code, notes, and snippets.

@mika76
Forked from rhysburnie/useHasSlot.js
Created January 25, 2023 13:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mika76/887c9c3d08fc7a10facc1e22a81e90ea to your computer and use it in GitHub Desktop.
Save mika76/887c9c3d08fc7a10facc1e22a81e90ea to your computer and use it in GitHub Desktop.
vue3 determine if slot is being used (has content)
import { useSlots } from 'vue';
export default function useHasSlot() {
const slots = useSlots();
return function hasSlot(name) {
return slots[name] && !isEmptySlot(slots[name]());
};
}
function isEmptySlot(items) {
if (!items.length) return true;
return !items.some(hasSlotContent);
}
function hasSlotContent(item) {
const type = item.type.toString();
if (type === 'Symbol(Comment)') return false;
if (type === 'Symbol(Text)' && !item.children.trim()) return false;
return true;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment