Use Vue 3's Fragment feature in Vue 2 to return multiple root elements.
<template>
<Fragment> โฌ
This root element will not exist in the DOM
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</Fragment>
</template>
<script>
import { Fragment } from 'vue-frag'
export default {
components: {
Fragment
}
}
</script>๐ Try it out on CodePen!
- โ Multiple root nodes Without creating a functional component!
- ๐ฅ SSR Unwraps the root element on client-side post-hydration!
- โก๏ธ Directives Supports
v-if,v-for, andv-html! - ๐ฉโ๐ฌ Battle-tested Checkout the tests here!
|
๐ฅ Pro-tip
Want to be able to just have multiple root-nodes in your SFC without a wrapper? Use vue-frag-plugin to automatically inject vue-frag so that you can return multiple root nodes without a fragment component! |
npm i vue-fragYou can either choose to use the Component or Directive API.
The Component API is designed to be used at the root of the template. It should feel intuitive to use and cover most use-cases.
Import Fragment and use it as the root element of your component:
<template>
<Fragment>
Hello world!
</Fragment>
</template>
<script>
import { Fragment } from 'vue-frag'
export default {
components: {
Fragment
}
}
</script>Globally registering the component lets you use it without needing to import it every time.
import { Fragment } from 'vue-frag'
Vue.component('Fragment', Fragment)Use the Directive API to have more nuanced control over placement. For example, if you want to unwrap the root node of a component on the usage-end.
The Component API uses the Directive API under the hood.
<template>
<div v-frag>
Hello world!
</div>
</template>
<script>
import frag from 'vue-frag'
export default {
directives: {
frag
}
}
</script>Make it available anywhere in your Vue application.
import frag from 'vue-frag'
Vue.directive('frag', frag)
Component API
<template>
<Fragment> <!-- This element will be unwrapped -->
<div v-for="i in 10">
{{ i }}
</div>
</Fragment>
</template>Directive API
<template>
<div v-frag> <!-- This element will be unwrapped -->
<div v-for="i in 10">
{{ i }}
</div>
</div>
</template>Use the Directive API to unwrap the root node of a component.
<template>
<div>
<!-- Unwraps the root node of some-custom-component -->
<SomeCustomComponent v-frag />
</div>
</template><template>
<div v-frag>
<template v-if="isShown">
Hello world!
</template>
</div>
</template><template>
<div v-frag>
Hello world
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$el.frag)
}
}
</script>
Whenever you feel like the root-element of your component adds no value and is unnecessary, or is messing up your HTML output. This usually happens when you want to return a list of elements like <li>List Items</li> or <tr><td>Table Rows</td></tr> but you have to wrap it in a <div>.
In Vue 2, it's possible to return multiple nodes with a Functional Component but functional components are stateless (no data() or life-cycle hooks), doesn't support methods, doesn't have very good template support, and can lead to SSR bugs (eg. mismatching nodes).
Related VueJS Issues / Stackoverflow Qs:
vue-frag works by tricking Vue.js to think that the root element is still in the DOM, when it's actually not.
When vue-frag is applied to an element, it uses the inserted directive hook to swap the element out with its children to remove itself from the DOM. It then patches surrounding DOM nodes (eg. parent, sibling, children) to make them think that the element is still in the DOM.
Here are all the DOM APIs Vue.js uses that are patched:
Like in Vue 3, v-show does not work on components that return a fragment. v-show works by setting style="display: none" on the root element of the target component. With vue-frag removing the root element, there would be no grouping-element to apply the display: none to. If the fragment returned elements, it's possible to apply it to each child-node, but it's possible for them to be text-nodes which cannot be styled.
- vue-frag-plugin - Build-time plugin to seamlessly use multiple root nodes
- vue-subslot - ๐ pick out specific elements from component
<slot>s - vue-vnode-syringe - ๐งฌ Add attributes and event-listeners to
<slot>content ๐ - vue-proxi - ๐ Tiny proxy component
- vue-pseudo-window - ๐ผ Declaratively interface window/document in your Vue template
- vue-v - render vNodes via component template
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent