Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/privatenumber/vue-frag-plugin
Webpack/Rollup/Vite plugin to add multiple root-node support to Vue 2 SFCs
https://github.com/privatenumber/vue-frag-plugin
rollup vite vue vue-frag webpack
Last synced: about 2 months ago
JSON representation
Webpack/Rollup/Vite plugin to add multiple root-node support to Vue 2 SFCs
- Host: GitHub
- URL: https://github.com/privatenumber/vue-frag-plugin
- Owner: privatenumber
- License: mit
- Created: 2021-11-02T01:00:42.000Z (about 3 years ago)
- Default Branch: develop
- Last Pushed: 2022-01-13T13:07:04.000Z (almost 3 years ago)
- Last Synced: 2024-10-19T01:11:32.958Z (2 months ago)
- Topics: rollup, vite, vue, vue-frag, webpack
- Language: TypeScript
- Homepage:
- Size: 136 KB
- Stars: 42
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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 `` in Vue 2 SFC