vite
Next-generation frontend build tool with native ESM dev server, HMR, and Rolldown-powered production builds.
- Fast dev server using native ES modules and hot module replacement; production builds optimized with Rolldown bundler and Oxc transformer
- Configuration via
vite.config.tswith support for conditional configs, environment variables, and plugin API for extending build behavior - Built-in features include
import.meta.globfor dynamic imports, asset queries (?raw,?url), and HMR API for custom refresh logic - Library mode and SSR support with
ssrLoadModuleand JavaScript API for programmatic builds - Vite 8 introduces multi-environment API for custom runtimes and migration path from traditional bundlers
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 |
More from antfu/skills
vue
Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.
21.9Kvitest
Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
18.1Kvue-best-practices
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
16.0Knuxt
Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.
14.9Kvueuse-functions
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
14.7Kweb-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
12.9K