# @vitejs/plugin-vue2

> > [!CAUTION] > Vue 2 has reached EOL, and this project is no longer actively maintained.

Latest version **2.3.4** (published 2025-10-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vitejs/plugin-vue2
pnpm add @vitejs/plugin-vue2
yarn add @vitejs/plugin-vue2
bun add @vitejs/plugin-vue2
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.3.4 |
| Published | 2025-10-04 |
| First published | 2022-06-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | ^14.18.0 \|\| >= 16.0.0 |
| Dependencies | 0 |
| Unpacked size | 112.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 577 |
| Author | Evan You |
| Maintainers | yyx990803, patak, antfu, vitebot, sxzz |

## Links

- npm: https://www.npmjs.com/package/@vitejs/plugin-vue2
- Repository: https://github.com/vitejs/vite-plugin-vue2
- Homepage: https://github.com/vitejs/vite-plugin-vue2/#readme
- Issues: https://github.com/vitejs/vite-plugin-vue2/issues
- npm.io page: https://npm.io/package/@vitejs/plugin-vue2

## Recent versions

- 2.3.4 (latest) — 2025-10-04
- 2.3.3 — 2024-11-26
- 2.3.2 — 2024-11-26
- 2.3.1 — 2023-11-16
- 2.3.0 — 2023-11-16
- 2.2.0 — 2022-12-10
- 2.1.0 — 2022-11-30
- 2.0.1 — 2022-11-09
- 2.0.0 — 2022-09-13
- 1.1.2 — 2022-07-01
- 1.1.1 — 2022-06-28
- 1.1.0 — 2022-06-20
- 1.0.1 — 2022-06-17
- 1.0.0 — 2022-06-17
- 0.1.0 — 2022-06-17

## README

# @vitejs/plugin-vue2 [![npm](https://img.shields.io/npm/v/@vitejs/plugin-vue2.svg)](https://npmjs.com/package/@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.

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

export default {
  plugins: [vue()]
}
```

## Options

```ts
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:

```vue
<img src="../image.png" />
```

Is the same as:

```vue
<script setup>
import _imports_0 from '../image.png'
</script>
```

```vue
<img :src="_imports_0" />
```

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

```js
{
  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`:

```ts
import vue from '@vitejs/plugin-vue2'

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

## Example for transforming custom blocks

```ts
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

---
_Source: https://npm.io/package/@vitejs/plugin-vue2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._