How does component render empty nodes?

[yoyo837]

<component :is="bool ? 'div' : '<></>'"> 
  children
</components>

It don't works.

[hubdidub]

I think

<div v-if="bool">
  children
</div>

is what you want

[Hetari]

The :is attribute dynamically selects a component or HTML element to render, but Vue doesn't support rendering an empty fragment (like <> in React) directly with it. However, in Vue 3, components can have multiple root nodes without needing to wrap them in a div, similar to how React.Fragment works. This feature avoids unnecessary DOM elements. For more details, see Vue 3 Fragments.

To achieve what you want in Vue you use v-if or v-show :

1. Conditional Rendering with v-if

To conditionally render elements, use v-if to prevent the element from being added to the DOM when the condition is false:

<div v-if="bool">
  children
</div>

2. Conditionally Show Elements with v-show

If you want the element to remain in the DOM but control its visibility, use v-show:

<div v-show="bool">
  children
</div>

With v-show, the element is still present but toggled via CSS (display: none).

[yoyo837]

Thanks for your reply. I want to always show children, but the parent node may be a specified HTML TAG or no parent node(like <> in React), as shown in the pseudo code I showed.

[Hetari]

I think I understand you know, in Vue, when you begin writing within the <template> tag, you're essentially using a fragment by default. The <template> in Vue functions similarly to React's Fragment, allowing you to group multiple elements without adding extra nodes to the DOM. You can also extend this flexibility by using features like conditional rendering:

<template>
  <ul>
    <li>first</li>
    <template v-if="bool">
      <li>second</li>
      <li>third</li>
    </template>
    <li>fourth</li>
  </ul>
</template>

In this example, Vue lets you conditionally render multiple elements within the tag without introducing unnecessary wrapper elements, just like fragments.

[Wei-Ba]

<component :is="show ? 'div' : {setup: (_, {slots})  => () => renderSlot(slots, 'default')}">
    <slot/>
</component>

...

<template v-if="!is"><slot/></template>
<component v-else :is="is"><slot/></component>

...

setup(props, { slots }){
  const w = (vnode, tag) => !is ? vnode : h(tag, vnode)
  return () => w(renderSlot(slots, 'default'), props.is)
}

[yoyo837]

Thank you.