vue-frag

vue-frag

Vue 2 fragment directive to unwrap root elements

🙋‍♂️ Why?

• 🔥 Multiple root nodes Without creating a functional component!
• ⭐️ SSR Unwraps the root element on client-side post-hydration!
• 🐥 Tiny Only 277 B!

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

👨🏻‍🏫 Examples

Returning multiple root nodes

<template>
    <div #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>
        <some-custom-component #frag />
    </div>
</template>