Return Multiple Root Elements In Vue 2 – vue-frag

Description:

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.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

You Might Be Interested In:

Add Comment