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.
@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.
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
script?: Partial<SFCScriptCompileOptions>
template?: Partial<SFCTemplateCompileOptions>
style?: Partial<SFCStyleCompileOptions>
}
Example for passing options to @vue/compiler-dom
:
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue({
template: {
compilerOptions: {
}
}
})
]
}
Example for transforming custom blocks
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