vite · Vite Docs
Vite Vite Plugin API
Explains the Vite plugin system, including the lifecycle hooks, configuration options, and the architecture for extending the build process.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Vite Vite Plugin API
Explains the Vite plugin system, including the lifecycle hooks, configuration options, and the architecture for extending the build process.
When To Use
Use when you need to extend Vite's functionality, implement custom build transformations, or hook into the development server lifecycle via plugins.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/vite-plugin-api-workflow-guide.md | A guide detailing the Vite plugin API, including conventions, configuration, and plugin interface extensions. | Questions about a guide detailing the Vite plugin API, including conventions, configuration, and plugin interface extensions. |
examples/vite-plugin-api-javascript-configuration.text | A JavaScript code example demonstrating how to use the Vite plugin API within a configuration file. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use the Vite plugin API within a configuration file. |
examples/vite-plugin-api-framework-plugin.text | A JavaScript code example demonstrating how to implement a custom Vite plugin using the framework-plugin pattern. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to implement a custom Vite plugin using the framework-plugin pattern. |
examples/vite-plugin-api-configuration.text | A code example demonstrating how to define and use a custom Vite plugin within the defineConfig configuration object. | Exact payloads, commands, or snippets shown in A code example demonstrating how to define and use a custom Vite plugin within the defineConfig configuration object. |
examples/vite-plugin-api-transform-hook.text | A JavaScript code example demonstrating how to implement the transform hook within a Vite plugin using a file extension filter. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to implement the transform hook within a Vite plugin using a file extensi... |
examples/vite-plugin-api-virtual-module-implementation.text | A JavaScript implementation of a Vite plugin demonstrating how to use resolveId and load hooks to create a virtual module. | Exact payloads, commands, or snippets shown in A JavaScript implementation of a Vite plugin demonstrating how to use resolveId and load hooks to create a virtual mo... |
examples/vite-plugin-api-virtual-module.text | A text example demonstrating how to implement a virtual module within a Vite plugin. | Exact payloads, commands, or snippets shown in A text example demonstrating how to implement a virtual module within a Vite plugin. |
examples/vite-plugin-api-config-mutation-examples.text | Code examples demonstrating how to return partial configurations and mutate the configuration object directly within a Vite plugin. | Exact payloads, commands, or snippets shown in Code examples demonstrating how to return partial configurations and mutate the configuration object directly within... |
examples/vite-plugin-api-javascript-plugin-implementation.text | A JavaScript code example demonstrating how to implement a Vite plugin using hooks like configResolved and transform. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to implement a Vite plugin using hooks like configResolved and transform. |
examples/vite-plugin-api-configure-server.text | A JavaScript code example demonstrating how to use the configureServer hook in a Vite plugin to add custom middleware. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use the configureServer hook in a Vite plugin to add custom middleware. |
examples/vite-plugin-api-configure-server-2.text | A JavaScript code example demonstrating how to use the configureServer hook within a Vite plugin to add custom middleware. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use the configureServer hook within a Vite plugin to add custom middle... |
examples/vite-plugin-api-configure-server-3.text | A JavaScript code example demonstrating how to use the configureServer hook within a Vite plugin to access the development server instance. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use the configureServer hook within a Vite plugin to access the develo... |
examples/vite-plugin-api-configure-preview-server.text | A JavaScript code example demonstrating how to use the configurePreviewServer hook within a Vite plugin to add custom middleware. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use the configurePreviewServer hook within a Vite plugin to add custom... |
examples/vite-plugin-api-transform-index-html.text | A JavaScript code example demonstrating how to implement the transformIndexHtml hook within a Vite plugin. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to implement the transformIndexHtml hook within a Vite plugin. |
examples/vite-plugin-api-index-html-transform-hook-typescript-definition.text | TypeScript type definitions for the IndexHtmlTransformHook and IndexHtmlTransformResult interfaces within the Vite plugin API. | Exact payloads, commands, or snippets shown in TypeScript type definitions for the IndexHtmlTransformHook and IndexHtmlTransformResult interfaces within the Vite pl... |
examples/vite-plugin-api-hmr-context-interface.text | The HmrContext interface definition from the Vite Plugin API documentation. | Exact payloads, commands, or snippets shown in The HmrContext interface definition from the Vite Plugin API documentation. |
examples/vite-plugin-api-handle-hot-update.text | A code example demonstrating how to use the handleHotUpdate hook in a Vite plugin to manually invalidate modules and trigger a full reload. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use the handleHotUpdate hook in a Vite plugin to manually invalidate modules and... |
examples/vite-plugin-api-handle-hot-update-2.text | A text example demonstrating the implementation of the handleHotUpdate hook within a Vite plugin to send custom WebSocket messages. | Exact payloads, commands, or snippets shown in A text example demonstrating the implementation of the handleHotUpdate hook within a Vite plugin to send custom WebSo... |
examples/vite-plugin-api-hmr-custom-update.text | A text example demonstrating how to use the import.meta.hot API to listen for custom update events within a Vite plugin. | Exact payloads, commands, or snippets shown in A text example demonstrating how to use the import.meta.hot API to listen for custom update events within a Vite plugin. |
examples/vite-plugin-api-version-check-plugin.text | A TypeScript code example demonstrating how to implement a Vite plugin that checks for the presence of Rolldown via the buildStart hook. | Exact payloads, commands, or snippets shown in A TypeScript code example demonstrating how to implement a Vite plugin that checks for the presence of Rolldown via t... |
examples/vite-plugin-api-metadata-plugin.text | A TypeScript implementation of a Vite plugin that logs output metadata including imported CSS and assets during the bundle generation phase. | Exact payloads, commands, or snippets shown in A TypeScript implementation of a Vite plugin that logs output metadata including imported CSS and assets during the b... |
examples/vite-plugin-api-javascript-plugin-structure.text | A JavaScript code example demonstrating the basic structure and configuration options of a Vite plugin. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating the basic structure and configuration options of a Vite plugin. |
examples/vite-plugin-api-apply-hook.text | A text example demonstrating the implementation of the apply hook within a Vite plugin to conditionally execute logic during the build command. | Exact payloads, commands, or snippets shown in A text example demonstrating the implementation of the apply hook within a Vite plugin to conditionally execute logic... |
examples/vite-plugin-api-defineconfig-plugin-usage.text | A JavaScript code example demonstrating how to include a plugin within the vite defineConfig function using the enforce and apply options. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to include a plugin within the vite defineConfig function using the enfor... |
examples/vite-plugin-api-normalizepath-usage.text | A text example demonstrating how to use the normalizePath utility from the Vite API to convert Windows-style paths to POSIX-style paths. | Exact payloads, commands, or snippets shown in A text example demonstrating how to use the normalizePath utility from the Vite API to convert Windows-style paths to... |
examples/vite-plugin-api-transform-hook-2.text | A JavaScript code example demonstrating how to implement the transform hook within a Vite plugin to modify file content using a regex filter. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to implement the transform hook within a Vite plugin to modify file conte... |
examples/vite-plugin-api-configure-server-ws.text | A code example demonstrating how to use the configureServer hook in a Vite plugin to handle WebSocket connections and send custom messages. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use the configureServer hook in a Vite plugin to handle WebSocket connections and... |
examples/vite-plugin-api-hmr-client-side.text | A text example demonstrating how to use the import.meta.hot API for client-side HMR event handling in a Vite plugin. | Exact payloads, commands, or snippets shown in A text example demonstrating how to use the import.meta.hot API for client-side HMR event handling in a Vite plugin. |
examples/vite-plugin-api-hmr-client-side-communication.text | A text example demonstrating how to use import.meta.hot.send to communicate from the client side within a Vite plugin context. | Exact payloads, commands, or snippets shown in A text example demonstrating how to use import.meta.hot.send to communicate from the client side within a Vite plugin... |
examples/vite-plugin-api-configure-server-ws-2.text | A JavaScript code example demonstrating how to use the configureServer hook in a Vite plugin to handle custom WebSocket messages. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use the configureServer hook in a Vite plugin to handle custom WebSock... |
examples/vite-plugin-api-custom-event-types-declaration.text | A TypeScript declaration module extending the CustomEventMap interface for custom Vite plugin events. | Exact payloads, commands, or snippets shown in A TypeScript declaration module extending the CustomEventMap interface for custom Vite plugin events. |
examples/vite-plugin-api-custom-event-payload-types.text | TypeScript code demonstrating how to use InferCustomEventPayload to type custom HMR event payloads in a Vite plugin. | Exact payloads, commands, or snippets shown in TypeScript code demonstrating how to use InferCustomEventPayload to type custom HMR event payloads in a Vite plugin. |
What This Skill Covers
- Are you an LLM? You can read better optimized documentation at /guide/api-plugin.md for this page in Markdown format
- Main sections:
Authoring a Plugin ,Conventions ,Plugins Config ,Simple Examples ,Transforming Custom File Types .
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://vite.dev/guide/api-plugin