playbooks

home / skills / antfu / skills / vite

vite skill

/skills/vite

This skill helps you configure Vite, optimize builds, and harness fast updates with TypeScript support and a rich plugin ecosystem.

npx playbooks add skill antfu/skills --skill vite

Review the files below or copy the command above to add this skill to your agents.

Files (20)
SKILL.md
3.0 KB
---
name: vite
description: Vite next-generation frontend build tool with fast HMR and optimized builds. Use when configuring Vite, adding plugins, working with dev server, or building for production.
metadata:
  author: Anthony Fu
  version: "2026.1.28"
  source: Generated from https://github.com/vitejs/vite, scripts located at https://github.com/antfu/skills
---

Vite is a modern build tool for frontend development featuring instant server start with native ES modules, lightning-fast HMR, and optimized production builds using Rolldown/Rollup. It supports TypeScript, JSX, CSS pre-processors out of the box and has a rich plugin ecosystem.

> The skill is based on Vite 6.x, generated at 2026-01-28.

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Configuration | Config file setup, defineConfig, conditional and async configs | [core-config](references/core-config.md) |
| CLI Commands | Dev server, build, preview commands and options | [core-cli](references/core-cli.md) |
| Core Features | TypeScript, JSX, CSS, HTML processing, JSON handling | [core-features](references/core-features.md) |
| Using Plugins | Adding, configuring, and ordering plugins | [core-plugins](references/core-plugins.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| CSS Handling | CSS modules, pre-processors, PostCSS, Lightning CSS | [features-css](references/features-css.md) |
| Static Assets | Asset imports, public directory, URL handling | [features-assets](references/features-assets.md) |
| Glob Import | import.meta.glob, dynamic imports, batch loading | [features-glob-import](references/features-glob-import.md) |
| Environment Variables | .env files, modes, import.meta.env constants | [features-env](references/features-env.md) |
| HMR API | Hot Module Replacement client API | [features-hmr](references/features-hmr.md) |
| Web Workers | Worker imports and configuration | [features-workers](references/features-workers.md) |
| Dependency Pre-Bundling | optimizeDeps, caching, monorepo setup | [features-dep-bundling](references/features-dep-bundling.md) |

## Build

| Topic | Description | Reference |
|-------|-------------|-----------|
| Production Build | Build options, browser targets, multi-page apps | [build-production](references/build-production.md) |
| Library Mode | Building libraries with proper package exports | [build-library](references/build-library.md) |
| SSR | Server-side rendering setup and configuration | [build-ssr](references/build-ssr.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| JavaScript API | createServer, build, preview programmatic APIs | [advanced-api](references/advanced-api.md) |
| Plugin API | Creating Vite plugins, hooks, virtual modules | [advanced-plugin-api](references/advanced-plugin-api.md) |
| Performance | Optimization tips for dev server and builds | [advanced-performance](references/advanced-performance.md) |
| Backend Integration | Integrating Vite with traditional backends | [advanced-backend](references/advanced-backend.md) |

Overview

This skill provides practical guidance and reference for using Vite, the next-generation frontend build tool offering instant dev server start, lightning-fast HMR, and optimized production builds. It covers configuration, CLI usage, core features, plugin usage, and advanced topics like SSR and programmatic APIs. The material is based on Vite 6.x and focuses on real-world setup and optimizations for modern web projects.

How this skill works

The skill inspects common Vite workflows: defining and loading configs, running the dev server and build CLI, and integrating plugins and preprocessors. It explains how Vite handles assets, CSS, TypeScript, environment variables, HMR, dependency pre-bundling, and advanced build modes such as library and SSR. It also surfaces performance and integration tips for monorepos and backend-driven apps.

When to use it

  • Setting up a new frontend project with fast HMR and native ESM dev server.
  • Configuring complex or conditional vite.config.ts files (multi-mode, async config).
  • Adding or authoring Vite plugins and managing plugin order/hook behavior.
  • Optimizing dev and production builds (optimizeDeps, caching, browser targets).
  • Implementing SSR, library bundles, or programmatic build/server workflows.

Best practices

  • Use defineConfig and split environment-specific settings into modes for clarity.
  • Pre-bundle problematic deps with optimizeDeps and pin versions for monorepos.
  • Keep plugin order intentional — resolve transforms before final asset processing.
  • Prefer Lightning CSS or PostCSS where performance matters; enable CSS code-splitting for large apps.
  • Use import.meta.env and .env files for environment separation; avoid exposing secrets client-side.

Example use cases

  • Create a TypeScript React app with fast HMR and JSX handling out of the box.
  • Add a third-party plugin to support custom file types and ensure proper ordering.
  • Configure multi-page builds or library mode with specific rollup options and exports.
  • Set up SSR with hydration and a separate server entry while sharing Vite build tooling.
  • Optimize a monorepo by tuning optimizeDeps, cache directories, and workspace aliases.

FAQ

When should I use optimizeDeps?

Enable optimizeDeps for deps that slow cold dev start or cause ESM issues; include specific packages and tune esbuild options for faster pre-bundling.

How do I debug HMR problems?

Check console and network for HMR messages, ensure plugins don’t replace module IDs, and verify no server-side caching or incorrect asset transforms are interfering.