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

1// vite.config.js
2import vue from '@vitejs/plugin-vue2'
3
4export default {
5  plugins: [vue()]
6}

Options

1export interface Options {
2  include?: string | RegExp | (string | RegExp)[]
3  exclude?: string | RegExp | (string | RegExp)[]
4
5  isProduction?: boolean
6
7  // options to pass on to vue/compiler-sfc
8  script?: Partial<Pick<SFCScriptCompileOptions, 'babelParserPlugins'>>
9  template?: Partial<
10    Pick<
11      SFCTemplateCompileOptions,
12      | 'compiler'
13      | 'compilerOptions'
14      | 'preprocessOptions'
15      | 'transpileOptions'
16      | 'transformAssetUrls'
17      | 'transformAssetUrlsOptions'
18    >
19  >
20  style?: Partial<Pick<SFCStyleCompileOptions, 'trim'>>
21}

Asset URL handling

When @vitejs/plugin-vue2 compiles the <template> blocks in SFCs, it also converts any encountered asset URLs into ESM imports.

For example, the following template snippet:

1<img src="../image.png" />

Is the same as:

1<script setup>
2import _imports_0 from '../image.png'
3</script>

1<img :src="_imports_0" />

By default the following tag/attribute combinations are transformed, and can be configured using the template.transformAssetUrls option.

1{
2  video: ['src', 'poster'],
3  source: ['src'],
4  img: ['src'],
5  image: ['xlink:href', 'href'],
6  use: ['xlink:href', 'href']
7}

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:

1import vue from '@vitejs/plugin-vue2'
2
3export default {
4  plugins: [
5    vue({
6      template: {
7        compilerOptions: {
8          // ...
9        },
10        transformAssetUrls: {
11          // ...
12        }
13      }
14    })
15  ]
16}

Example for transforming custom blocks

1import vue from '@vitejs/plugin-vue2'
2
3const vueI18nPlugin = {
4  name: 'vue-i18n',
5  transform(code, id) {
6    if (!/vue&type=i18n/.test(id)) {
7      return
8    }
9    if (/\.ya?ml$/.test(id)) {
10      code = JSON.stringify(require('js-yaml').load(code.trim()))
11    }
12    return `export default Comp => {
13      Comp.i18n = ${code}
14    }`
15  }
16}
17
18export default {
19  plugins: [vue(), vueI18nPlugin]
20}

License

MIT