vite
antfu/skills
Next-generation frontend build tool with fast dev server and optimized production builds.
What is vite?
Vite is a modern build tool providing native ESM dev server with HMR, optimized production builds, and plugin API. Use it when configuring Vite projects, building libraries, setting up SSR apps, or migrating to Vite 8 with Rolldown.
- Fast dev server with native ESM and Hot Module Replacement (HMR)
- Production builds with Rolldown bundler (Vite 8) and Oxc transformer
- Plugin API for extending build behavior and creating virtual modules
- Asset queries for importing files as raw strings or URLs
- Multi-environment support and Environment API (Vite 6+)
- Library mode and SSR middleware mode for non-SPA applications
How to install vite
npx skills add https://github.com/antfu/skills --skill vite- Node.js environment
- Basic understanding of ES modules and build configuration
How to use vite
- 1.Create or open vite.config.ts in your project root
- 2.Use defineConfig() to define your build configuration
- 3.Add framework plugins (e.g., @vitejs/plugin-vue for Vue 3)
- 4.Configure dev server options (port, proxy) and build targets as needed
- 5.Run vite to start the dev server or vite build for production builds
- 6.Use import.meta.glob for dynamic imports and asset queries (?raw, ?url) for special file handling
Use cases
- Configuring vite.config.ts with aliases, proxies, and build targets
- Building Vue, React, or framework-agnostic libraries with optimized output
- Setting up Server-Side Rendering (SSR) with ssrLoadModule and JavaScript API
- Migrating from Vite 7 to Vite 8 with Rolldown bundler and Oxc transformer
- Creating custom Vite plugins with virtual modules and plugin hooks
- Frontend developers building web applications
- Library authors packaging components or utilities
- Full-stack developers implementing SSR applications
- Teams migrating to modern build tooling
vite FAQ
Vite 8 uses Rolldown as the bundler and Oxc as the transformer, replacing Rollup and esbuild. This provides faster builds and better performance. See rolldown-migration reference for config changes.
Use vite build --ssr to create an SSR build, configure ssrLoadModule in your server middleware, and use the JavaScript API to programmatically build. See build-and-ssr reference.
Vite strongly prefers ESM. Always use ESM syntax (import/export) in vite.config.ts and your source code to avoid compatibility issues.
Implement Vite-specific hooks in a plugin object, handle virtual modules with resolveId/load, and use plugin ordering to control execution. See core-plugin-api reference.
@vitejs/plugin-vue (Vue 3), @vitejs/plugin-react (React), @vitejs/plugin-react-swc (React with SWC), @vitejs/plugin-vue-jsx (Vue JSX), and @vitejs/plugin-legacy (legacy browser support).
Full instructions (SKILL.md)
Source of truth, from antfu/skills.
name: vite description: Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite. metadata: author: Anthony Fu version: "2026.1.31" source: Generated from https://github.com/vitejs/vite, scripts at https://github.com/antfu/skills
Vite
Based on Vite 8 beta (Rolldown-powered). Vite 8 uses Rolldown bundler and Oxc transformer.
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.ts - Always 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 build
Common 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
Related skills
More from antfu/skills and the wider catalog.
vue
Vue 3 Composition API with script setup, reactivity, and built-in components for modern SFCs.
vitest
Jest-compatible unit testing framework powered by Vite with native ESM, TypeScript, and JSX support.
vue-best-practices
Vue 3 best practices guide: Composition API, TypeScript, and component architecture for maintainable applications.
nuxt
Full-stack Vue framework with SSR, file-based routing, auto-imports, and universal deployment via Nitro.
vueuse-functions
Apply VueUse composables to build concise, maintainable Vue.js and Nuxt features.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance and accessibility best practices.