@vitejs/plugin-vue
v6.0.4
The official plugin for Vue SFC support in Vite.
4.9M/weekUpdated 6 days agoMITUnpacked: 74.8 KB
Published by Evan You
npm install @vitejs/plugin-vue@vitejs/plugin-vue 
> Note: as of vue 3.2.13+ and @vitejs/plugin-vue 1.9.0+, @vue/compiler-sfc is no longer required as a peer dependency.
``js
// vite.config.js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [vue()],
}
`
For JSX / TSX support, @vitejs/plugin-vue-jsx is also needed.
Options
`ts
export interface Options {
include?: string | RegExp | (string | RegExp)[]
exclude?: string | RegExp | (string | RegExp)[]
isProduction?: boolean
/**
* Requires @vitejs/plugin-vue@^5.1.0
*/
features?: {
/**
* Enable reactive destructure for defineProps.false
* - Available in Vue 3.4 and later.
* - default: in Vue 3.4 (experimental), true in Vue 3.5+true
*/
propsDestructure?: boolean
/**
* Transform Vue SFCs into custom elements.
- : all .vue imports are converted into custom elementsstring | RegExp
* - : matched files are converted into custom elementsfalse
* - default: /\.ce\.vue$/
*/
customElement?: boolean | string | RegExp | (string | RegExp)[]
/**
* Set to to disable Options API support and allow related code intrue
* Vue core to be dropped via dead-code elimination in production builds,
* resulting in smaller bundles.
* - default:
*/
optionsAPI?: boolean
/**
* Set to to enable devtools support in production builds.false
* Results in slightly larger bundles.
* - default:
*/
prodDevtools?: boolean
/**
* Set to to enable detailed information for hydration mismatchfalse
* errors in production builds. Results in slightly larger bundles.
* - default:
*/
prodHydrationMismatchDetails?: boolean
/**
* Customize the component ID generation strategy.
* - : hash the file path (relative to the project root)'filepath-source'
* - : hash the file path and the source codefunction
* - : custom function that takes the file path, source code,'filepath'
* whether in production mode, and the default hash function as arguments
* - default: in development, 'filepath-source' in production
*/
componentIdGenerator?:
| 'filepath'
| 'filepath-source'
| ((
filepath: string,
source: string,
isProduction: boolean | undefined,
getHash: (text: string) => string,
) => string)
}
// script, template and style are lower-level compiler optionsvue/compiler-sfc
// to pass on to respective APIs of
script?: Partial<
Omit<
SFCScriptCompileOptions,
| 'id'
| 'isProd'
| 'inlineTemplate'
| 'templateOptions'
| 'sourceMap'
| 'genDefaultAs'
| 'customElement'
>
>
template?: Partial<
Omit<
SFCTemplateCompileOptions,
| 'id'
| 'source'
| 'ast'
| 'filename'
| 'scoped'
| 'slotted'
| 'isProd'
| 'inMap'
| 'ssr'
| 'ssrCssVars'
| 'preprocessLang'
>
>
style?: Partial<
Omit<
SFCStyleCompileOptions,
| 'filename'
| 'id'
| 'isProd'
| 'source'
| 'scoped'
| 'cssDevSourcemap'
| 'postcssOptions'
| 'map'
| 'postcssPlugins'
| 'preprocessCustomRequire'
| 'preprocessLang'
| 'preprocessOptions'
>
>
/**
* Use custom compiler-sfc instance. Can be used to force a specific version.
*/
compiler?: typeof _compiler
/**
* @deprecated moved to features.customElement.`
*/
customElements?: boolean | string | RegExp | (string | RegExp)[]
}
Asset URL handling
When @vitejs/plugin-vue 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
`
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-vue'
export default {
plugins: [
vue({
template: {
compilerOptions: {
// ...
},
transformAssetUrls: {
// ...
},
},
}),
],
}
`
Example for transforming custom blocks
`ts
import vue from '@vitejs/plugin-vue'
import yaml from 'js-yaml'
const vueI18nPlugin = {
name: 'vue-i18n',
transform(code, id) {
// if .vue file don't have
if (!/vue&type=i18n/.test(id)) {
return
}
// parse yaml
if (/\.ya?ml$/.test(id)) {
code = JSON.stringify(yaml.load(code.trim()))
}
// mount the value on the i18n property of the component instance
return export default Comp => {
Comp.i18n = ${code}
}
},
}
export default {
plugins: [vue(), vueI18nPlugin],
}
`
Create a file named Demo.vue, add lang="yaml" to the blocks, then you can use the syntax of YAML:
`vue
Hello
message: 'world'
fullWord: 'hello world'
`
message is mounted on the i18n property of the component instance, you can use like this:
`vue
{{ Demo.i18n.fullWord }}
`
Using Vue SFCs as Custom Elements
> Requires vue@^3.2.0 & @vitejs/plugin-vue@^1.4.0
Vue 3.2 introduces the defineCustomElement method, which works with SFCs. By default,