@vitejs/plugin-vue2
v2.3.4TypeScript
> [!CAUTION] > Vue 2 has reached EOL, and this project is no longer actively maintained.
252.7K/weekUpdated 4 months agoMITUnpacked: 115.6 KB
Published by Evan You
npm install @vitejs/plugin-vue2@vitejs/plugin-vue2 
> [!CAUTION]
> Vue 2 has reached EOL, and this project is no longer actively maintained.
---
> Note: this plugin only works with Vue@^2.7.0.
``js
// vite.config.js
import vue from '@vitejs/plugin-vue2'
export default {
plugins: [vue()]
}
`
Options
`ts
export interface Options {
include?: string | RegExp | (string | RegExp)[]
exclude?: string | RegExp | (string | RegExp)[]
isProduction?: boolean
// options to pass on to vue/compiler-sfc
script?: Partial
template?: Partial<
Pick<
SFCTemplateCompileOptions,
| 'compiler'
| 'compilerOptions'
| 'preprocessOptions'
| 'transpileOptions'
| 'transformAssetUrls'
| 'transformAssetUrlsOptions'
>
>
style?: Partial
}
`
Asset URL handling
When @vitejs/plugin-vue2 compiles the blocks in SFCs, it also converts any encountered asset URLs into ESM imports.
For example, the following template snippet:
`vue`
Is the same as:
`vue`
`vue`
By default the following tag/attribute combinations are transformed, and can be configured using the template.transformAssetUrls option.
`js`
{
video: ['src', 'poster'],
source: ['src'],
img: ['src'],
image: ['xlink:href', 'href'],
use: ['xlink:href', 'href']
}
Note that only attribute values that are static strings are transformed. Otherwise, you'd need to import the asset manually, e.g. import imgUrl from '../image.png'.
Example for passing options to vue/compiler-sfc:
`ts
import vue from '@vitejs/plugin-vue2'
export default {
plugins: [
vue({
template: {
compilerOptions: {
// ...
},
transformAssetUrls: {
// ...
}
}
})
]
}
`
Example for transforming custom blocks
`ts
import vue from '@vitejs/plugin-vue2'
const vueI18nPlugin = {
name: 'vue-i18n',
transform(code, id) {
if (!/vue&type=i18n/.test(id)) {
return
}
if (/\.ya?ml$/.test(id)) {
code = JSON.stringify(require('js-yaml').load(code.trim()))
}
return export default Comp => {
Comp.i18n = ${code}
}
}
}
export default {
plugins: [vue(), vueI18nPlugin]
}
``
License
MIT