vite-plugin-vue2

2.0.3 verified Sat Apr 25 auth: no javascript maintenance

A Vite plugin for Vue 2 (maintenance mode, v2.0.3, last release). Supports Vue 2.6 and earlier; superseded by @vitejs/plugin-vue2 for Vue 2.7+. Provides HMR, custom template options, JSX, and esbuild target. Ships TypeScript types. Requires vite ^2.0.0 || ^3.0.0 || ^4.0.0 and vue-template-compiler ^2.2.0.

Common errors

error Error: The package "vite-plugin-vue2" is not a valid Vite plugin, did you mean to use `import { createVuePlugin } from 'vite-plugin-vue2'`? ↓

cause Using default import instead of named import.

fix

Use import { createVuePlugin } from 'vite-plugin-vue2'

error Cannot find module 'vue-template-compiler' ↓

cause Missing peer dependency vue-template-compiler.

fix

Run npm install vue-template-compiler@^2.2.0

error Error: Vue 2.7 is not supported by vite-plugin-vue2. Please use @vitejs/plugin-vue2. ↓

cause Plugin only supports Vue 2.6 and earlier.

fix

Use @vitejs/plugin-vue2 for Vue 2.7+.

error SyntaxError: Unexpected token 'export' ↓

cause CommonJS require() used on an ESM-only package.

fix

Use ESM import or dynamic import().

Warnings

deprecated This plugin is in maintenance mode; use @vitejs/plugin-vue2 for Vue 2.7+. ↓

fix Migrate to @vitejs/plugin-vue2 if using Vue >=2.7.

gotcha Requires vue-template-compiler peer dependency, which must match the Vue version exactly. ↓

fix Ensure vue-template-compiler@^2.2.0 matches the Vue 2 version.

gotcha The plugin is ESM-only; CommonJS require() will throw an error. ↓

fix Use ESM imports or dynamic import.

gotcha Default whitespace mode is 'condense', which may alter whitespace in templates. ↓

fix Set { vueTemplateOptions: { compilerOptions: { whitespace: 'preserve' } } } to keep whitespace.

breaking Removed support for vite-plugin-vue2 <2.0.0? (No breaking changes documented but version jump). ↓

fix Check changelog for migration if upgrading from v1.

Install

npm install vite-plugin-vue2

yarn add vite-plugin-vue2

pnpm add vite-plugin-vue2

Imports

createVuePlugin

wrong

import createVuePlugin from 'vite-plugin-vue2'

correct

import { createVuePlugin } from 'vite-plugin-vue2'

Named export, not default. ESM only.

vite-plugin-vue2

wrong

const vitePluginVue2 = require('vite-plugin-vue2')

correct

import { createVuePlugin } from 'vite-plugin-vue2'

CommonJS require will fail; package is ESM-only.

createVuePlugin

const { createVuePlugin } = await import('vite-plugin-vue2')

Dynamic import works in ESM contexts.

Quickstart

Shows basic setup with createVuePlugin, enabling JSX, and setting esbuild target.

// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [
    createVuePlugin({
      vueTemplateOptions: {
        compilerOptions: { whitespace: 'condense' }
      },
      jsx: true,
      target: 'es2015'
    })
  ]
}