Is there something like React.Fragment in Vue?
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.vuejs.org/guide/migration/fragments.html
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>