Agent skill

vite

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.

Stars 4,427
Forks 225

Install this agent skill to your Project

npx add-skill https://github.com/antfu/skills/tree/main/skills/vite

Metadata

Additional technical details for this skill

author
Anthony Fu
source
Generated from https://github.com/vitejs/vite, scripts at https://github.com/antfu/skills
version
2026.1.31

SKILL.md

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

bash
vite              # Start dev server
vite build        # Production build
vite preview      # Preview production build
vite build --ssr  # SSR build

Common Config

ts
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

Expand your agent's capabilities with these related and highly-rated skills.

antfu/skills

pnpm

Node.js package manager with strict dependency resolution. Use when running pnpm specific commands, configuring workspaces, or managing dependencies with catalogs, patches, or overrides.

4,427 225
Explore
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.

4,427 225
Explore
antfu/skills

slidev

Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.

4,427 225
Explore
antfu/skills

vitest

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.

4,427 225
Explore
antfu/skills

vue-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.

4,427 225
Explore
antfu/skills

vue-router-best-practices

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

4,427 225
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results