@vitejs/plugin-vue2

What is @vitejs/plugin-vue2?

@vitejs/plugin-vue2 is a Vite plugin that provides support for Vue 2.x single-file components (SFCs). It allows developers to leverage the fast and modern build tool Vite while working with Vue 2 projects.

What are @vitejs/plugin-vue2's main functionalities?

Vue 2 Single File Component Support

This feature allows you to use Vue 2 single-file components (SFCs) in your Vite project. The code sample demonstrates a basic setup where a Vue 2 component is imported and mounted to a DOM element.

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Hot Module Replacement (HMR)

This feature enables Hot Module Replacement (HMR) for Vue 2 components, allowing for instant updates without a full page reload. The code sample shows how to set up HMR in a Vue 2 project using Vite.

import { createApp } from 'vue';
import App from './App.vue';

if (import.meta.hot) {
  import.meta.hot.accept();
}

createApp(App).mount('#app');

Custom Block Support

This feature allows the use of custom blocks in Vue 2 single-file components. The code sample demonstrates a Vue 2 SFC with a custom block.

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World'
    };
  }
};
</script>

<style scoped>
div {
  color: red;
}
</style>

<custom-block>
  This is a custom block
</custom-block>

Other packages similar to @vitejs/plugin-vue2

vue-loader

vue-loader is a webpack loader for Vue.js components. It allows you to write Vue components in a single file with HTML, JavaScript, and CSS. Compared to @vitejs/plugin-vue2, vue-loader is designed for use with webpack rather than Vite.

rollup-plugin-vue

rollup-plugin-vue is a Rollup plugin for Vue.js components. It enables the use of Vue single-file components in Rollup projects. While @vitejs/plugin-vue2 is tailored for Vite, rollup-plugin-vue serves a similar purpose for Rollup.

vite-plugin-vue2

vite-plugin-vue2 is another Vite plugin for Vue 2.x single-file components. It provides similar functionality to @vitejs/plugin-vue2, allowing developers to use Vue 2 with Vite.

README

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

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

export default {
  plugins: [vue()]
}

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'>>
  template?: Partial<
    Pick<
      SFCTemplateCompileOptions,
      | 'compiler'
      | 'compilerOptions'
      | 'preprocessOptions'
      | 'transpileOptions'
      | 'transformAssetUrls'
      | 'transformAssetUrlsOptions'
    >
  >
  style?: Partial<Pick<SFCStyleCompileOptions, 'trim'>>
}

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:

<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-vue2'

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

Example for transforming custom blocks

import vue from '@vitejs/plugin-vue2'

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').load(code.trim()))
    }
    return `export default Comp => {
      Comp.i18n = ${code}
    }`
  }
}

export default {
  plugins: [vue(), vueI18nPlugin]
}

License

MIT