Subscribe on changes!

Check if slot is empty (options API)

avatar
Nov 1st 2022

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.

avatar
Nov 1st 2022

see #4733

avatar
Nov 1st 2022

Thank you for your quick answer.

https://github.com/vuejs/core/issues/4733#issuecomment-1024816095 seems like the most elegant solution to me, but I couldn't understand from the thread, if this is a feature that is wanted in the library, or rather not? As others mentioned in that thread, that's a fair bit of insider-APIs knowledge for a fairly basic task.