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 featuring native ESM development with HMR, optimized production builds using Rolldown (in v8+), and a comprehensive plugin API. Use it when configuring Vite projects, building libraries, setting up SSR applications, or migrating to Vite 8.
- Fast dev server with native ESM and Hot Module Replacement (HMR)
- Production builds with Rolldown bundler and Oxc transformer (Vite 8+)
- Plugin API for extending build behavior and creating virtual modules
- SSR support with middleware mode and ssrLoadModule
- Asset handling with query strings (?raw, ?url) and import.meta.glob
- Multi-environment support via Environment API (Vite 6+)
How to install vite
npx skills add https://github.com/antfu/skills --skill vite- Node.js (version compatible with Vite 8.3.1+)
- Basic understanding of ES modules and build configuration
How to use vite
- 1.Create or open vite.config.ts in your project root
- 2.Import defineConfig from 'vite' and export your configuration
- 3.Add plugins array and configure resolve, server, and build options as needed
- 4.Run 'vite' to start the dev server with HMR
- 5.Run 'vite build' for production builds or 'vite build --ssr' for SSR builds
- 6.Use 'vite preview' to test the production build locally
Use cases
- Setting up and configuring vite.config.ts for new or existing projects
- Building optimized production bundles for web applications
- Creating reusable libraries with Vite's library mode
- Implementing server-side rendering (SSR) with Vite middleware
- Developing custom Vite plugins for project-specific build requirements
- Frontend developers building modern web applications
- Library authors packaging reusable components or utilities
- Full-stack developers implementing SSR applications
- Build tool maintainers creating Vite plugins
- Teams migrating from Webpack, Rollup, or older Vite versions
vite FAQ
Vite 8 replaces esbuild + Rollup with Rolldown as the bundler and uses Oxc for transformation, providing faster builds and better compatibility. Config migration may be needed for some projects.
Use loadEnv() in vite.config.ts to load .env files, and access them via import.meta.env in your code. Vite automatically exposes VITE_* prefixed variables.
Yes, Vite supports library mode via the build.lib option in vite.config.ts, allowing you to build reusable packages with optimized output formats.
Configure build.ssr in vite.config.ts, use ssrLoadModule for dynamic imports, and optionally use Vite's middleware mode for development server integration.
Vite provides @vitejs/plugin-vue, @vitejs/plugin-react, @vitejs/plugin-react-swc, @vitejs/plugin-vue-jsx, and @vitejs/plugin-legacy for common frameworks and 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.9.25" source: Generated from https://github.com/vitejs/vite, scripts at https://github.com/antfu/skills
Vite
Based on Vite v8.3.1 (Rolldown-powered), generated at 2026-09-25. 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.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.
vitepress
Static site generator powered by Vite and Vue for fast documentation sites with Markdown and components.
vitest
Jest-compatible unit testing framework powered by Vite with native ESM, TypeScript, and JSX support.
vue
Vue 3 Composition API with script setup, reactivity, and built-in components for SFCs.
vue-router-best-practices
Vue Router 4 patterns, navigation guards, and lifecycle best practices for robust single-page applications.
vue-testing-best-practices
Vue.js testing patterns, setup, and solutions for Vitest, Vue Test Utils, and Playwright.
vueuse-functions
Apply VueUse composables to build concise, maintainable Vue.js and Nuxt features.