vue-frag-plugin
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    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 ⭐️ 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

    Install

    npm i vue-frag-plugin

    DownloadsWeekly Downloads

    18

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    8.67 kB

    Total Files

    9

    Last publish

    Collaborators

    • hirokiosame