@vitejs/plugin-vue

What is @vitejs/plugin-vue?

The @vitejs/plugin-vue package is a plugin for Vite, a modern frontend build tool, that enables Vue.js single-file component (SFC) support. It allows developers to use Vue 3 features within Vite projects, including template compilation, hot module replacement (HMR), and more.

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

Single-File Component Support

Enables the use of Vue.js single-file components (.vue files) by handling their parsing and compilation.

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

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

Hot Module Replacement

Supports HMR for Vue components, allowing for a more efficient development experience by enabling instant feedback on code changes without a full page reload.

if (import.meta.hot) {
  import.meta.hot.accept('./some-module.js', (newModule) => {
    // Handle the module update
  });
}

Template Compilation

Compiles Vue component templates into render functions, improving performance and enabling the use of Vue's template syntax.

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    };
  }
};
</script>

Other packages similar to @vitejs/plugin-vue

vue-loader

vue-loader is a webpack plugin for transforming Vue components written in the Single-File Component (SFC) format. It is similar to @vitejs/plugin-vue but is specifically designed for webpack instead of Vite.

rollup-plugin-vue

rollup-plugin-vue is a plugin for Rollup that allows you to integrate Vue SFCs into your Rollup builds. It offers similar functionality to @vitejs/plugin-vue but is tailored for the Rollup module bundler.

nuxt

Nuxt is a higher-level framework built on top of Vue.js that provides its own way of handling Vue files, along with server-side rendering and static site generation. It can be seen as an alternative to using Vite with @vitejs/plugin-vue for building Vue applications.

README

@vitejs/plugin-vue

Note: requires @vue/compiler-sfc as peer dependency. This is largely a port of rollup-plugin-vue with some vite-specific tweaks.

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

export default {
  plugins: [vue()]
}

Options

export interface Options {
  include?: string | RegExp | (string | RegExp)[]
  exclude?: string | RegExp | (string | RegExp)[]

  ssr?: boolean
  isProduction?: boolean

  // options to pass on to @vue/compiler-sfc
  script?: SFCScriptCompileOptions
  template?: SFCTemplateCompileOptions
  style?: SFCStyleCompileOptions
}

Example for transforming custom blocks

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

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

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

License

MIT