You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
3.0 KiB
111 lines
3.0 KiB
11 months ago
|
# @vitejs/plugin-vue [](https://npmjs.com/package/@vitejs/plugin-vue)
|
||
|
|
|
||
|
|
Note: requires `@vue/compiler-sfc` as peer dependency. This is largely a port of `rollup-plugin-vue` with some vite-specific tweaks.
|
||
|
|
|
||
|
|
```js
|
||
|
|
// vite.config.js
|
||
|
|
import vue from '@vitejs/plugin-vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
plugins: [vue()]
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Options
|
||
|
|
|
||
|
|
```ts
|
||
|
|
export interface Options {
|
||
|
|
include?: string | RegExp | (string | RegExp)[]
|
||
|
|
exclude?: string | RegExp | (string | RegExp)[]
|
||
|
|
|
||
|
|
ssr?: boolean
|
||
|
|
isProduction?: boolean
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Transform Vue SFCs into custom elements (requires Vue >= 3.2.0)
|
||
|
|
* - `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)[]
|
||
|
|
|
||
|
|
// options to pass on to @vue/compiler-sfc
|
||
|
|
script?: Partial<SFCScriptCompileOptions>
|
||
|
|
template?: Partial<SFCTemplateCompileOptions>
|
||
|
|
style?: Partial<SFCStyleCompileOptions>
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Example for passing options to `@vue/compiler-dom`:
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import vue from '@vitejs/plugin-vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
plugins: [
|
||
|
|
vue({
|
||
|
|
template: {
|
||
|
|
compilerOptions: {
|
||
|
|
// ...
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
]
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Example for transforming custom blocks
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import vue from '@vitejs/plugin-vue'
|
||
|
|
|
||
|
|
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').safeLoad(code.trim()))
|
||
|
|
}
|
||
|
|
return `export default Comp => {
|
||
|
|
Comp.i18n = ${code}
|
||
|
|
}`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default {
|
||
|
|
plugins: [vue(), vueI18nPlugin]
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 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, `<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:
|
||
|
|
|
||
|
|
```js
|
||
|
|
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` and `exclude` matches).
|
||
|
|
|
||
|
|
## License
|
||
|
|
|
||
|
|
MIT
|