Vite
Anthony FuCommunityCreated by Anthony Fu
- Skill
- Tool integration
- Software development
- MIT
- No issues found
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
This skill provides comprehensive reference material for Vite 8, a frontend build tool that utilizes the Rolldown bundler and Oxc transformer. It covers core configuration patterns, the plugin API, library mode, and SSR primitives. It also includes specific guidance for migrating to Vite 8, managing multi-environment setups, and utilizing the JavaScript API for programmatic control over build and development processes.
What it does
- Provides patterns for vite.config.ts including conditional and asynchronous configurations.
- Explains the Rolldown migration process for Vite 8 projects.
- Details the Vite plugin API for creating custom hooks and virtual modules.
- Offers guidance on library mode, SSR middleware, and multi-page application setups.
- Documents the JavaScript API for programmatic server creation and build execution.
- Lists official plugins for framework support including Vue and React.
When to use it
- When configuring a new or existing Vite 8 project.
- When migrating a project from previous Vite versions to Vite 8.
- When building libraries or SSR applications using Vite primitives.
- When developing custom Vite plugins or integrating multi-environment support.
- When needing to programmatically control the Vite build or dev server via the JavaScript API.
Advantages
- Centralized reference for Vite 8 specific changes like Rolldown and Oxc.
- Clear examples for complex configurations like proxying and environment variables.
- Provides structured guidance for library distribution and multi-page entry points.
- Includes TypeScript intellisense patterns for configuration files.
Usage examples
- “How do I configure a proxy in my vite.config.ts?”
- The skill provides a code snippet showing the server.proxy configuration object with target, changeOrigin, and path rewrite options.
- “Show me how to set up a library build in Vite 8.”
- The skill provides a configuration example using the build.lib option, including entry points and rolldownOptions for external dependencies.
- “How do I access environment variables inside my Vite config?”
- The skill demonstrates using the loadEnv function within a defineConfig function to access variables from .env files during configuration resolution.
- “What is the new way to define entry points in Vite 8?”
- The skill explains the top-level input option which replaces previous entry point configurations for build, SSR, and dependency optimization.
Install
Download the skill as a ZIP:
https://autogineer.com/agent-skills/antfu/vite/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip vite.zip -d .agents/skills
Documentation by Anthony Fu
Vite
Based on Vite v8.3.5 (Rolldown-powered), generated at 2026-11-05. Vite 8 uses the Rolldown bundler and the Oxc transformer instead of esbuild + Rollup.
Vite is a next-generation frontend build tool with fast dev server (native ESM + HMR) and optimized production builds.
Preferences
Use TypeScript: prefer
vite.config.tsAlways use ESM, avoid CommonJS
Core
| Topic | Description | Reference |
|---|---|---|
| Configuration | vite.config.ts, defineConfig, conditional configs, loadEnv | core-config |
| Features | import.meta.glob, asset queries (?raw, ?url), import.meta.env, HMR API | core-features |
| Plugin API | Vite-specific hooks, virtual modules, plugin ordering | core-plugin-api |
Build & SSR
| Topic | Description | Reference |
|---|---|---|
| Build & SSR | Library mode, SSR middleware mode, ssrLoadModule, JavaScript API | build-and-ssr |
Advanced
| Topic | Description | Reference |
|---|---|---|
| Environment API | Vite 6+ multi-environment support, custom runtimes | environment-api |
| Rolldown Migration | Vite 8 changes: Rolldown bundler, Oxc transformer, config migration | rolldown-migration |
Quick Reference
CLI Commands
vite # Start dev server
vite build # Production build
vite preview # Preview production build
vite build --ssr # SSR buildCommon Config
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [],
resolve: { alias: { '@': '/src' } },
server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
build: { target: 'esnext', outDir: 'dist' },
})Official Plugins
@vitejs/plugin-vue- Vue 3 SFC support@vitejs/plugin-vue-jsx- Vue 3 JSX@vitejs/plugin-react- React with Oxc/Babel@vitejs/plugin-react-swc- React with SWC@vitejs/plugin-legacy- Legacy browser support
Files
- ATTRIBUTION.mdAdded by AutoGineer889 B
- GENERATION.md134 B
- LICENSELicence file added by AutoGineer1.1 KiB
- SKILL.md2.5 KiB
- references/build-and-ssr.md3.7 KiB
- references/core-config.md4.0 KiB
- references/core-features.md5.1 KiB
- references/core-plugin-api.md6.0 KiB
- references/environment-api.md4.4 KiB
- references/rolldown-migration.md5.3 KiB
references/core-plugin-api.md
name: vite-plugin-api description: Vite plugin authoring with Vite-specific hooks
Vite Plugin API
Vite plugins extend Rolldown's plugin interface with Vite-specific hooks.
Basic Structure
function myPlugin(): Plugin {
return {
name: 'my-plugin',
// hooks...
}
}Vite-Specific Hooks
config
Modify config before resolution:
const plugin = () => ({
name: 'add-alias',
config: () => ({
resolve: {
alias: { foo: 'bar' },
},
}),
})configResolved
Access final resolved config:
const plugin = () => {
let config: ResolvedConfig
return {
name: 'read-config',
configResolved(resolvedConfig) {
config = resolvedConfig
},
transform(code, id) {
if (config.command === 'serve') { /* dev */ }
},
}
}configureServer
Add custom middleware to dev server:
const plugin = () => ({
name: 'custom-middleware',
configureServer(server) {
server.middlewares.use((req, res, next) => {
// handle request
next()
})
},
})Return function to run after internal middlewares:
configureServer(server) {
return () => {
server.middlewares.use((req, res, next) => {
// runs after Vite's middlewares
})
}
}transformIndexHtml
Transform HTML entry files:
const plugin = () => ({
name: 'html-transform',
transformIndexHtml(html) {
return html.replace(/<title>(.*?)<\/title>/, '<title>New Title</title>')
},
})Inject tags:
transformIndexHtml() {
return [
{ tag: 'script', attrs: { src: '/inject.js' }, injectTo: 'body' },
]
}handleHotUpdate
Custom HMR handling:
handleHotUpdate({ server, modules, timestamp }) {
server.ws.send({ type: 'custom', event: 'special-update', data: {} })
return [] // empty = skip default HMR
}Virtual Modules
Serve virtual content without files on disk:
const plugin = () => {
const virtualModuleId = 'virtual:my-module'
const resolvedId = '\0' + virtualModuleId
return {
name: 'virtual-module',
resolveId(id) {
if (id === virtualModuleId) return resolvedId
},
load(id) {
if (id === resolvedId) {
return `export const msg = "from virtual module"`
}
},
}
}Usage:
import { msg } from 'virtual:my-module'Convention: prefix user-facing path with virtual:, prefix resolved id with \0.
Plugin Ordering
Use enforce to control execution order:
{
name: 'pre-plugin',
enforce: 'pre', // runs before core plugins
}
{
name: 'post-plugin',
enforce: 'post', // runs after build plugins
}Order: Alias → enforce: 'pre' → Core → User (no enforce) → Build → enforce: 'post' → Post-build
Conditional Application
{
name: 'build-only',
apply: 'build', // or 'serve'
}
// Function form:
{
apply(config, { command }) {
return command === 'build' && !config.build.ssr
}
}Rolldown Hooks (dev + build)
These come from Rolldown and are per-environment (this.environment available):
resolveId(id, importer)- Resolve import pathsload(id)- Load module contenttransform(code, id)- Transform module code
transform(code, id) {
if (id.endsWith('.custom')) {
return { code: compile(code), map: null }
}
}Hook Filters (Vite 8)
Prefer the object form with filter + handler for transform/resolveId/load — filtering runs in Rust, avoiding a JS call per module:
import { exactRegex } from '@rolldown/pluginutils' // also from 'rolldown/filter'
const plugin = () => ({
name: 'transform-file',
transform: {
filter: { id: /\.custom$/ },
handler(code, id) {
return { code: compile(code), map: null }
},
},
})@rolldown/pluginutils exports helpers like exactRegex and prefixRegex.
Per-Environment vs Global Hooks (Vite 8)
Global (called once, no
this.environment):config,configResolved,configureServer,configurePreviewServer,closeServer,closePreviewServer,buildApp.Per-environment (called per environment, expose
this.environment): all Rolldown hooks,transformIndexHtml,handleHotUpdate/hotUpdate,configEnvironment,applyToEnvironment.
Cleanup Hooks (Vite 8)
closeServer({ reason }) runs after the dev server is torn down (reason is 'restart' or 'close'); closePreviewServer() is the preview equivalent. Use to dispose resources created in configureServer.
{
name: 'close-server',
configureServer(server) { this.resource = createResource() },
async closeServer({ reason }) {
if (reason === 'close') await this.resource.dispose()
},
}Plugin Context Meta (Vite 8)
this.meta.viteVersion— current Vite version string.this.meta.rolldownVersion— only defined on Rolldown-powered Vite (8+); use it to branch behavior.
Output Bundle Metadata
During build, Vite augments Rolldown output objects with viteMetadata — inspect emitted CSS/assets without build.manifest:
{
name: 'output-metadata',
enforce: 'post',
generateBundle(_, bundle) {
for (const output of Object.values(bundle)) {
const css = output.viteMetadata?.importedCss // Set<string>
const assets = output.viteMetadata?.importedAssets // Set<string>
}
},
}Referencing Emitted Assets
this.emitFile({ type: 'asset', ... }) returns a referenceId; resolve its final URL later:
In JS:
import.meta.ROLLDOWN_FILE_URL_<referenceId>In CSS/HTML:
__VITE_ASSET__<referenceId>__
Client-Server Communication
Server to client:
configureServer(server) {
server.ws.send('my:event', { msg: 'hello' })
}Client side:
if (import.meta.hot) {
import.meta.hot.on('my:event', (data) => {
console.log(data.msg)
})
}Client to server:
// Client
import.meta.hot.send('my:from-client', { msg: 'Hey!' })
// Server
server.ws.on('my:from-client', (data, client) => {
client.send('my:ack', { msg: 'Got it!' })
})<!-- Source references: - https://vite.dev/guide/api-plugin -->
Requirements and compatibility
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Security
No issues found by our static scan· No issues found
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Created by
- Anthony Fu
- Publisher
- Anthony Fu (Community)
- Source
- antfu/skills · skills/vite · commit f63e9ec
- Licence
- MIT License (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE.md)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
AutoGineer is not affiliated with or endorsed by Anthony Fu or Anthony Fu.
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download vite.zip