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

``bash
pnpm install unplugin-vue-node-patch
`



Vite

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

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

Example: playground/








Rollup

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

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








Webpack

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








Nuxt

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

> This module works for both Nuxt 2 and Nuxt Vite








Vue CLI

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








esbuild

`ts
// 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.

`html

`

`ts
// 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

`html

`

Configuration

The following show the default values of the configuration

`ts
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[]
})
``

Credits

This project is inspired by vite-plugin-vue-inspector .

License

MIT LICENSE