vue-frag-plugin
Webpack/Rollup/Vite plugin to use multiple root nodes in Vue 2 Single-file Components (SFCs). Powered by vue-frag
.
<template>
<span>
Hello
</span>
<span>
Multiple root nodes
</span>
</template>
Support this project by
🚀 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
- Import
vueFrag
fromvue-frag-plugin
- Add it to
plugins
before the Vue plugin inrollup.config.js
orvite.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
-
unplugin-vue2-script-setup - Build-time plugin to use
<script setup>
in Vue 2 SFC