Plugins

• Framework-agnostic Plugins

  • vite-plugin-watch-and-run - Watch some files (glob) and trigger a command. To enable any tool to have a watch mode.
  • vite-plugin-mock-data - Provides a simple way to mock data.
  • vite-plugin-reverse-proxy - Sometimes we have to redirect scripts on production environment to debug and solve problems, the plugin will transform the script to be served with the `text/javascript` MIME type to `module` MIME type.
  • vite-plugin-abbrlink - Add the abbrlink attribute to the `markdown` file in the specified directory.
  • vite-plugin-valibot-env - Validate environment variables against a Valibot schema.
  • @mistjs/vite-plugin-px2viewport - A plugin that automatically converts inline styles and style files from px units to vw units.
  • vite-plugin-windicss - Windi CSS integration.
  • vite-plugin-node - Integration with Node.js backend servers.
  • vite-plugin-cesium - Integration with Cesium library.
  • vite-plugin-linter - Extensible linter framework that shows the linting output in the Vite output and the browser console, includes ESLint & TypeScript ootb.
  • vite-plugin-checker - Fast run checkers (TypeScript/VLS/vue-tsc, etc.) in worker threads with overlay and terminal hint.
  • vite-plugin-tauri - Integrate Tauri in a Vite project to build cross-platform apps.
  • vite-plugin-federation - Support Module Federation, Inspired by Webpack Module Federation feature.
  • vite-plugin-wasm-pack - Integration with rust [wasm-pack](https://github.com/rustwasm/wasm-pack), the simple way.
  • vite-plugin-comlink - Use WebWorkers with the power of [Comlink](https://github.com/GoogleChromeLabs/comlink) to make them enjoyable.
  • vite-plugin-sass-dts - This is a plugin that automatically creates a type file when using the CSS module type-safely.
  • vite-plugin-ali-oss - Upload the production files bundled in the project to Ali OSS, except for HTML.
  • vite-plugin-webfont-dl - Downloads and injects webfonts (Google Fonts) to improve website's performance.
  • vite-plugin-babel - Babel integration for both build and server to support f.ex. decorators or class fields in pure JS/JSX files.
  • vite-plugin-electron - Integrate Vite and Electron.
  • vite-plugin-optimizer - Manually Pre-Bundling.
  • vite-plugin-babel-compiler - The plugin works with Babel compiler.
  • vite-plugin-commonjs - A pure JavaScript implementation for CommonJs.
  • vite-plugin-mpa-plus - More flexible MPA (multi-page application) supports html templates, path rewriting.
  • vite-plugin-multi-pages - Multi Pages Support，can build src/pages anyPage，can set prefixName.
  • vite-plugin-html-template-mpa - Multi Pages Common template support.
  • vite-plugin-vconsole-mpa - Multi Pages Vconsole supports，simple config.
  • vite-plugin-browser-sync - BrowserSync.
  • vite-plugin-jspm - Resolves dependencies independently from CDN providers using import maps and es-module-shims.
  • vite-plugin-env-switch - Switch project env and restart Vite server without command line operation.
  • vite-plugin-virtual-mpa - Out-of-box MPA plugin, with html template engine and virtual files support, which generate multiple files using only one template.
  • vite-plugin-stylelint - Runs Stylelint synchronously/asynchronously.
  • Vite-plugin-graphiql - Integration for GraphiQL IDE.
  • vite-plugin-graphql-server - Bootstrap a local GraphQL server for testing and documentaion.
  • unplugin-fonts - Load font from Typekit, Google Fonts, Fontsource or your own custom one.
  • unplugin-config - Configuration file generator for web apps, allowing external customization of global variables without repackaging.
  • vite-plugin-svg-spritemap - Generates a SVG spritemap from multiple .svg files.
  • vite-plugin-dc - Integration with @dvgis/dc-sdk library.
  • @spiriit/vite-plugin-svg-spritemap - Pack your SVG files in one spritemap file and use them with `<svg>`/`<img>` and directly in your CSS.
  • vite-plugin-auto-mpa-html - A file directory-based automated multi-page build plugin that supports HTML templates using EJS.
  • vite-plugin-cloudflare-functions - Cloudflare pages function integration.
  • vite-plugin-dynamic-proxy - Automatically configure reverse proxies based on URL parameters.
  • unplugin-auto-export - Automates the maintenance of export statements in the index.ts file.
  • vite-plugin-legacy-swc - Legacy browser support with SWC.
  • vite-plugin-biome - Biome linter.
  • vite-plugin-oxlint - Oxlint linter.
  • @tomjs/vite-plugin-electron - Easily develop `Electron` applications.
  • @tomjs/vite-plugin-vscode - Easily use web frameworks to develop `VSCode Extension`'s `Webview`, and support `HMR` and `Debug`.
  • vite-plugin-px-rem-vw - Integrate PostCSS plugin pxTorem and pxTovw.
  • vite-plugin-mpg - Simple configuration of multi page applications.
  • vite-plugin-pagefind - Integrate `pagefind` search.
  • vite-plugin-radar - All in one analytics loader (with 7+ providers supported).
  • vite-plugin-glsl - Import shader file chunks.
  • vite-plugin-svgo - Load SVGs as plain string and transform with SVGO library.
  • vite-plugin-remark-rehype - Loads and transform markdown files using the unified ecosystem.
  • vite-plugin-php - Load and process PHP-entry files instead of default index.html.
  • vite-plugin-lqip - Generate low quality image placeholders (LQIP).
  • vite-plugin-ms-clarity - Inject the Microsoft Clarity script to `index.html`.
  • @cyco130/vite-plugin-mdx - Import MDX.
  • vite-awesome-svg-loader - Imports SVGs as source code, base64 and data URI. Preserves stroke width, replaces colors with currentColor. Optimizes SVGs with SVGO. Creates SVG sprites.
  • vite-plugin-dir2json - Convert the directory structure into json data containing supported file paths.
  • rollup-plugin-critical - Generate critical CSS.
  • vite-plugin-dts - Generate declaration files from `.ts` or `.vue` source files for lib.
  • vite-plugin-chunk-split - Automatically code splitting, support unbundle in production.
  • vite-plugin-static-copy - Copy files and folders.
  • vite-plugin-zip-file - Compress files or folders into zip.
  • vite-plugin-zip-pack - Pack distribution/build folder into a zip file.
  • vite-plugin-image-optimizer - Optimize (compress) your image assets using Sharp.js and SVGO at build time.
  • vite-plugin-no-bundle - Generate unbundled code for use with native ESM or other bundlers.
  • vite-plugin-css-injected-by-js - Takes the CSS and adds it to the page through the JS.
  • unplugin-zip-pack - Zip your dist with filter function support.
  • vite-plugin-singlefile - Inline all JavaScript and CSS resources directly into the final `dist/index.html` file.
  • vite-plugin-node-polyfills - Polyfill Node's Core Modules for browser environments.
  • vite-plugin-cdn2 - Replace module with CDN.
  • vite-plugin-bundle-prefetch - Inject prefetch assets into `index.html`.
  • vite-plugin-imagemin - Optimize and compress your image assets and optionally create WebP/AVIF.
  • vite-plugin-lib-types - Generate DTS file while building library.
  • vite-plugin-minipic - Efficient image compression tool.
  • vite-plugin-robots - Generating `robots.txt`.
  • vite-plugin-ts-nameof - Ability to resolve [nameof](https://github.com/dsherret/ts-nameof) in TypeScript.
  • vite-plugin-handlebars - Process HTML files with Handlebars.
  • vite-plugin-require - A Vite plugin that supports `require` by code transforming.
  • vite-plugin-shared-modules - Share node_modules in monorepos.
  • vite-plugin-pug-transformer - Pug template engine support.
  • @import-meta-env/unplugin - Inject environment variables into the `import.meta.env` object after building the application instead of statically replacing it during production.
  • @modyfi/vite-plugin-yaml - Transform YAML files to ESM with schema validation and error reporting.
  • vite-plugin-html-inject - Split the `index.html` into smaller reusable pieces.
  • unplugin-inject-preload - Inject `<link rel="preload">` to your `index.html` based on your build assets.
  • @vituum/vite-plugin-handlebars - Handlebars template engine support, transforms `.hbs` templates to `.html`.
  • @vituum/vite-plugin-pug - Pug template engine support, transforms `.pug` templates to `.html`.
  • @vituum/vite-plugin-nunjucks - Nunjucks template engine support, transforms `.njk` templates to `.html`.
  • @vituum/vite-plugin-liquid - Liquid template engine support, transforms `.liquid` templates to `.html`.
  • @vituum/vite-plugin-twig - Twig template engine support, transforms `.twig` templates to `.html`.
  • @vituum/vite-plugin-latte - Latte template engine support, transforms `.latte` templates to `.html`.
  • @vituum/vite-plugin-posthtml - PostHTML support, transforms syntax to `.html`.
  • @vituum/vite-plugin-juice - Juice support, transforms `.css` to inline styles in `.html`.
  • vite-plugin-version-mark - Automatically use `package version` / `git commit` / `custom` to be inserted into your project as a unique identifier for the project version.
  • vite-plugin-css-export - Export variables from CSS to JavaScript, and support nested rules.
  • vite-plugin-optimize-css-modules - Generate the smallest possible CSS-Classes when CSS-Modules are used.
  • vite-plugin-generate-html - Define separate output files for JavaScript and CSS bundles.
  • vite-plugin-html-injection - Inject HTML, JavaScript and CSS code snippets into the `index.html`.
  • vite-plugin-typescript-transform - Applies the TypeScript compiler during Vite's transform build phase.
  • vite-plugin-public-typescript - Inject TypeScript into `index.html`.
  • unplugin-generate-component-name - Automatically generate component's name.
  • @laynezh/vite-plugin-lib-assets - Extracts resource files referenced in `library mode` instead of embedded them as base64.
  • css-media-splitter/vite-plugin - Extracts all `@media` At-rules into a dedicated `.css` files and download it only when matches the media query.
  • @tomjs/vite-plugin-html - Support compression, loading, CDN and others for `index.html`.
  • @tomjs/vite-plugin-iconify - Inject the global variable `IconifyProviders` into `index.html` for `iconify`, and support local area network and custom url.
  • vite-plugin-native - Supports Node/Electron C/C++ native addons.
  • vite-tsconfig-paths - Support for TypeScript's path mapping.
  • vite-aliases - Alias auto-generation based on project structure.
  • vite-plugin-mkcert - Provide certificates https dev server.
  • vite-plugin-vconsole - Help developers use vconsole to facilitate mobile development and debugging.
  • vite-plugin-mock-server - Mock server plugin, support using TS and JS to write Mock API and HMR.
  • vitawind - Install and Setting Tailwind CSS automatically.
  • vite-plugin-restart - Restart the Vite server on file changes.
  • vite-plugin-full-reload - Reload the browser on file changes.
  • vite-plugin-tips - Provide better development server status tips on the page.
  • vite-plugin-remove-console - A Vite plugin that deletes console.log in the production environment.
  • vite-plugin-dev-manifest - Generates `manifest.dev.json` during dev server, for backend integration with any language/framework.
  • vite-plugin-dynamic-base - Resolve all resource files dynamic publicPath.
  • vite-plugin-live-reload - Live reloading.
  • vite-plugin-simple-vconsole - A debug console view inside your app to make mobile debugging easier, for both SPA and MPA.
  • vite-plugin-qrcode - Show QR code on server start.
  • vite-plugin-cem - Generates `custom-elements.json` manifest for describing custom elements.
  • vite-plugin-web-update-notification - Detect webpage updates and notify user to reload. support Vite and umijs.
  • vite-plugin-browserslist-useragent - Compile browserslist query to a RegExp to test browser useragent.
  • vite-plugin-validate-env - Validate your environment variables at build time. Never forget an environment variable again.
  • vite-plugin-conditional-compile - Conditional compilation syntax based on environment variables.
  • vite-plugin-mock-dev-server - Mock server for development, support CJS/ESM/JSON, auto-importing file and HMR.
  • vite-plugin-shortcuts - Add additional customized shortcut key population.
  • vite-plugin-entry-shaking - Mimic tree-shaking behaviour when importing code from an entry file in development mode.
  • vite-plugin-auto-alias - Automatically generate alias based on path.
  • vite-plugin-image-placeholder - Generate placeholder images by path matches.
  • vite-plugin-find-image-duplicates - Find if there are duplicate images in your project when building it.
  • vite-plugin-vitepress-auto-sidebar - Automatically generates sidebar data by scanning directories, based on vitepress.
  • vite-plugin-global-const - Define constants for reuse of your code.
  • vite-plugin-cli-copy - Start the project and automatically copy the terminal's network URL.
  • vite-plugin-module-list - Automatically import the modules found in a specified folder.
  • unplugin-info - Export build information as a virutal module.
  • vite-plugin-auto-origin - Detect origin configuration automatically based on incoming requests to dev server.
  • vite-plugin-deadfile - Find unused source files in the project.
  • vite-bundle-analyzer - Utility that represents bundles as an interactive treemap.
  • vite-font-extractor-plugin - Utility that minification bundle fonts by glyphs.
  • vite-plugin-ngrok - Integration with Ngrok, allowing you to easily share your local development server.
  • vite-plugin-docker - Docker utility based on Dockerode.
  • vite-plugin-api-routes - Generate route mapping for API Routes services from the directory tree.
  • unplugin-detect-duplicated-deps - Detect duplicate packaged dependencies.
  • vite-plugin-vitepress-auto-nav - Automatically generates `sidebar` and `nav` configurations by scanning directories, based on VitePress.
  • vite-plugin-pretty-module-classnames - Adds the filename without the `-module` suffix to the class names of CSS modules.
  • vite-plugin-serve-static - Allows serving arbitrary static files not in the `public/` directory.
  • vite-plugin-vitest-cache - Optimize `Vitest` execution time through caching.
  • `vitest` - A Vite-native test framework.
  • vitest-mock-extended - Type safe mocking extensions for Vitest.
  • cypress-vite - Run Cypress specs using Vite.
  • vite-plugin-doctest - Documentation testing for Vitest.
  • vite-plugin-bundle-obfuscator - JavaScript obfuscator.
  • `@poyro/vitest` - Test LLM integrations using Vitest.
  • vite-plugin-csp-guard - Lets you configure a Content Security Policy to your project, supports all directives and hashing.
  • @yoichiro/vite-plugin-handlebars - Import of Handlebars templates `.hbs` as ES Modules.
  • vite-plugin-magic-preloader - Generate `<link rel="prefetch" />` or `<link rel="preload" />` tags through magic comments and inject them into `index.html`.
  • vite-preload - Preloads lazy loaded modules and stylesheets that were rendered by the server using 103 Early Hints, Link headers or link tags.
  • vite-plugin-dynamic-chunk - Split dependencies between entry and dynamic entry, and merge small chunks.
  • vite-plugin-envtype-patch - Generate `type` info for `import.meta.env`.
  • vite-multiple-assets - Add support for multiple public asset directories.
  • @yuanjianming/unplugin-image-convert - Image multi format conversion plugin based on sharp.js.
  • vite-plugin-eslint2 - Runs ESLint synchronously/asynchronously.
  • vite-plugin-static-filehash - It can help the program improve the cache hit rate.
  • vite-create-production-server-plugin - Spin up a production HTTP serve after build.
  • @yuanjianming/unplugin-compress-svga - Compress SVGA.
  • @yuanjianming/unplugin-font-spider - A webfont compression plugin.
  • vite-plugin-vanilla - Vanilla multi-page web development mode.
  • vite-plugin-year - Inserts the current year to the HTML file during build. Useful for adding a copyright year to the HTML file.
  • vite-plugin-replace-lodash - Replacing the import of `lodash` with `lodash-es` is more beneficial to tree-shaking.
  • vite-plugin-page-html - Multi-page generic template plugin, support `ejs` template syntax. Similar to `vue-cli` pages configuration.
  • vite-plugin-llms - Integration for the llms.txt specification supporting AI optimized content alongside application routes.
  • vite-plugin-singlefile-compression - Compress all assets and embeds them into `dist/index.html`, making it convenient to share as a single HTML file.
  • vite-plugin-material-symbols - Selective loading of Material Symbols font icons based on source code analysis.
  • `module-federation/vite` - Official Module Federation integration, enabling dynamic remote module loading.
  • @responsive-image/vite-plugin - Transform and generate optimized responsive images (WebP, AVIF) and LQIP placeholders for use with image components.
  • vite-plugin-dynamic-prefetch - Inject `<link rel="prefetch" />` tags into the HTML file for dynamic modules at runtime.
  • vite-plugin-csp - Content Security Policy (CSP) for SPA. Automatically calculates asset hashes (SRI), detects Google Fonts. Support `Bun` and `Node.js` runtimes.
  • vite-plugin-builder - Enable dual compilation for Server-Side Rendering (SSR) and Client-Side Rendering (CSR).
  • `@storybook/builder-vite` - Storybook builder.
  • @goodforyou/vite-plugin-markdown-import - Directly import Markdown files as a string, with support for front-matter attributes as an object.
  • genaicode/vite-plugin - A plugin that embeds an AI coding assistant into the app UI.
  • @builder.io/partytown - Relocate resource intensive third-party scripts off of the main thread and into a web worker.
  • unplugin-imagemin - High performance compressed Picture based on squoosh and sharp.
  • unplugin-auto-import - On-demand API auto-importing.
  • unplugin-icons - Access thousands of icons as components.
  • vite-imagetools - Load and transform images using url query parameters.
  • vite-compression-plugin - Use Node.js stream compress file to gzip or more.
  • vite-plugin-html - Plugin to minimize and use ejs template syntax in `index.html`.
  • vite-plugin-virtual-html - Make Vite MPA consistent with `@vue/cli`.
  • vite-plugin-api - Generate route mapping for API Routes services from the directory tree.
  • vite-plugin-dc - Integration with @dvgis/dc-sdk library.
  • remix-development-tools - Plugin for Remix.run development tools.
  • vite-plugin-turbo-console - Enhance the readability of `console.log()`.
  • vite-plugin-icons-spritesheet - Generate a spritesheet and TypeScript types from SVG icons by listening to the icons folder changes.
  • @froxz/vite-plugin-s3 - Allows you to upload files to S3.