Javascript Vue

Webpack/Rollup/Vite plugin to add multiple root-node support to Vue 2 SFCs2 min read

vue-frag-plugin

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

<div class="highlight highlight-text-html-vue position-relative overflow-auto" data-snippet-clipboard-copy-content="<template>

<span>
Hello
</span>
<span>
Multiple root nodes
</span>
</template>
“>

<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

Import vueFrag from vue-frag-plugin
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

unplugin-vue2-script-setup – Build-time plugin to use <script setup> in Vue 2 SFC

GitHub

View Github

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest