# @vitejs/plugin-vue [![npm](https://img.shields.io/npm/v/@vitejs/plugin-vue.svg)](https://npmjs.com/package/@vitejs/plugin-vue) > Note: as of `vue` 3.2.13+ and `@vitejs/plugin-vue` 1.9.0+, `@vue/compiler-sfc` is no longer required as a peer dependency. ```js // vite.config.js import vue from '@vitejs/plugin-vue' export default { plugins: [vue()], } ``` For JSX / TSX support, [`@vitejs/plugin-vue-jsx`](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx) is also needed. ## Options ```ts export interface Options { include?: string | RegExp | (string | RegExp)[] exclude?: string | RegExp | (string | RegExp)[] isProduction?: boolean /** * Requires @vitejs/plugin-vue@^5.1.0 */ features?: { /** * Enable reactive destructure for `defineProps`. * - Available in Vue 3.4 and later. * - **default:** `false` in Vue 3.4 (**experimental**), `true` in Vue 3.5+ */ propsDestructure?: boolean /** * Transform Vue SFCs into custom elements. * - `true`: all `*.vue` imports are converted into custom elements * - `string | RegExp`: matched files are converted into custom elements * - **default:** /\.ce\.vue$/ */ customElement?: boolean | string | RegExp | (string | RegExp)[] /** * Set to `false` to disable Options API support and allow related code in * Vue core to be dropped via dead-code elimination in production builds, * resulting in smaller bundles. * - **default:** `true` */ optionsAPI?: boolean /** * Set to `true` to enable devtools support in production builds. * Results in slightly larger bundles. * - **default:** `false` */ prodDevtools?: boolean /** * Set to `true` to enable detailed information for hydration mismatch * errors in production builds. Results in slightly larger bundles. * - **default:** `false` */ prodHydrationMismatchDetails?: boolean /** * Customize the component ID generation strategy. * - `'filepath'`: hash the file path (relative to the project root) * - `'filepath-source'`: hash the file path and the source code * - `function`: custom function that takes the file path, source code, * whether in production mode, and the default hash function as arguments * - **default:** `'filepath'` in development, `'filepath-source'` in production */ componentIdGenerator?: | 'filepath' | 'filepath-source' | (( filepath: string, source: string, isProduction: boolean | undefined, getHash: (text: string) => string, ) => string) } // `script`, `template` and `style` are lower-level compiler options // to pass on to respective APIs of `vue/compiler-sfc` script?: Partial< Omit< SFCScriptCompileOptions, | 'id' | 'isProd' | 'inlineTemplate' | 'templateOptions' | 'sourceMap' | 'genDefaultAs' | 'customElement' > > template?: Partial< Omit< SFCTemplateCompileOptions, | 'id' | 'source' | 'ast' | 'filename' | 'scoped' | 'slotted' | 'isProd' | 'inMap' | 'ssr' | 'ssrCssVars' | 'preprocessLang' > > style?: Partial< Omit< SFCStyleCompileOptions, | 'filename' | 'id' | 'isProd' | 'source' | 'scoped' | 'cssDevSourcemap' | 'postcssOptions' | 'map' | 'postcssPlugins' | 'preprocessCustomRequire' | 'preprocessLang' | 'preprocessOptions' > > /** * Use custom compiler-sfc instance. Can be used to force a specific version. */ compiler?: typeof _compiler /** * @deprecated moved to `features.customElement`. */ customElements?: boolean | string | RegExp | (string | RegExp)[] } ``` ## Asset URL handling When `@vitejs/plugin-vue` compiles the `

c	File Name	Size	T	Date
zip	dist/	40	---	2026-10-30 19:03:13
zip	node_modules/	8	---	2026-10-30 19:03:50
-	LICENSE	1103	%	2026-10-30 19:03:12
-	README.md	7418	md	2026-10-30 19:03:12
-	package.json	1556	json	2026-10-30 19:03:12

🌲 / keluargamart apps erp node_modules @vitejs plugin-vue

control-panel