Note: as ofvue
3.2.13+ and@vitejs/plugin-vue
1.9.0+,@vue/compiler-sfc
is no longer required as a peer dependency.
// 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
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<
Pick<
SFCScriptCompileOptions,
| 'babelParserPlugins'
| 'globalTypeFiles'
| 'defineModel'
| 'propsDestructure'
| 'fs'
>
>
template?: Partial<
Pick<
SFCTemplateCompileOptions,
| 'compiler'
| 'compilerOptions'
| 'preprocessOptions'
| 'preprocessCustomRequire'
| 'transformAssetUrls'
>
>
style?: Partial<Pick<SFCStyleCompileOptions, 'trim'>>
/**
* Transform Vue SFCs into custom elements.
* - `true`: all `*.vue` imports are converted into custom elements
* - `string | RegExp`: matched files are converted into custom elements
*
* @default /\.ce\.vue$/
*/
customElement?: boolean | string | RegExp | (string | RegExp)[]
/**
* Use custom compiler-sfc instance. Can be used to force a specific version.
*/
compiler?: typeof _compiler
}
Asset URL handling
When@vitejs/plugin-vue
compiles the <template>
blocks in SFCs, it also converts any encountered asset URLs into ESM imports.For example, the following template snippet:
<img src="../image.png" />
Is the same as:
<script setup>
import _imports_0 from '../image.png'
</script>
<img :src="_imports_0" />
By default the following tag/attribute combinations are transformed, and can be configured using the
template.transformAssetUrls
option.{
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
:
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue({
template: {
compilerOptions: {
// ...
},
transformAssetUrls: {
// ...
},
},
}),
],
}
Example for transforming custom blocks
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 <i18n> block, just return
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 <i18n>
blocks, then you can use the syntax of YAML
:<template>Hello</template>
<i18n lang="yaml">
message: 'world'
fullWord: 'hello world'
</i18n>
message
is mounted on the i18n property of the component instance, you can use like this:<script setup lang="ts">
import Demo from 'components/Demo.vue'
</script>
<template>
<Demo /> {{ Demo.i18n.message }}
<div>{{ Demo.i18n.fullWord }}</div>
</template>
Using Vue SFCs as Custom Elements
Requiresvue@^3.2.0
&@vitejs/plugin-vue@^1.4.0
Vue 3.2 introduces the
defineCustomElement
method, which works with SFCs. By default, <style>
tags inside SFCs are extracted and merged into CSS files during build. However when shipping a library of custom elements, it may be desirable to inline the styles as JavaScript strings and inject them into the custom elements' shadow root instead.Starting in 1.4.0, files ending with
*.ce.vue
will be compiled in "custom elements" mode: its <style>
tags are compiled into inlined CSS strings and attached to the component as its styles
property:import { defineCustomElement } from 'vue'
import Example from './Example.ce.vue'
console.log(Example.styles) // ['/* css content */']
// register
customElements.define('my-example', defineCustomElement(Example))
Note in custom elements mode there is no need to use
<style scoped>
since the CSS is already scoped inside the shadow DOM.The
customElement
plugin option can be used to configure the behavior:{ customElement: true }
will import all*.vue
files in custom element mode.- Use a string or regex pattern to change how files should be loaded as Custom Elements (this check is applied after
include
andexclude
matches).