Return Multiple Root Elements In Vue 2 – vue-frag

Install & Download:

# NPM
$ npm i vue-frag --save

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:

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