Awesome Vite.js
A curated list of awesome things related to Vite.js
Table of Contents
Use the "Table of Contents" menu on the top-right corner to explore the list.
Resources
Official Resources
Get Started
Templates
Vanilla
- vite-vanilla-ts-lib-starter - Starter for library (CJS, ESM, IIFE) with TypeScript, ESLint, Stylelint, Prettier, Jest, Husky + lint-staged.
- vite-tailwind-nojs-starter - NoJS Tailwind CSS starter template.
- vite-tailwind-stimulus-starter - Starter template for Tailwind CSS and Stimulus controllers.
- vite-phaser-ts - Starter template with Phaser and TypeScript.
- vite-tinybase - Starter template for TinyBase.
- vite-tinybase-ts - Starter template for TinyBase and TypeScript.
- vite-vanilla-js-template - Starter template ESlint, Prettier, PostCSS, Nesting, Autoprefixer, CSS Nano, CSS Reset.
- vite-starter-markup-template - Starter template for Markup.
- create-domco - Starter template for domco.
- vite-vanilla-library-template - Starter template TypeScript, ESLint, Vitest, Husky, Conventional Commits, GitHub actions.
- vite-alpine-template - Starter template for Alpine.
- vite-ts-lib-starter - Starter template for libraries with TypeScript, Bun, Vitest, Prettier, Renovate and np.
- vite-swagger-ui - Swagger UI with built-in support for multiple APIs.
- template-vite - An official quickstart template with Phaser.
- template-vite-ts - An official quickstart template with Phaser and TypeScript.
- vite-ts-bulma-sass-template - Starter template
TypeScript, Bulma, Sass, Stylelint, Biome.
Vue 3
- Vitesse - Opinionated starter template.
- vite-ts-tailwind-starter - TypeScript, Tailwind CSS, Cypress.io e2e tests + CI.
- vue-vben-admin - Background management template based on Vue3, Ant-Design-Vue, TypeScript.
- vue-pure-admin - Background management template based on Vue3, TypeScript, Tailwind CSS, element-plus.
- fast-crud - Options-oriented crud framework, developing crud as fast as lightning.
- vitesse-lite - Lightweight version of Vitesse.
- vitesse-webext - WebExtension Vite Starter Template.
- naive-ui-dashboard-template - UI friendly, Vue 3 + TSX + Tailwind CSS 2 JIT + PostCSS + Naive UI.
- Vitawind Creator - Create Tailwind CSS project rapidly.
- vue3-tailwind3-website-starter - Vue3 / Vite / Tailwind CSS website starter template, with guides on each page.
- boot-vue - Starter template with TypeScript + UnoCSS + DaisyUI + Vue Router + Pinia.
- Vue Naive - Admin template, base on Vue 3 + Pinia + Naive UI.
- vue-admin-box - Admin template, based on Vue 3 + Element-plus.
- vite-vue-proste - Pinia + TypeScript + Vue-Router4 + Vitest + Vue-Test-Utils + Vue-Query + Sass + ESLint + Stylelint + Prettier +
project presets.
- vue-vite-ssr - TypeScript, Eslint, Stylelint, Husky, Lint-staged and Commitlint.
- vue3-vant-mobile - Vite5 + Vue3 + Vant4 + Pinia + Vue-Router4 + TypeScript Mobile Template.
- vue-vite-tw-ts - Vue 3 + Vite + Vitest + Cypress E2E + Naive UI + Pinia + Vue Router.
- vite-vue-js-starter-template - Vite + Vue3 + JavaScript + Vue Router + Pinia + TDesign + ESLint + Stylelint + Prettier Simple Template.
- vue-xs-admin - Based on Vue3, Vite3 ElementPlus, TypeScript, Pinia, VueRouter.
- vulcan - The template for mobile application. Vite, Vue 3, TypeScript, Sass, i18n, Vitest&Cypress, Pinia, APIs&Mock, ESLint, Prettier, auto-importing.
- antdv-pro - AntdvPro is a complete set of enterprise-level mid-backend front-end/design solutions based on Vue3, Vite4, ant-design-vue4, Pinia, UnoCSS and TypeScript.
- vue3-quick-start - Building an engineered Vue 3 project, integrated with
Vite + Vue3 + TypeScript + ESLint + Prettier + Commitizen + Husky + LintStaged + CommitLint + AutoImport + ReleaseIt.
- antd-vue3-admin - A starter template based on Vue3, Vite4, TS5 and Ant-Design-Vue4.
- vue-file-upload - A file management system built with
Vue3 and TypeScript that allows for single and multiple file uploading with a preview feature.
- arco-admin -
Vite + ArcoDesign + TypeScript follows ESM standards, offering an out-of-the-box,standardized, feature-rich template for middle and back-office management systems.
- materio-free-vuetify-nuxtjs-admin-template - Vue.js 3, Vite 5, Vuetify 3 & Nuxt.js 3.
- vite-plugin-vue-style-bundler - Auto bundle Vue/sfc styles into JavaScript.
- celeris-web - Template based on
Vite + Vue3 + TypeScript + Vue-Router + Pinia + Unocss + Naive UI + pnpm Monorepo.
- vite-ts-starter - Vue
I18n Dynamic Router Localization Template, Internationalized Applications with UnoCSS + Unplugin + Element-Plus + Vitest + TypeScript + Vue-Router + Vuex + Scss + ESLint + Stylelint + Husky + lint-staged.
- vite-vue3-tailwind4-daisyui5-starter-template - Starter template with Vue 3 + Vite + Tailwind CSS 4 + DaisyUI 5 + Sass.
Vue 2
- vite-vue2-windicss-starter - Vue 2, Vue Router, Composition API, VueUse, Windi CSS and TypeScript.
- vite-vue2-ts-starter - Vue2 TypeScript starter template using vue-property-decorator, vue-router, Vuex.
- vite-vue2-ts-vuetify-starter - It is the above vite-vue2-ts-starter with Vuetify and its optimized settings. Includes basic templates.
- vitify-admin - Vuetify admin starter template with full TypeScript support and intellisense of Vuetify components.
React
- Vitamin - React TypeScript, Tailwind CSS, SPA + PWA, Cypress and CI.
- vite-template-react - A Create React App-like template.
- vitejs-template-react-rescript - React + ReScript.
- template-vite-react - A minimal React Vite starter template.
- reactjs-vite-tailwindcss-boilerplate - React 18, TypeScript, Vitest, Testing Library, Tailwind CSS 3, Eslint and Prettier.
- vite-react-ts-tailwind-firebase-starter - Starter using Vite + React + TypeScript + Tailwind CSS (daisyUI) + Firebase (v9) + Prettier + ESLint.
- create-react-app-vite - React, TypeScript, Tailwind CSS, MSW, Vitest, React Testing Library, ESLint, Prettier, GitHub Actions.
- chrome-extension-boilerplate-react-vite - React + TypeScript + SASS + Prettier + ESLint + GitHub Actions + HMR(Hot Module Reload) + Turborepo + Chrome Extension Manifest v3.
- vite-rtk-query - React, TypeScript, Redux Toolkit, RTK Query, Tailwind CSS, MSW, Jest, React Testing Library, ESLint, Prettier.
- vite-react-proste - React + TypeScript +
react-router-dom + Recoil + SASS + Testing Library + react-query + ESLint + Stylelint + Prettier.
- React-PWA - React v18, TypeScript, Vite, React Router v6, MUI v5, Recoil, PWA, Eslint, Prettier, Husky, lint-staged, https localhost and more.
- react-vite-ssr - Mobx, TypeScript, Eslint, Stylelint, Husky, Lint-staged and Commitlint.
- Viterts - React + TypeScript + Redux + React Router + Jest + ESLint + Airbnb + Prettier + SASS.
- ViteRC - React 18 + TypeScript + ESLint (Airbnb) + Prettier + Husky + Jest + Absolute imports + Commit linting.
- React Starter Kit - Jamstack, React, React Router, Material UI, Firebase Auth, TypeScript, ESLint, Prettier, Jest, GitHub Actions.
- vite-mern-template - React 18 + TypeScript + Vite + Redux Toolkit + ESLint + React Router DOM + Axios + React Icons + React Toastify + Express + Mongoose.
- Varsarr - React, TypeScript, Styled-Components, Recoil, React-Query, Axios, Absolute imports.
- viterjs-template - React + JavaScript + Redux + Material UI + Axios + ESLint + Prettier.
- react-vite-ts-boilerplate - React 18, TypeScript, SCSS, ESLint, Prettier, Vitest.
- vite-react-universal-template - React18 + TypeScript +
react-router-dom + Zustand + ESlint + Prettier + Stylelint + Husky + Docker, and APIs auto importing.
- react-vite-template - A react project template.
- react-xs-admin - The background management system template developed based on React18 + ReactRouteV6 + Vite + And Design + ReactIntl + ReactRedux + Emulation.
- vite-mui-ts - React + TypeScript + Redux + Material UI + RRD + ESLint + Prettier.
- template-vite-react-ts-tailwind - React + TypeScript + Tailwind CSS + Eslint + Prettier.
- vite-react-ts-template - React 18, TypeScript, ESlint, Prettier, Dev Container, Vitest, Storybook, Playwright, MSW, React Router 6, React Query, Chakra UI, Zustand.
- react-vite-tailwindcss-template - React, JavaScript, Tailwind CSS, ESlint, Prettier, Pre-commit.
- vite-tinybase-react - Starter template for TinyBase and React.
- vite-tinybase-ts-react - Starter template for TinyBase, TypeScript, and React.
- vite-react-ssr-boost-template - Template for creating
React 18 SSR/SPA apps with TypeScript, Mobx, React Router, Head Manager, Suspense, Streaming. Also included CI/CD, ESLint, Prettier, Stylelint, Husky, Semantic Release.
- vite-react-ts-shadcn-starter - Template for creating
React 18 SPA apps with TypeScript, React Router, Tailwind CSS, Shadcn UI, React Query, ESLint, Prettier, Stylelint, Husky, React-i18next, Transmart.
- template-tauri-vite-react-ts-tailwind - Template for Tauri + React + TypeScript + Tailwind CSS + Prettier + ESLint build-in.
- vite-react-chakra-starter - Starter template for creating React App with TypeScript and Chakra UI. Configured with ESLint, Prettier, and Husky.
- vite-react-tailwind-starter - Starter template for creating React App with TypeScript and Tailwind CSS with Shadcn UI. Configured with ESLint, Prettier, and Husky.
- monorepo-template-react - React + TypeScript template for SSR, SPG, SPA and API provision.
- vite-react-dapp-template - Starter template for decentralized app frontend development with preconfigured Wallet Authentication, i18n and UI features.
- vite-express-ssr-ts - React + TypeScript + Express.js + Vite SSR template with inbuild api feature.
- vite-react-flow-template - React Flow starter template.
- react-vite-template - React, TypeScript, Vite, Mantine, Million, Husky, Prettier, Import Sorter, Lint-staged.
- gravity-ui-vite-template - Template with Gravity UI ecosystem (React, TypeScript, Gravity UI, Vite, Husky, ESLint, Prettier, Lint-staged).
- vite-react-component-library-starter - A starter template for creating React component libraries with
TypeScript, Tailwind CSS, Storybook, Vitest, ESLint, Prettier, Husky, and GitHub Action.
- vite-template-awesome-soho -
DevContainer Template for creating React 18, Javascript + JSDoc, React Router, Ant Design, ESLint, EditorConfig, .env, SonarLint, Vitest.
- react-component-library-vite - A library template for with
React, Javascript,Styled-Components, Vitest, React Testing Library, Storybook.
- ReTail - Starter template for building Full Stack WEB applications with
Remix using TypeScript, Tailwind CSS, Prettier and ESLint.
- vite-react-redux-saga-typescript - Starter template with
React, TypeScript, Redux (Redux Toolkit), Saga, React Testing Library, ESLint, Prettier and Husky.
- vite-complete-react-app - Starter template for building web applications using
React, TypeScript, Redux Toolkit, React Router, Axios, Sass, Moment, ESLint, Prettier and React Testing Library.
- vite-react-framer-starter - Starter template with
React, TypeScript, Framer Motion, Tailwind CSS, ESLint, and Prettier.
- vite-jsx-remove-attributes - Remove the
data-testid (configurable) from production builds.
- React Tanning - Starter template with
React + Vite + TypeScript + TanStack + Tailwind.
- Reactive -
React starter template with Remix file-based routing convention for react-router, UnoCSS, LinguiJs, zustand, and ton of features.
- RVTGB -
React + TypeScript starter template, with file-based routing with Generouted and Biome.
- vite-biome-tailwind-template - React, TypeScript, Biome, Tailwind CSS.
- React Dapp Starter - Enterprise-ready Web3 DApp starter with
TypeScript, Tailwind CSS, Web3Modal, Wagmi, Shadcn UI, Zustand, and TanStack Query for scalable decentralized applications.
- vite-template-react-ts-jest -
React + TypeScript + Jest.
- vite-amplify - Template with SSR + Express APIs + AWS Amplify Hosting.
- react-component-library-template - A library template for with
React, TypeScript, Vitest, React Testing Library, Storybook, Biome, Stylelint.
- react-boilerplate - Template for bootstrapping with
Eslint + Husky + Prettier.
- react-admin-dashboard - Dashboard template with
TypeScript, Vite, Ant Design, React Router, Zustand, Ant Design Charts.
- vite-plugin-ssr-config - Configure server-side rendering (SSR) with
React, React-Query, React-Router.
- portfolio-vite-manifest - fullstack portfolio template with
Vite, React, TypeScript, Manifest.
Svelte
Solid
- vitesse-solid - Opinionated Vite + SolidJS Starter Template. Includes TypeScript, ESLint, Prettier, UnoCSS, HopeUI and more.
- vitesse-lite-solid - Lightweight Vite Starter Template for SolidJS.
Electron
Tauri
- HuLa - is a desktop instant messaging app built on
Vite 5 + Vue 3 + TypeScript + Tauri (not just instant messaging).
Neutralino
Elm
F# and Fable
Petite-Vue
VanJS
GitHub
- github-action-template - Starter template for GitHub Actions, TypeScript, ESLint, Vitest, Husky, Conventional Commits.
Others
Plugins
[!IMPORTANT]
There's Vite Plugin Registry that lists the plugins published to npm.
The list below is not updated.
Framework-agnostic Plugins
Integrations
- @vitejs/plugin-legacy - Legacy browser support.
- vite-plugin-pwa - Zero-config PWA.
- 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, the simple way.
- vite-plugin-comlink - Use WebWorkers with the power of 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.
@storybook/builder-vite - Storybook builder.- @builder.io/partytown - Relocate resource intensive third-party scripts off of the main thread and into a web worker.
- 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.
- remix-development-tools - Plugin for Remix.run development tools.
- 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.
- @mistjs/vite-plugin-px2viewport - A plugin that automatically converts inline styles and style files from px units to vw units.
- vite-multiple-assets - Add support for multiple public asset directories.
- vite-create-production-server-plugin - Spin up a production HTTP serve after build.
- vite-plugin-eslint2 - Runs ESLint synchronously/asynchronously.
- vite-plugin-page-html - Multi-page generic template plugin, support
ejs template syntax. Similar to vue-cli pages configuration.
- vite-plugin-vanilla - Vanilla multi-page web development mode.
- genaicode/vite-plugin - A plugin that embeds an AI coding assistant into the app UI.
- 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-llms - Integration for the llms.txt specification supporting AI optimized content alongside application routes.
module-federation/vite - Official Module Federation integration, enabling dynamic remote module loading.
Loaders
Bundling
- vite-plugin-html - Plugin to minimize and use ejs template syntax in
index.html.
- vite-plugin-ts-nameof - Ability to resolve nameof in TypeScript.
- vite-plugin-handlebars - Process HTML files with Handlebars.
- vite-plugin-virtual-html - Make Vite MPA consistent with
@vue/cli.
- vite-plugin-content - Convert
yaml, xml, ini, toml, csv, plist and properties files to ES6 modules.
- vite-plugin-require - A Vite plugin that supports
require by code transforming.
- vite-plugin-global-style - Deal with global styles for CSS, SASS, LESS and Stylus.
- 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-turbo-console - Enhance the readability of
console.log().
- 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-icons-spritesheet - Generate a spritesheet and TypeScript types from SVG icons by listening to the icons folder changes.
- vite-plugin-abbrlink - Add the abbrlink attribute to the
markdown file in the specified directory.
- vite-plugin-native - Supports Node/Electron C/C++ native addons.
- @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-plugin-replace-lodash - Replacing the import of
lodash with lodash-es is more beneficial to tree-shaking.
- vite-plugin-dynamic-prefetch - Inject
<link rel="prefetch" /> tags into the HTML file for dynamic modules at runtime.
- vite-plugin-material-symbols - Selective loading of Material Symbols font icons based on source code analysis.
Helpers
- 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-external - Provides a way of excluding dependencies from the runtime code and output bundles.
- unplugin-auto-import - On-demand API auto-importing.
- vite-plugin-inspect - Inspect the intermediate state of Vite plugins.
- 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-watch-and-run - Watch some files (glob) and trigger a command. To enable any tool to have a watch mode.
- 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-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-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-api - Generate route mapping for API Routes services from the directory tree.
- 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.
- @froxz/vite-plugin-s3 - Allows you to upload files to S3.
- 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-i18n-detector - Lazyload i18n locale resources.
- 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-valibot-env - Validate environment variables against a Valibot schema.
- vite-plugin-vitest-cache - Optimize
Vitest execution time through caching.
- 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-envtype-patch - Generate
type info for import.meta.env.
Testing
Security
- vite-plugin-csp-guard - Lets you configure a Content Security Policy to your project, supports all directives and hashing.
- vite-plugin-csp - Content Security Policy (CSP) for SPA. Automatically calculates asset hashes (SRI), detects Google Fonts. Support
Bun and Node.js runtimes.
Vue
In this section, we use badges to indicate the targeted Vue version for each plugin.
for Vue 2 only, 
for Vue 3 only, and 
for plugins that compatible with both versions.
💡 SSR frameworks are listed at SSR - Frameworks.
Integrations
Routing
Loaders
SSG
Ecosystem
Helpers
React
Official
Presets
Routing
- generouted - Client-side type-safe file-based routing and global modals — supports layouts, loaders, code-splitting and more.
- unplugin-remix-router - Generates a React Router file, that depends on Remix v2 file-based router convention.
- vite-plugin-remix-flat-routes - Remix-flat-routes convention-based routing, compatible with react-router data-api routing.
Loaders
Framework
Helpers
SSG
💡 SSR frameworks are listed at SSR - Frameworks.
Preact
Presets
- @preact/preset-vite - Preact preset. HMR, automatic Preact inject, removal of DevTools in prod.
Svelte
Integrations
Helpers
Solid
Integrations
Routing
- generouted - Client-side type-safe file-based routing and global modals — supports layouts, loaders, code-splitting and more.
Elm
Integrations
Angular
Integrations
Fastify
Integrations
Routing
Electron
Integrations
Presets
Rollup Plugins
Included in Vite
Covered by default in Vite
Compatible with Vite
SSR
Libraries
- Vike - Like Nuxt/Next.js but as a do-one-thing-do-it-well plugin.
- ssr - A Server Side Rendering framework combined with Webpack/Vite.
- vavite - A tool for developing and building server-side applications with live reloading capabilities.
- vue-ssr - Minimalistic wrapper to develop and run SSR powered Vue apps.
- vite-ssr-boost - Server side rendering library for create awesome app based on
react-router.
- SSRx - A thin layer on top of Vite to build modern SSR apps with a delightful DX.
- Vinxi - The Full Stack JavaScript SDK. Allows adding SSR to a Vite app.
- domco - Minimal full-stack JavaScript. Turns a Vite app into a full-stack application with minimal dependencies.
Frameworks
Integrations with Backends
Adobe Experience Manager
Craft CMS
- Craft Vite - Plugin for integration with Craft CMS.
Django
Flask
Ruby on Rails
Laravel
CakePHP
WordPress
TYPO3 CMS
Go
vite - Integration with Go.
Rust
OctoberCMS
Symfony
Shopify
CodeIgniter
DDEV
Node.js
ASP.NET Core
Drupal
PHP
- PHP-Vite - Integration for PHP, Composer package, no framework dependencies.
- PHP-Vite Starter Repo - Starter repository, with TypeScript/JavaScript, Tailwind CSS, SASS/SCSS, EJS, SVG and image support.
- php-vitelinker - A CLI tool that generates includable PHP files after building bundles.
Migrations
Vue CLI
React
- Viject - One-shot migration tool from Create React App.
Projects Using Vite.js
Open Source
- VitePress - Static Site Generator powered by Vite and Vue.
- Slidev - Presentation Slides for Developers.
- Astro - Modern Static Site Builder.
- Hathora - Multiplayer game framework.
- Nhost - Open Source Firebase Alternative with GraphQL.
- Ladle - Tool for developing and testing component stories powered by Vite and React.
- IslandJS - Static site generator base on islands architecture.
- Vituum - Wrapper around Vite with predefined config, integrations and template engines.
- Compiiile - Preview or host folders containing Markdown files with full-text search and presentation slides.
- Gracile - A meta-framework powered by Lit SSR.
- @lazarv/react-server - A React meta-framework.
- WXT - Framework for building web extensions, with the same DX as Nuxt.
- Revili - A command and GUI integration tool.
Apps/Websites
- Icônes - Icon explorer with instant search.
- Awesome CN Café - Web application for Awesome CN Café.
- Todo Example - Todo app with routing and state management.
- aitrack.work - A task-based time tracker for everyday use.
- macOS in Svelte - macOS Desktop experience for Web in Svelte.
- vue3-realworld-example-app - Realworld app implementation using Vue 3 + TypeScript + Composition API.
- react-device-frameset - This is yet another device frameset component for React.
- Preview.js - An IDE extension to instantly preview React, Vue 2 and Vue 3 components.
- pointer-lock-movement - A pointer lock movement manager for customizing your own creative UI.
- vite-run - Multiple configuration execution support for Vite, freely combining configurations like stacked blocks.
- Dataviz Explorer - A tool for large CSV, database, and real-time visualization with interactive plots using
Highcharts, Chart.js, React, JavaScript, Material UI and GitHub Actions with Coverage Report.
一个关于 Vite.js 的精选资源清单——手工挑选的链接，涵盖 Vite 生态中的官方资源、脚手架工具和入门模板。