CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vitejs--plugin-vue2

Vue 2 plugin for Vite that provides Vue 2 single file component support in Vite build tool

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

@vitejs/plugin-vue2

@vitejs/plugin-vue2 is a Vite plugin that provides Vue 2 Single File Component (SFC) support for Vite build tool. It compiles Vue 2 templates, handles asset URL transformations, and provides comprehensive options for configuring the Vue 2 compiler including script, template, and style compilation settings.

Package Information

  • Package Name: @vitejs/plugin-vue2
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @vitejs/plugin-vue2

Core Imports

import vue from '@vitejs/plugin-vue2';
import type { Options, VueQuery } from '@vitejs/plugin-vue2';
import { parseVueRequest } from '@vitejs/plugin-vue2';

For CommonJS:

const vue = require('@vitejs/plugin-vue2');
const { parseVueRequest } = require('@vitejs/plugin-vue2');

Basic Usage

import vue from '@vitejs/plugin-vue2';

export default {
  plugins: [
    vue({
      include: /\.vue$/,
      template: {
        transformAssetUrls: {
          img: ['src'],
          video: ['src', 'poster']
        }
      }
    })
  ]
}

Architecture

@vitejs/plugin-vue2 is built around several key components:

  • Plugin Factory: Main function that creates a Vite plugin instance with Vue 2 SFC support
  • SFC Compiler Integration: Interfaces with Vue 2.7+ compiler-sfc for component compilation
  • Asset URL Transformation: Converts static asset references to ESM imports during template compilation
  • Hot Module Replacement: Development-time component updates without page refresh
  • Multi-format Support: Handles various preprocessors for templates, scripts, and styles

Capabilities

Plugin Factory Function

Creates a Vite plugin instance configured for Vue 2 SFC processing with customizable compilation options.

/**
 * Creates a Vite plugin for Vue 2 Single File Component support
 * @param rawOptions - Configuration options for the plugin
 * @returns Vite Plugin instance with Vue 2 SFC processing capabilities
 */
function vue(rawOptions?: Options): Plugin;

interface Options {
  /** Files to include for processing (default: /\.vue$/) */
  include?: string | RegExp | (string | RegExp)[];
  /** Files to exclude from processing */
  exclude?: string | RegExp | (string | RegExp)[];
  /** Production mode flag (auto-detected if not specified) */
  isProduction?: boolean;
  /** Script compilation options */
  script?: Partial<Pick<SFCScriptCompileOptions, 'babelParserPlugins'>>;
  /** Template compilation options */
  template?: Partial<Pick<SFCTemplateCompileOptions, 
    | 'compiler'
    | 'compilerOptions'
    | 'preprocessOptions'
    | 'transpileOptions'
    | 'transformAssetUrls'
    | 'transformAssetUrlsOptions'
  >>;
  /** Style compilation options */
  style?: Partial<Pick<SFCStyleCompileOptions, 'trim'>>;
  /** Custom Vue compiler instance (defaults to auto-resolved vue/compiler-sfc) */
  compiler?: typeof _compiler;
}

interface ResolvedOptions extends Options {
  /** Resolved Vue compiler instance (required) */
  compiler: typeof _compiler;
  /** Project root directory */
  root: string;
  /** Source map generation flag */
  sourceMap: boolean;
  /** CSS dev source map flag */
  cssDevSourcemap: boolean;  
  /** Vite dev server instance */
  devServer?: ViteDevServer;
  /** Vue devtools support flag */
  devToolsEnabled?: boolean;
}

Vue Request Parser

Utility function for parsing Vue-specific request URLs to extract filename and query parameters used internally by the plugin.

/**
 * Parses Vue request URLs to extract filename and query parameters
 * @param id - Request URL string
 * @returns Object containing filename and parsed query parameters
 */
function parseVueRequest(id: string): {
  filename: string;
  query: VueQuery;
};

