vue-frag-plugin

Webpack/Rollup/Vite plugin to use multiple root nodes in Vue 2 Single-file Components (SFCs). Powered by vue-frag.

<template>
    <!-- No wrapping fragment! -->
    <span>
        Hello
    </span>
    <span>
        Multiple root nodes
    </span>
</template>

Support this project by ⭐️ starring and sharing it. Follow me to see what other cool projects I’m working on! ❤️

? Install

npm i -D vue-frag-plugin vue-frag

?‍♂️ Why?

vue-frag is a directive that lets you use Fragments in Vue.js 2 components, but you have to manually register it and insert it as the root node.

vue-frag-plugin is a build-time plugin that automates this process, injecting vue-frag where necessary. You will be able to use multiple root nodes seamlessly in your SFCs, bringing the developer experience much closer to Vue 3.

? Quick setup

Webpack

Add vue-frag-plugin/loader before vue-loader in webpack.config.js.

Example webpack.config.js 

   module.exports = {
     ...,

     module: {
       rules: [
         ...,

         // Update the vue-loader rule to insert `vue-frag-plugin/loader` before it
         {
           test: /\.vue$/,
-          loader: 'vue-loader',
+          use: [
+            'vue-loader',
+            'vue-frag-plugin/loader'
+          ]
         }
       ]
     }
   }

Rollup / Vite

  1. Import vueFrag from vue-frag-plugin
  2. Add it to plugins before the Vue plugin in rollup.config.js or vite.config.js
Example rollup.config.js 

  import { definePlugin } from 'rollup
  import vue from 'rollup-plugin-vue'
+ import { vueFrag } from 'vue-frag-plugin'

 export default definePlugin({
   ...,

   plugins: [
+    vueFrag(), // Important this goes before `vue()`
     vue()
   ],

   ...
 })
Example vite.config.js 

  import { definePlugin } from 'vite'
  import { createVuePlugin } from 'vite-plugin-vue2'
+ import { vueFrag } from 'vue-frag-plugin'

 export default definePlugin({
   ...,

   plugins: [
+    vueFrag(), // Important this goes before `createVuePlugin()`
     createVuePlugin()
   ],

   ...
 })

? Related

GitHub

View Github