Generated banner for Vite
Generated logo for Vite

Vite

Anthony FuCommunityCreated by Anthony Fu

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found

From the author

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.
— the description by Anthony Fu

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides comprehensive reference material for Vite 8, a frontend build tool that utilizes the Rolldown bundler and Oxc transformer. It covers core configuration patterns, the plugin API, library mode, and SSR primitives. It also includes specific guidance for migrating to Vite 8, managing multi-environment setups, and utilizing the JavaScript API for programmatic control over build and development processes.

What it does

  • Provides patterns for vite.config.ts including conditional and asynchronous configurations.
  • Explains the Rolldown migration process for Vite 8 projects.
  • Details the Vite plugin API for creating custom hooks and virtual modules.
  • Offers guidance on library mode, SSR middleware, and multi-page application setups.
  • Documents the JavaScript API for programmatic server creation and build execution.
  • Lists official plugins for framework support including Vue and React.

When to use it

  • When configuring a new or existing Vite 8 project.
  • When migrating a project from previous Vite versions to Vite 8.
  • When building libraries or SSR applications using Vite primitives.
  • When developing custom Vite plugins or integrating multi-environment support.
  • When needing to programmatically control the Vite build or dev server via the JavaScript API.

Advantages

  • Centralized reference for Vite 8 specific changes like Rolldown and Oxc.
  • Clear examples for complex configurations like proxying and environment variables.
  • Provides structured guidance for library distribution and multi-page entry points.
  • Includes TypeScript intellisense patterns for configuration files.

Usage examples

“How do I configure a proxy in my vite.config.ts?”
The skill provides a code snippet showing the server.proxy configuration object with target, changeOrigin, and path rewrite options.
“Show me how to set up a library build in Vite 8.”
The skill provides a configuration example using the build.lib option, including entry points and rolldownOptions for external dependencies.
“How do I access environment variables inside my Vite config?”
The skill demonstrates using the loadEnv function within a defineConfig function to access variables from .env files during configuration resolution.
“What is the new way to define entry points in Vite 8?”
The skill explains the top-level input option which replaces previous entry point configurations for build, SSR, and dependency optimization.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/antfu/vite/download
  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip vite.zip -d .agents/skills

Documentation by Anthony Fu

Vite

Based on Vite v8.3.5 (Rolldown-powered), generated at 2026-11-05. 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

TopicDescriptionReference
Configurationvite.config.ts, defineConfig, conditional configs, loadEnvcore-config
Featuresimport.meta.glob, asset queries (?raw, ?url), import.meta.env, HMR APIcore-features
Plugin APIVite-specific hooks, virtual modules, plugin orderingcore-plugin-api

Build & SSR

TopicDescriptionReference
Build & SSRLibrary mode, SSR middleware mode, ssrLoadModule, JavaScript APIbuild-and-ssr

Advanced

TopicDescriptionReference
Environment APIVite 6+ multi-environment support, custom runtimesenvironment-api
Rolldown MigrationVite 8 changes: Rolldown bundler, Oxc transformer, config migrationrolldown-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

Files

references/rolldown-migration.md


name: vite-rolldown description: Vite 8 Rolldown bundler and Oxc transformer migration

Rolldown Migration (Vite 8)

Vite 8 replaces esbuild + Rollup with Rolldown (Rust bundler) and Oxc (Rust transformer/minifier).

What Changed

Before (Vite 7)After (Vite 8)
esbuild (dev/JS transform)Oxc Transformer
esbuild (dep pre-bundling)Rolldown
esbuild (CSS minify)Lightning CSS (default)
Rollup (production build)Rolldown
build.rollupOptionsbuild.rolldownOptions
worker.rollupOptionsworker.rolldownOptions
optimizeDeps.esbuildOptionsoptimizeDeps.rolldownOptions
esbuild optionoxc option

Backward Compatibility (Auto-Conversion)

Old options are deprecated but still work — Vite converts them internally:

  • esbuild → oxc

  • build.rollupOptions → build.rolldownOptions (alias)

  • optimizeDeps.esbuildOptions → optimizeDeps.rolldownOptions

Migrate to the new names; the compat shims will be removed in a future major. Read the converted values from the configResolved hook (config.oxc, config.optimizeDeps.rolldownOptions).

Default Browser Target Change