interface VueQuery {
  /** Vue file processing flag */
  vue?: boolean;
  /** Source path reference for external file blocks */
  src?: string;
  /** Block type for SFC processing */
  type?: 'script' | 'template' | 'style' | 'custom';
  /** Block index for multiple blocks of same type */
  index?: number;
  /** Language/preprocessor identifier */
  lang?: string;
  /** Raw content flag bypassing transformations */
  raw?: boolean;
  /** Scoped CSS processing flag */
  scoped?: boolean;
}

Vue SFC Types

For TypeScript users working with Vue SFC components, these types from vue/compiler-sfc are commonly used:

// Import Vue SFC types for advanced usage
import type {
  SFCDescriptor,
  SFCBlock,
  SFCScriptBlock,
  SFCTemplateBlock,
  SFCStyleBlock,
  SFCScriptCompileOptions,
  SFCTemplateCompileOptions,
  SFCStyleCompileOptions
} from 'vue/compiler-sfc';

Configuration Examples

Basic Configuration

import vue from '@vitejs/plugin-vue2';

export default {
  plugins: [vue()]
}

Advanced Configuration

import vue from '@vitejs/plugin-vue2';

export default {
  plugins: [
    vue({
      include: [/\.vue$/, /\.md$/],
      exclude: /node_modules/,
      template: {
        compilerOptions: {
          whitespace: 'condense'
        },
        transformAssetUrls: {
          video: ['src', 'poster'],
          source: ['src'],
          img: ['src'],
          image: ['xlink:href', 'href'],
          use: ['xlink:href', 'href']
        }
      },
      script: {
        babelParserPlugins: ['decorators-legacy']
      }
    })
  ]
}

Custom Block Processing

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]
}

Asset URL Transformation

The plugin automatically transforms asset URLs in Vue templates to ES module imports:

Template:

<template>
  <img src="../assets/logo.png" />
  <video poster="../assets/thumbnail.jpg">
    <source src="../assets/video.mp4" />
  </video>
</template>

Transforms to:

<script>
import _imports_0 from '../assets/logo.png';
import _imports_1 from '../assets/thumbnail.jpg';
import _imports_2 from '../assets/video.mp4';
</script>

<template>
  <img :src="_imports_0" />
  <video :poster="_imports_1">
    <source :src="_imports_2" />
  </video>
</template>

TypeScript Support

The plugin fully supports TypeScript in Vue components:

<template>
  <div>{{ greeting }}</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

interface User {
  name: string;
  age: number;
}

export default defineComponent({
  data(): { user: User } {
    return {
      user: { name: 'Alice', age: 25 }
    };
  },
  computed: {
    greeting(): string {
      return `Hello, ${this.user.name}!`;
    }
  }
});
</script>

Scoped CSS and CSS Modules

Scoped CSS

<template>
  <div class="container">
    <p class="text">Scoped styles</p>
  </div>
</template>

<style scoped>
.container {
  background: #f0f0f0;
}
.text {
  color: #333;
}
</style>

CSS Modules

<template>
  <div :class="$style.container">
    <p :class="$style.text">CSS Modules</p>
  </div>
</template>

<style module>
.container {
  background: #f0f0f0;
}
.text {
  color: #333;
}
</style>

Hot Module Replacement

The plugin provides seamless HMR support during development:

  • Template-only changes: Fast re-render without losing component state
  • Script changes: Component reload with state preservation where possible
  • Style changes: Instant style updates without page refresh

Requirements

  • Vue: ^2.7.0 (peer dependency - Vue 2.7+ with Composition API support required)
  • Vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 (peer dependency)
  • Node.js: ^14.18.0 || >= 16.0.0

Note: Both Vue and Vite must be installed as peer dependencies. The plugin will automatically resolve the Vue compiler from your project's dependencies.

npm install vue@^2.7.0 vite@^5.0.0 @vitejs/plugin-vue2
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vitejs/plugin-vue2@2.3.x
Publish Source
CLI
Badge
tessl/npm-vitejs--plugin-vue2 badge