plugin-vue

@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.

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()]
}

Options

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:

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // ...
        }
      }
    })
  ]
}

Example for transforming custom blocks

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:

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