How to read this site

Reading conventions at a glance

The main line of this guide is Vite 8. Vite 7 differences never bleed into the body — they're folded into <V7Note> blocks. If you're still on Vite 7 (or migrating), expand them; if you started on Vite 8, you can skip them entirely.

Callout blocks

Note (blue)

Tip (orange)

Warning (yellow)

Danger (red)

<V7Note> — Vite 7 diff block

The site's most important convention. Click the header below to expand:

Rules:

• Where Vite 8 and Vite 7 behave the same → no <V7Note>
• Where they differ → the entire diff goes inside <V7Note>; the body covers Vite 8 only
• Vite 6 and earlier → not covered on this site

Difficulty rating

Each article's meta line carries a difficulty bar:

Code-block conventions

Filename label

// The filename tag in the corner tells you which file this snippet belongs to
import { defineConfig } from "vite"
export default defineConfig({})

Line highlight

import { defineConfig } from "vite"
export default defineConfig({
  base: "/app/", // ← these three lines are highlighted
  build: {
    outDir: "output", // ← focus area
  },
})

Diff markers

export default defineConfig({
  build: {
    outDir: "dist", 
    outDir: "output", 
  },
})

Focus markers

Pull attention to the key lines — everything else fades. Hover to restore visibility.

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"

export default defineConfig({
  plugins: [react()],
})

Interactive components

A few components on this site are built specifically to visualize Vite internals — touch them when you see them:

HookExplorer — click a hook name to see when it fires, its signature, an example, and its Rolldown compatibility:

V7Note — demoed above.

BundlerCompare — Vite 7 dual engine vs Vite 8 Rolldown architecture, hover to trace the data flow.

Recommended Reading Order

This guide is not an API dictionary. It is closer to an engineering learning path:

1. Parts 0-1: build the mental model for entries, CLI workflow, environment variables, the module graph, and source features.
2. Parts 2-4: understand Rolldown, the plugin system, and hook timing. These are the foundation for all hands-on work later.
3. Parts 5-8: connect the Environment API, HMR, the build pipeline, and SSR.
4. Parts 9-13: finish with frameworks, library mode, monorepos, performance, and real plugin source walkthroughs.

If your goal is to debug projects, read Parts 0, 1, 7, and 12 first. If your goal is to write plugins, Parts 3, 4, 6, and 13 are the spine. If your goal is framework or SSR work, Parts 5, 8, and 9 matter most.

How To Read Each Lesson

Do not only copy code. Read each lesson in this order:

1. Check apiStability in frontmatter: stable, RC, or experimental.
2. Read "What you'll learn" to identify whether the lesson solves a concept, config, or hands-on problem.
3. When reading code blocks, check the filename first, then decide whether the code runs in dev, build, SSR, or plugin runtime.
4. Expand <V7Note> only if you maintain Vite 7 projects or are migrating.
5. Finish with the self-check questions; move on only when you can explain the answers out loud.

This is slower than scrolling top to bottom, but it prevents treating experimental APIs as stable config and prevents historical architecture from leaking into the current Vite 8 mental model.

Self-check

The "Self-check" at the end of every section has two parts:

1. Concept questions (3–5): explain core concepts in your own words
2. Coding question (1): write or modify code to confirm understanding

When you're stuck, don't read the answer first — run it in a side-project and the moment of clarity usually arrives there.

That's the conventions. From the next section, we head into the real material.