vite · Vite Docs
Plugin API | Vite (main branch)
Explains how to extend Vite functionality by creating custom plugins using the Rollup plugin interface and Vite-specific hooks.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Plugin API | Vite (main branch)
Explains how to extend Vite functionality by creating custom plugins using the Rollup plugin interface and Vite-specific hooks.
When To Use
Use when you need to implement custom build logic, transform files during development, or integrate third-party tools into the Vite build pipeline.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/main-vite-plugin-api-branch-workflow-guide.md | A guide detailing how to author Vite plugins, including conventions, configuration options, and simple examples. | Questions about a guide detailing how to author Vite plugins, including conventions, configuration options, and simple examples. |
examples/main-vite-plugin-api-branch-vite-plugin-api-javascript-usage.text | A JavaScript code example demonstrating how to import and use a custom plugin within the Vite configuration object. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to import and use a custom plugin within the Vite configuration object. |
examples/main-vite-plugin-api-branch-vite-plugin-api-framework.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/main-vite-plugin-api-branch-vite-plugin-api-defineconfig.text | A JavaScript code example demonstrating the use of defineConfig to register a plugin within the Vite configuration. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating the use of defineConfig to register a plugin within the Vite configuration. |
examples/main-vite-plugin-api-branch-vite-plugin-api-transform-hook.text | A JavaScript code example demonstrating the implementation of the transform hook within a Vite plugin using a file extension filter. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating the implementation of the transform hook within a Vite plugin using a file ex... |
examples/main-vite-plugin-api-branch-vite-plugin-api-javascript.text | A JavaScript code example demonstrating how to implement a custom Vite plugin using resolveId and load hooks. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to implement a custom Vite plugin using resolveId and load hooks. |
examples/main-vite-plugin-api-branch-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/main-vite-plugin-api-branch-vite-plugin-api-config-mutation-examples.text | JavaScript 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 JavaScript code examples demonstrating how to return partial configurations and mutate the configuration object direc... |
examples/main-vite-plugin-api-branch-vite-plugin-api-javascript-2.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/main-vite-plugin-api-branch-vite-plugin-api-configure-server.text | A JavaScript code example demonstrating how to implement 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 implement the configureServer hook within a Vite plugin to add custom... |
examples/main-vite-plugin-api-branch-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/main-vite-plugin-api-branch-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/main-vite-plugin-api-branch-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/main-vite-plugin-api-branch-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/main-vite-plugin-api-branch-vite-plugin-api-index-html-transform-hook-ty.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/main-vite-plugin-api-branch-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/main-vite-plugin-api-branch-vite-plugin-api-handlehotupdate.text | A JavaScript code example demonstrating the implementation of the handleHotUpdate plugin hook to manually invalidate modules and trigger a full reload. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating the implementation of the handleHotUpdate plugin hook to manually invalidate... |
examples/main-vite-plugin-api-branch-vite-plugin-api-handlehotupdate-2.text | A text example demonstrating the implementation of the handleHotUpdate hook within the Vite plugin API. | Exact payloads, commands, or snippets shown in A text example demonstrating the implementation of the handleHotUpdate hook within the Vite plugin API. |
examples/main-vite-plugin-api-branch-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/main-vite-plugin-api-branch-vite-plugin-api-version-check.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/main-vite-plugin-api-branch-vite-plugin-api-metadata.text | A TypeScript implementation of a Vite plugin that logs output metadata including imported CSS and assets during the generateBundle hook. | 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 g... |
examples/main-vite-plugin-api-branch-vite-plugin-api-javascript-3.text | A JavaScript code example demonstrating the implementation of a basic Vite plugin using the plugin API. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating the implementation of a basic Vite plugin using the plugin API. |
examples/main-vite-plugin-api-branch-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/main-vite-plugin-api-branch-vite-plugin-api-config.text | A configuration example demonstrating how to use a plugin within the Vite defineConfig function. | Exact payloads, commands, or snippets shown in A configuration example demonstrating how to use a plugin within the Vite defineConfig function. |
examples/main-vite-plugin-api-branch-vite-plugin-api-normalizepath-usage.text | A text demonstration of the normalizePath utility function from the Vite plugin API. | Exact payloads, commands, or snippets shown in A text demonstration of the normalizePath utility function from the Vite plugin API. |
examples/main-vite-plugin-api-branch-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 regex filtering. | 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/main-vite-plugin-api-branch-vite-plugin-api-configure-server-websocket.text | A JavaScript code example demonstrating how to use the configureServer hook to intercept and send custom WebSocket messages in a Vite plugin. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use the configureServer hook to intercept and send custom WebSocket me... |
examples/main-vite-plugin-api-branch-vite-plugin-api-hmr-client-side.text | A text example demonstrating how to use the Vite plugin API to handle custom HMR events on the client side. | Exact payloads, commands, or snippets shown in A text example demonstrating how to use the Vite plugin API to handle custom HMR events on the client side. |
examples/main-vite-plugin-api-branch-vite-plugin-api-client-side-hot-update.text | A text example demonstrating how to use import.meta.hot to send custom messages 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 to send custom messages from the client side within a Vite pl... |
examples/main-vite-plugin-api-branch-vite-plugin-api-configure-server-ws.text | A JavaScript code example demonstrating how to use the configureServer hook to listen for and respond to custom WebSocket messages in a Vite plugin. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use the configureServer hook to listen for and respond to custom WebSo... |
examples/main-vite-plugin-api-branch-vite-plugin-api-custom-event-types-declarati.text | A TypeScript declaration module extending the CustomEventMap interface for Vite custom events. | Exact payloads, commands, or snippets shown in A TypeScript declaration module extending the CustomEventMap interface for Vite custom events. |
examples/main-vite-plugin-api-branch-vite-plugin-api-custom-event-payload-types.text | A text snippet demonstrating how to use InferCustomEventPayload to type custom HMR events in a Vite plugin. | Exact payloads, commands, or snippets shown in A text snippet demonstrating how to use InferCustomEventPayload to type custom HMR events 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://main.vite.dev/guide/api-plugin