Unplugin-vue-node-patch NPM

unplugin-vue-node-patch

Monkey patching node in vue template or jsx.

Features

💚 Supports both Vue 2 and Vue 3 out-of-the-box.
🦾 Support Vue SFC and jsx.
✨ Support for patching element node attributes.

Install

pnpm install unplugin-vue-node-patch

// vite.config.ts
import vueNodePatch from 'unplugin-vue-node-patch/vite'

export default defineConfig({
  plugins: [
    vueNodePatch({
      /* options */
    })
  ]
})

Example: playground/

// rollup.config.js
import vueNodePatch from 'unplugin-vue-node-patch/rollup'

export default {
  plugins: [
    vueNodePatch({
      /* options */
    })
  ]
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-node-patch/webpack')({
      /* options */
    })
  ]
}

// nuxt.config.js
export default {
  buildModules: [
    [
      'unplugin-vue-node-patch/nuxt',
      {
        /* options */
      }
    ]
  ]
}

This module works for both Nuxt 2 and Nuxt Vite

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-node-patch/webpack')({
        /* options */
      })
    ]
  }
}

// esbuild.config.js
import { build } from 'esbuild'
import vueNodePatch from 'unplugin-vue-node-patch/esbuild'

build({
  plugins: [vueNodePatch()]
})

Usage

Its original usage is to add the node's position in the original file to the attribute of each Vue node in development mode.

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

// vite.config.ts
import vueNodePatch from 'unplugin-vue-node-patch/vite'
import { markElementLocation } from 'unplugin-vue-node-patch/middlewares'

export default defineConfig({
  plugins: [
    vueNodePatch({
      middlewares: [markElementLocation()]
    })
  ]
})

into this

<template>
  <div data-element-location="2_3">
    <HelloWorld data-element-location="3_5" msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

Configuration

The following show the default values of the configuration

Components({
  /**
   * RegExp or glob to match files to be transformed
   *
   * @default [/\.vue$/, /.[jt]sx$/]
   */
  include?: string | RegExp | (string | RegExp)[]

  /**
   * RegExp or glob to match files to NOT be transformed
   */
  exclude?: string | RegExp | (string | RegExp)[]

  /**
   * Match the node that does not need to be patched
   */
  filterNode?: string | RegExp | (string | RegExp)[] | NodeFilter

  /**
   * Define your patch
   */
  middlewares?: Middleware[]
})