vue-frag is a Vue.js directive to return multi-root node components in Vue 2 powered app similar to the Vue 3 Fragments.
Basic Usage:
1. Import the vue-frag directive.
import frag from 'vue-frag';
2. Register the vue-frag.
// globally Vue.directive('frag', frag); // locally export default { directives: { frag }, // ... };
3. Render multiple root nodes as follows:
<template> <div v-frag> <div v-for="i in 6"> {{ i }} </div> </div> </template>
Preview:
Changelog:
v1.4.3 (05/03/2023)
- support keep-alive
- Performance Improvements
- Reverts fake parent deletion
v1.4.1 (08/16/2021)
- remove unnecessary package.json properties on publish
v1.4.0 (12/18/2021)
- name fragment component
v1.3.1 (10/06/2021)
- added Fragment component type
v1.3.0 (10/05/2021)
- feat: fragment component
v1.2.4 (09/08/2021)
- bugs fixed
v1.2.3 (09/07/2021)
- bugs fixed
v1.2.0 (08/22/2021)
- add source maps
- expose non-minified assets
v1.1.5 (04/19/2021)
- Fixed: use in transition
v1.1.4 (02/03/2021)
- bugfix
v1.1.3 (01/31/2021)
- handle insertBefore fragment
Download Details:
Author: privatenumber
Live Demo: https://codepen.io/hirokiosame/pen/PoNVZbV
Download Link: https://github.com/privatenumber/vue-frag/archive/develop.zip
Official Website: https://github.com/privatenumber/vue-frag
Install & Download:
# NPM
$ npm i vue-frag --save