vue-frag

Use Vue 3's Fragment feature in Vue 2 to return multiple root elements

<template>
    <div v-frag> ⬅ This root element is unwrapped and removed on render!

        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
    </div>
</template>
View Demo View Github

? Features

  • ✅ Multiple root nodes Without creating a functional component!
  • ? SSR Unwraps the root element on client-side post-hydration!
  • ⚡️ Directives Supports v-if, v-for, and v-html!
  • ?‍? Battle-tested Checkout the tests here!

? Install

npm i vue-frag

? Quick Setup

Register globally

Make it available anywhere in your Vue application.

import frag from 'vue-frag';
Vue.directive('frag', frag);

Register locally

Explicitly register it to a component you want to use it in.

...

<script>
import frag from 'vue-frag';

export default {
    directives: {
        frag
    },

    ...
};
</script>

Prefer a component API?

Create a Fragment.vue component:

<template>
    <div v-frag>
        <slot />
    </div>
</template>

<script>
import frag from 'vue-frag';

export default {
    directives: {
        frag
    }
};
</script>

And use it as a component:

<template>
    <fragment>
        No root element!
    </fragment>
</template>

??‍? Examples

Returning multiple root nodes 

<template>
    <div v-frag> <!-- This element will be unwrapped -->

        <div v-for="i in 10">
            {{ i }}
        </div>
    </div>
</template>

Unwrapping the root node from a component

<template>
    <div>
        <!-- Unwraps the root node of some-custom-component -->
        <some-custom-component v-frag />
    </div>
</template>

Supports v-if too

<template>
    <div v-frag>
        <template v-if />
    </div>
</template>

Access fragment DOM nodes

<template>
    <div v-frag>
        Hello world
    </div>
</template>

<script>
export default {
    mounted() {
        console.log(this.$el.frag)
    }
}
</script>