Is there something like React.Fragment in Vue?

The lack of a first party Fragment component in Vue drives me nuts!

I had looked at the the vue-fragment npm package, but it made me nervous at how much they were doing and felt there had to be a better way.

I came up with something extremely lightweight... It works because functional components are allowed to return multiple root nodes.

This doesn't work 100% like Reacts, however. In React, you can actually use a React.Fragment as the root node in your app, for example. This seems to only work in Vue when you're already within a component (ie: it can't be the root node of your base component).

const Fragment = {
  functional: true,
  render: (h, ctx) => ctx.children
}

to use it...

<Fragment>
  <div>Div 1</div>
  <div>Div 2</div>
</Fragment>

Super useful...

{someCondition && (
  <Fragment>
    <div>yay i can use multiple nodes</div>
    <div>:)</div>
  </Fragment>
)}

<div>
  Some inline text {condition ? (
    <Fragment>now I can use <strong>html</strong> and {variables}</Fragment>
  ) : (
    <Fragment>So many possibilities</Fragment>
  )}
</div>

Vue 2

Package Vue-fragment facilitates root-less components for vue 2.

Vue 3

Vue 3 have official support for multi-root node components (fragments) https://v3-migration.vuejs.org/new/fragments.html