How can I check if a Slot content is provided?

[resessh]

I've encountered a situation where I need to determine if the Slot content is provided.

In Vue2, I used the following code to conditionally render slot and wrapper if it existed:

<!-- working -->
<div v-if="$slots.default">
  <slot />
</div>

However, after migrating to Vue3, when a slot is empty, $slots.default() returns a VNodeArray containing a Fragment.

<!--
not working and
$slots.default() returns 
[
  {
    type: Fragment,
    children: []
  }
]
-->
<div v-if="$slots.default()">
  <slot />
</div>

This has made it impossible to check if the Slot content is provided by a simple null check or array length check.

There are a private method used inside Vue3, but it is not exported and cannot be used.

What is the correct and reliable way to check if the Slot content is provided?

[edison1105]

see #4733

[ericcirone]

I just viewed #4733 and while there are some good examples in there, there isn't a totally agreed upon way of doing it. I have this same issue. Migrating a massive project to Vue 3 and there is extensive use of

<div v-if="$slots.default">
  <slot />
</div>

Not having some mechanism to do the same seems like a real oversight.

[ericcirone]

My solution is just using the internal code. Seems to be working for my use case:

function isValidVnodes(vnodes) {
	return vnodes.some((child) => {
		if (!isVNode(child)) return true;
		if (child.type === Comment) return false;
		if (child.type === Fragment && !isValidVnodes(child.children)) return false;
		return true;
	})
		? true
		: false;
}

[murilolivorato]

hello my friend , this will help you .
https://medium.com/p/eab1bad461f0
I did this tototial using slot in vue 3

this is the sorce code -
https://github.com/murilolivorato/vue_tabs