Check if slot is empty (options API)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 54.4k
- Forks
- 9.2k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 140
Description
What problem does this feature solve?
Using the options API, there is as far as I can tell, no elegant way of quickly deciding whether a slot is empty or has content. this.$slots.slotName() always yields me an array with a top node of type Symbol(Fragment), whether the slot is empty or not. In order to figure out whether it truly is empty, I need to check for the length of the children of the node, such as:
this.$slots.slotName()[0].children.length
The way I understand this thread, the type of the top node seems to have changed during the life of Vue 3: https://forum.vuejs.org/t/how-to-determine-if-slot-is-empty-in-vue3/109154
What does the proposed API look like?
A function property on the $slots object, e.g. this.$slots.isEmpty('slotName') would seem more elegant to me, in order to achieve the same result as my example above.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the options API slot behavior described in the issue and the linked Vue forum discussion, then trace how empty and non-empty slots are represented. Done means determining whether the proposed $slots.isEmpty('slotName') API is appropriate and implementing or documenting the agreed approach.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100