# vue-frag-plugin
Webpack/Rollup/Vite plugin to use multiple root nodes in Vue 2 [Single-file Components (SFCs)](https://vuejs.org/v2/guide/single-file-components.html). Powered by [`vue-frag`](https://github.com/privatenumber/vue-frag).
```vue
Hello
Multiple root nodes
```
Support this project by ⭐️ starring and sharing it. [Follow me](https://github.com/privatenumber) to see what other cool projects I'm working on! ❤️
## 🚀 Install
```sh
npm i -D vue-frag-plugin vue-frag
```
## 🙋♂️ Why?
[`vue-frag`](https://github.com/privatenumber/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
```diff
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
```diff
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
```diff
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](https://github.com/antfu/unplugin-vue2-script-setup) - Build-time plugin to use `