build.target / 'baseline-widely-available' moved to newer versions (Baseline Widely Available as of 2026-01-01):

  • Chrome 107 → 111, Edge 107 → 111, Firefox 104 → 114, Safari 16.0 → 16.4

  • Resolves to ['chrome111', 'edge111', 'firefox114', 'safari16.4', 'ios16.4']

  • Default --minify is now oxc (was esbuild)

Config Migration

rollupOptions → rolldownOptions
export default defineConfig({
  build: {
    rolldownOptions: {  // was rollupOptions
      external: ['vue'],
      output: { globals: { vue: 'Vue' } },
    },
  },
})

Prefer the top-level input option over build.rolldownOptions.input — it applies in dev too.

esbuild → oxc
export default defineConfig({
  oxc: {  // was esbuild
    jsx: {
      runtime: 'classic',
      pragma: 'h',
      pragmaFrag: 'Fragment',
    },
  },
})

esbuild.jsxFactory→oxc.jsx.pragma, jsxFragment→oxc.jsx.pragmaFrag, jsx: 'transform'→oxc.jsx: { runtime: 'classic' }, jsx: 'automatic'→{ runtime: 'automatic' }. esbuild.banner/footer have no equivalent — use a custom plugin transform hook.

JSX Configuration
export default defineConfig({
  oxc: {
    jsx: {
      runtime: 'automatic',  // or 'classic'
      importSource: 'react', // for automatic runtime
    },
    jsxInject: `import React from 'react'`,  // auto-inject
  },
})
Custom Transform Targets
export default defineConfig({
  oxc: {
    include: ['**/*.ts', '**/*.tsx'],
    exclude: ['node_modules/**'],
  },
})

Notable Breaking Changes

  • build() throws BundleError (JS API): typed Error & { errors?: RolldownError[] }. Access individual errors via e.errors.

  • build.rollupOptions.output.manualChunks: object form removed, function form deprecated. Use Rolldown's codeSplitting.

  • build.rollupOptions.watch.chokidar removed → build.rolldownOptions.watch.watcher.

  • resolve.alias[].customResolver deprecated → use a custom plugin with a resolveId hook and enforce: 'pre'.

  • build.commonjsOptions is now a no-op.

  • require calls for externalized modules are preserved as require. To convert to import, use the re-exported esmExternalRequirePlugin.

  • import.meta.hot.accept(url) no longer accepts a URL — pass an id.

  • Unsupported by Rolldown: output format 'system'/'amd', shouldTransformCachedModule, resolveImportMeta, renderDynamicImport, resolveFileUrl hooks.

  • Native decorator lowering is not yet supported by Oxc — use @rolldown/plugin-babel or @rollup/plugin-swc as a workaround.

Detecting Rolldown-powered Vite

buildStart() {
  // only defined on Vite 8+ (Rolldown)
  if (this.meta.rolldownVersion) { /* ... */ }
}

Also exported from vite: version, rolldownVersion (esbuildVersion/rollupVersion kept only for back-compat).

Plugin Compatibility

Most Vite plugins work unchanged — Rolldown supports Rollup's plugin API. Rolldown runs all parallel Rollup hooks sequentially. If a plugin only works during build:

{
  ...rollupPlugin(),
  enforce: 'post',
  apply: 'build',
}

New Capabilities

  • Full bundle mode (experimental, vite --experimentalBundle)

  • Chunk import map optimization (build.chunkImportMap)

  • More flexible chunk splitting / Module Federation support

Gradual Migration

rolldown-vite is Vite 7 running on Rolldown without other Vite 8 changes — an intermediate step:

# Step 1: swap vite for rolldown-vite on Vite 7 (npm alias in package.json)
#   "vite": "npm:rolldown-vite@^7"
# Step 2: undo the alias and upgrade to Vite 8
pnpm add -D vite@8

If migrating from rolldown-vite, only the "NRV"-badged sections of the official migration guide apply.

Overriding Vite in Frameworks

When a framework depends on older Vite:

{
  "pnpm": {
    "overrides": {
      "vite": "8.0.0"
    }
  }
}

<!-- Source references: - https://vite.dev/guide/migration - https://vite.dev/blog/announcing-vite8 - https://vite.dev/config/shared-options#oxc -->

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Anthony Fu
Publisher
Anthony Fu (Community)
Source
antfu/skills · skills/vite · commit f63e9ec
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE.md)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Anthony Fu.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download vite.zip