Monkey patching node in vue template or jsx
npm install unplugin-vue-node-patchbash
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[]
})
``