Home
Other
Return Multiple Root Elements In Vue 2 – vue-frag

Return Multiple Root Elements In Vue 2 – vue-frag

privatenumber Last Updated: 4 weeks ago

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:

Return Multiple Root Elements In Vue 2 - vue-frag

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

Related Posts

Add Comment