English for Vite Plugin Development
Learn the English vocabulary for building Vite plugins: hooks, transform pipelines, dev vs. build mode, and the plugin ordering system.
Writing a Vite plugin means working with Rollup’s plugin interface plus Vite-specific hooks layered on top, and the vocabulary for describing where in that pipeline a bug lives matters a lot when asking for help or reviewing someone else’s plugin code. This guide covers the terms.
Key Vocabulary
Hook — a named function (resolveId, load, transform, configureServer) that Vite calls at a specific point in the build or dev pipeline, forming the core extension mechanism for plugins.
“The transform hook is where you’d rewrite the file’s source code — resolveId only decides which file to load, it doesn’t touch the contents.”
transform hook — the hook that receives a module’s source code and returns modified code, the most common place for plugins to inject or rewrite logic.
“Our SVG-to-component plugin does its actual work in the transform hook, converting raw SVG markup into a Vue component string.”
Dev vs. build mode — the two Vite operating modes a plugin can behave differently in, since dev mode serves modules on demand over native ESM while build mode bundles everything with Rollup.
“This plugin works in dev mode but breaks the production build — check whether the hook is conditioned on apply: 'serve' when it should run in both modes.”
Plugin ordering (enforce) — the enforce: 'pre' | 'post' option that controls whether a plugin’s hooks run before or after Vite’s core transforms, critical when plugins need to see raw or fully-transformed source.
“Set enforce: 'pre' on this plugin — it needs to see the original TypeScript source before Vite’s own transform strips the types.”
Virtual module — a module that doesn’t exist on disk but is generated by a plugin at request time, identified by a special resolved ID convention (often prefixed with \0).
“We’re exposing the generated route manifest as a virtual module, virtual:routes, so components can import it without a real file existing.”
HMR (Hot Module Replacement) API — the plugin-accessible API (configureServer, handleHotUpdate) for customizing how a plugin’s generated or transformed modules update during development without a full reload.
“Without a custom handleHotUpdate, editing the config file triggers a full page reload instead of just re-running our virtual module’s generator.”
Common Phrases
- “Which hook is this logic actually running in —
resolveId,load, ortransform?” - “Does this plugin need
enforce: 'pre'to see the source before other plugins transform it?” - “Is this a virtual module, or is it resolving to a real file on disk?”
- “Does this behave the same in dev and build mode, or is there a mode-specific branch we’re missing?”
- “Is the HMR update actually scoped to the changed module, or is it forcing a full reload?”
Example Sentences
Explaining a plugin bug in a PR:
“The transform wasn’t applying because our plugin ran after Vite’s built-in TypeScript handling had already compiled the file — adding enforce: 'pre' fixed the ordering.”
Reporting a dev/build discrepancy:
“This works fine with vite dev but produces broken output with vite build, which suggests the plugin’s load hook has a code path that only runs correctly under Rollup’s module graph.”
Discussing a virtual module design: “I’d rather expose this as a virtual module than write a generated file to disk — it avoids polluting the repo with build artifacts and keeps the source of truth in the plugin.”
Professional Tips
- Name the exact hook involved when reporting a plugin bug — “the plugin doesn’t work” gives a reviewer nothing to search for in the plugin’s source.
- Check
enforceordering before assuming a bug is in your transform logic — many “my regex isn’t matching” bugs are actually “another plugin already transformed the code by the time mine runs.” - Distinguish dev mode and build mode explicitly in bug reports, since Vite’s dev server and Rollup’s bundler take genuinely different code paths through a plugin.
- Use virtual module precisely — it refers to a specific resolution convention, not just “a module that’s dynamically generated” in a loose sense.
Practice Exercise
- Explain the difference between the
resolveIdandloadhooks in one sentence each. - Write a bug report describing a plugin that behaves differently in dev vs. build mode.
- Describe, in your own words, what a virtual module is and why a plugin might use one.