Common scenarios

Component registry and types

componentRegistry({
	dirs: ["src/components", "src/features"],
	output: "src/components/index.ts",
	dts: "types/components.d.ts",
	conflict: "error",
});

The generated module provides a named component export, a NameInstance = InstanceType<typeof Name> type for every component, and registerComponents(app), which directly uses app.component(Component.name, Component). When the plugin can statically confirm that a runtime name is missing, it warns during generation but still emits the component; inconclusive source is treated as named. The declaration output augments Vue's GlobalComponents. An index.vue file uses its parent directory name by default; every generated name must be a unique JavaScript identifier.

CDN externalization

cdnImport({
	modules: [
		{
			name: "vue",
			global: "Vue",
			version: "3.5.0",
			js: "dist/vue.global.prod.js",
		},
	],
	dev: false,
});

The plugin supports default and named imports, named re-exports, export * as name, and static-string dynamic imports. Plain export * from "module" fails explicitly because a browser global cannot be enumerated safely at build time.

With dev: true, the development server injects CDN tags and transforms JavaScript module references while skipping inline HTML styles and other CSS requests.

Build information

buildInfo({
	fileName: "meta/build-info.json",
	data: ({ mode }) => ({ channel: mode === "production" ? "stable" : "preview" }),
});

The generated file is available at /meta/build-info.json; the development server exposes the same endpoint. Source code can also import virtual:fast-vite/build-info; see the API reference for its type declaration.

Production quality gates

export default defineConfig({
	plugins: [
		subresourceIntegrity({ algorithms: "sha384", manifest: true }),
		bundleBudget({
			budgets: [
				{ name: "single JavaScript", filter: /\.js$/, limit: 250 * 1024, requireMatch: true },
				{ name: "all CSS", filter: /\.css$/, limit: 50 * 1024, mode: "gzip", scope: "total" },
			],
		}),
		compression({ algorithms: ["gzip", "brotli"] }),
	],
});

When these plugins are combined, keep the order subresourceIntegrity → bundleBudget → compression.

External configuration restart

devRestart({
	paths: ["schema", "config/features.json"],
	debounce: 100,
});

Use devRestart() for configuration inputs outside Vite's module graph. Vite already restarts for its own config and .env files.