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