core: Request to add an official way to check if slot is empty

My version of helper:

import {
  Comment,
  Text,
  Slot,
  VNode,
} from 'vue';

export function hasSlotContent(slot: Slot|undefined, slotProps = {}): boolean {
  if (!slot) return false;

  return slot(slotProps).some((vnode: VNode) => {
    if (vnode.type === Comment) return false;

    if (Array.isArray(vnode.children) && !vnode.children.length) return false;

    return (
      vnode.type !== Text
      || (typeof vnode.children === 'string' && vnode.children.trim() !== '')
    );
  });
}

Vote for official way.

There seems to still be a lot of back and forth and people struggling with this, so I’m sharing the composable I use at work for whoever needs: https://gist.github.com/marina-mosti/99b08783b161fa4ba21ebd2ec664fa14#file-useemptyslotcheck-js It builds up on some great ideas posted here, and can probably be improved in many ways but at least is already copy-pasteable

TS version of @lehni’s helpers in case it’s useful for anyone else:

import { Comment, Text, type Slot, type VNode } from 'vue';

export function hasSlotContent(slot: Slot | undefined | null, props: any = {}) {
  return !isSlotEmpty(slot, props);
}

export function isSlotEmpty(slot: Slot | undefined | null, props: any = {}) {
  return isVNodeEmpty(slot?.(props));
}

export function isVNodeEmpty(vnode: VNode | VNode[] | undefined | null) {
  return (
    !vnode ||
    asArray(vnode).every(
      (vnode) =>
        vnode.type === Comment ||
        (vnode.type === Text && !vnode.children?.length),
    )
  );
}

export function asArray<T>(arg: T | T[] | null) {
  return Array.isArray(arg) ? arg : arg !== null ? [arg] : [];
}

Edited to make asArray more flexible.

I think this at least deserves mention in the migration guide. It is a breaking change without any documentation.

While @andrey-hohlov helper is nice, but I’d rather not handle this on the application level – it’s not easy to understand and maintain this piece of code.

I don’t think it makes sense to add this API if we cannot reach a consensus on what isVNodeEmpty() means (ref the comment I linked).

Couldn’t we reuse the same definition of “empty VNode” from Vue 2? Here’s a fork of the previously mentioned sandbox, but using Vue 2 – https://codesandbox.io/s/vue-2-empty-slot-handling-pb50zt?file=/src/HelloWorld.vue.

EDIT:

import { Comment } from 'vue';

export const hasSlotContent = (slot, slotProps = {}) => {
	if (!slot) return false;

	return slot(slotProps).some((vnode) => {
		if (Array.isArray(vnode.children)) {
			return !!vnode.children.length;
		}

		return vnode.type !== Comment;
	});
};

seems to exactly match Vue 2 behaviour When slot content is:

• Text - renders
• Whitespace (space, tabs, newline) - does not render
• Comment - does not render
• <div v-if="false"></div> - does not render
• <div v-if="true"></div> - renders
• <Component /> - renders
• {{ undefined || null || false || "" }} - renders
• v-if="$slots.nonexsisting"/v-if="hasSlotContent($slots.nonexisting)" - does not throw an error
• <slot /> - renders only if it has content passed from parent

EDIT I think the function above might still be incorrect in some cases (e.g. when using <Suspense> or <Transition>), use with caution

Instead of being slot specific, it could also be vnode specific, like isVNodeEmpty(arrayOrSingleVNode):

const slotContent = slots.default?.(props)
isVNodeEmpty(slotContent)

One issue is using this in a template would be much verbose in order to reuse the vnodes. So maybe there is an alternative way of doing this that could unify how to do it.

Another issue is that what is empty could be subjective, due to trailing spaces and how they are handled, see https://github.com/vuejs/vue-next/issues/3056#issuecomment-786560172 considering trimming whitespace while in other scenarios they shouldn’t be trimmed to consider a slot empty.

Here is a version that removes comments, it can be adapted:

import { VNode, Comment } from 'vue'

export function isVNodeEmpty(
  vnodes: VNode | VNode[] | undefined | null
): boolean {
  return (
    !!vnodes &&
    (Array.isArray(vnodes)
      ? vnodes.every(vnode => vnode.type !== Comment)
      : vnodes.type !== Comment)
  )
}

BTW I find asArray() generally useful and would allow it any argument types, nut just VNodes

Here my version of hasSlotContent(), along with other useful helpers. I found it a bit easier to understand what’s actually happening when structured this way:

import { Comment } from 'vue'

export function hasSlotContent(slot, props = {}) {
  return !isSlotEmpty(slot, props)
}

export function isSlotEmpty(slot, props = {}) {
  return isVNodeEmpty(slot?.(props))
}

export function isVNodeEmpty(vnode) {
  return !vnode || asArray(vnode).every(vnode => vnode.type === Comment)
}

export function asArray(arg) {
  return isArray(arg) ? arg : arg != null ? [arg] : []
}

Please check this RFC out.

The helper from @andrey-hohlov works for me!

However I’d feel better if this was built-in officially so that I don’t need to worry about that helper stop working after some future update of vue.

I think many people will face this issue, in particular regarding that many posts on stackoverflow mention the simple condition approach if ($slots.default) { ... } which doesn’t work anymore.

I don’t think it makes sense to add this API if we cannot reach a consensus on what isVNodeEmpty() means (ref the comment I linked).

There is nothing internal about that function, it’s safe to use