Awesome-Vite【转】

最新推荐文章于 2025-03-08 15:34:24 发布

ftzahao

最新推荐文章于 2025-03-08 15:34:24 发布

阅读量647

点赞数

文章标签： javascript 开发语言 ecmascript

原文链接：https://github.com/vitejs/awesome-vite

版权

Awesome Vite.js

一个与Vite.js相关的很棒的东西的列表

## 资源

官方资源

开始

create-vite - Scaffolding Your First Vite Project.
create-vitawind - Scaffolding for TailwindCSS project.
create-electron-vite - Scaffolding Your Electron + Vite Project.
create-vite-app - Scaffolding Your Out Of The Box Vite Project.
create-nx-workspace - Scaffolding a Nx + React + Vite + Vitest.

模版

Vanilla

vite-vanilla-tailwind-v3 - Tailwindcss 的入门模板和内置的 prettier-plugin-tailwindcss。
vite-vanilla-ts-lib-starter - 入门库(CJS, ESM, IIFE)与TypeScript, ESLint, Stylelint, Prettier, Jest, Husky + lint-stage。
vite-tailwind-nojs-starter - NoJS Tailwind CSS starter template.
vite-tailwind-stimulus-starter - Starter template for Tailwind CSS and Stimulus controllers.
vite-tailwind - Starter template for Tailwindcss.
docker-vitejs-tailwind-handlebars - Starter template for TailwindCSS and Handlebars (Docker Compose).
vite-phaser-ts - Starter template with Phaser and Typescript.

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.
vivu - Opinionated scalable vue boilerplate.
vite-tauri-template - Tauri + Vite + Vue 3 + Vuetify 3 desktop app template.
vue-vite-h5 - Use Vue3, TypeScript and Vant to develop mobile applications.
Vitesome - Vue3 + TypeScript + WindiCSS + Vue Router 4, i18n and Iconify.
vitesse-lite - Lightweight version of Vitesse.
vitesse-webext - WebExtension Vite Starter Template.
vite-ts-vue3-todo - Vue3 + TS + Vue-Router4 + Pinia2 template.
naive-ui-dashboard-template - UI friendly, Vue 3 + TSX + TailwindCSS 2 JIT + PostCSS + Naive UI.
vitailse - Like Vitesse but with Tailwind CSS.
vitespa - Vitesse-based SPA without SSG.
vite-quasar-starter - Vite 2.x + Vue 3.x + quasar 2.x starter.
vue3-mobile-template - Vue3 + TS + Vue-Router4 + Vuex4 + Vant + Vue-use + Vue-i18n Mobile Template.
vue3-template - Vue 3 / Tailwind CSS / vue-router / PNPM / ESlint Airbnb / Stylelint / GitHub pages actions / Netlify.
Modern Vue - Modern Vue stack 2022.
Vitecamp - Vue3 / Element Plus / Axios / Vue Router / Pinia / Windi CSS / icones / i18n / Markdown / Svg / ESLint Airbnb Style / Components and APIs auto importing.
vite-vue3-typescript-webcomponent - Vue 3 / Typescript / boiler plate to develop Web Component.
vite-vue-ts-storybook - Vue 3 / i18n / Typescript / Vite / Storybook / ESLint / Prettier.
vite-vue-tailwind-v3 - Starter template for Vue3 + TailwindCSS and prettier-plugin-tailwindcss build-in.
vite-vue-ts-tailwind-v3 - Starter template for Vue3 + Typescript + TailwindCSS and prettier-plugin-tailwindcss build-in.
Vitawind Creator - Create TailwindCSS project rapidly.
vue3-ts-vite-vitest-todo - Vue 3 / TypeScript / Vite / Vitest with full tests / Composition API / Pure TS/TSX.
vue3-tailwind3-website-starter - Vue3 / Vite / TailwindCSS website starter template, with guides on each page.
vite-boot - Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Tailwind CSS + VueUse Template.
Vue Naive - Admin template, base on Vue 3 + Pinia + Naive UI.
vue-admin-box - Admin template, based on Vue 3 + Element-plus.
vivu-npm - Starter template to build component library.
vue3-pc-template - Vite + ElementPlus + Vue3 + TS + Vue-Router4 + Vuex4 + Vue-use + Vue-i18n PC Template.
ViTauri - Vite + Tauri + Vue3 + TS + Vue-Router4 + Auto imports.
vue-hbs-admin - Admin starter template based on Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Unocss + Ant-design-vue + Auto imports.
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 - Vite + Vue3 + Vant4 + Pinia + Vue-Router4 + TypeScript Mobile Template.
vue3-powerbuild - Vue 3 + TypeScript + Tailwind CSS + Vite + Storybook + ESLint + Prettier.
vue-ts-starter - Vue3 + TypeScript + Vite + Pinia.
vitequality - Vue 3 + Typescript + Vue Router + Pinia + Eslint + Jest + Cypress.
vue-vite-tw-ts - Vue 3 + Vite + Vitest + Cypress E2E + Naive UI + Pinia + Vue Router.
vite-vue-box - Vite + Vue 3 + Ts + TailWindCss + VueHook Plus + Pinia + Axios + ESLint + Stylelint.
vite-vue-js-starter-template - Vite + Vue3 + JavaScript + Vue Router + Pinia + TDesign + ESLint + Stylelint + Prettier Simple Template.
vite-vue3-bootstrap-ts-vitest-starter - Vue 3 + TypeScript + Vite + Bootstrap Vue 3 + Vitest.
vue-xs-admin - Based on Vue3, Vite3 ElementPlus, TypeScript, Pinia, VueRouter.
vue-component-template - Vue 3, TSX, ESLint, Prettier.
ionic-vue-vite - Vue 3 + Vue Router + Vite + Ionic.
ionic-vue-pnpm-monorepo - Vue 3 + Vue Router + Vite + Ionic + pnpm monorepo.
ionic-vue-pnpm-express-monorepo - Frontend: Vue 3 + Vue Router + Vite + Ionic, Backend: express + pnpm monorepo.
ionic-vue-capacitor - Vue 3 + Vue Router + Vite + Ionic + Capacitor + pnpm monorepo.
ultimate-vite-ts-less-template - Vue 3, TypeScript, Less, i18n, Vitest, Vitepress, lodash, Axios, Pinia, Built-in logger, Built-in Input Validators, env files.
vite-vue-h5-app - Vite 3 + Vue 3.2 + TypeScript + Vant mobile applications.
vulcan - The template for mobile application. Vite, Vue 3, TypeScript, Sass, i18n, Vitest&Cypress, Pinia, APIs&Mock, ESLint, Prettier, auto-importing.
vite-plugin-ssr-vue3-ts-compositionAPI-i18n-fetchData - Vue3 + Typescript + CompositionAPI + i18n + fetchData.
vite-plugin-vue-sfc-in-js - Vue SFC syntax in JS files, allows to create multiple components in a single .js file.
vite-vue-lib-template - Vue 3, Eslint, Prettier, Conventional Commit, Pre-commit, Lint-staged, Semantic-release, TypeScript.
vite-plugin-style-vw-loader - A loader that can convert the style px in the vue tag to vw.
vue3-ts-pinia-vant - Vue3, Vant, Pinia, VueUse, TypeScript, SocketIO, Mobile Demo.

Vue 2

vite-vue2-windicss-starter - Vue 2, Vue Router, Composition API, VueUse, Windi CSS and TypeScript.
vite-ts-vue2-todo - Vue2 + ts + Vue-Router3 + Pinia1 + Composition API.
vite-vue2-ts-starter - Vue2 TypeScript startar 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.
vite-vue2-ts-template-starter - Vite + Vue2 + Typescript + Vuex + Vue-router + Axios + Sass Simple Template.
vitify-admin - Vuetify admin starter template with full TypeScript support and intellisense of Vuetify components.
vite-vue2-js-starter-template - Vite + Vue2 + JavaScript + Vue Router + Vuex + Axios + Less + ESLint + Stylelint + Prettier Simple Template.

React

Vitamin - React TypeScript, TailwindCSS, SPA + PWA, Cypress and CI.
vite-reactts-eslint-prettier - React, TypeScript, ESlint, Prettier, Pre-commit.
react-vite-admin - React, Recoil, React Query, React Hooks, TypeScript, Axios.
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, TailwindCSS 3, Eslint and Prettier.
Tropical - React, Storybook, MDX, Fela, SSR prerendering, and islands architecture.
vite-plugin-react-refresh - Provide enhancements for @vitejs/plugin-react-refresh.
vite-reactts18-chakra-jest-husky - React 18, TypeScript, Chakra UI, Jest, ESLint, Prettier, Husky.
react-ts-vite-template - React, TypeScript, Jest, Testing Library, Cypress, ESLint, Prettier, Husky.
vite-reactts-tailwind-rtk-eslint - React, TypeScript, Tailwind CSS, Redux Toolkit, eslint.
vite-react-tailwind-template - React 17, TypeScript, Jest, ESLint, Prettier, Husky, Tailwind CSS, PostCSS, pnpm.
stravital - TypeScript, Git Hooks, Commitizen, Lint Staged, TailwindCSS.
vite-react-ts-tailwind-firebase-starter - Starter using Vite + React + TypeScript + Tailwind CSS (daisyUI) + Firebase (v9) + Prettier + ESLint.
vite-react-ts-starter - React, TypeScript, Jest, ESLint, Prettier, TailwindCSS, Husky, Conventional Commits.
vital - React, TypeScript, Tailwind (JIT), CSS-Modules, Jest, Atomic Design, Prettier, Husky, Commit-lint.
vite-react-ts-ghactions-template - React, TypeScript, Vitest + React Testing Library, GitHub Actions + GitHub Pages, ESLint, Prettier, Husky, Commitlint.
vite-react-tailwind-v3 - Starter template for React + TailwindCSS and prettier-plugin-tailwindcss build-in.
vite-react-ts-tailwind-v3 - Starter template for React + Typescript + TailwindCSS and prettier-plugin-tailwindcss build-in.
vite-react-ts-extended - React, TypeScript, TailwindCSS, MSW, Axios, Jest, React Testing Library, ESLint, Prettier, GitHub Actions.
vite-react-starter - React + ESLint + Prettier + SASS + Emotion + TailwindCSS + Jest + Testing Library.
chrome-extension-boilerplate-react-vite - React + TypeScript + SASS + Prettier + ESLint + GitHub Actions + Chrome Extension Manifest v3.
vite-ant-design-pro - React + antd + ProComponents + ReactQuery + ReactRouter6.
vite-rtk-query - React, TypeScript, Redux Toolkit, RTK Query, TailwindCSS, 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.
vite-react-ts-minimal-template - React + TypeScript + Airbnb ESLint + Prettier + Husky.
react-vite-ssr - Mobx, Typescript, Eslint, Stylelint, Husky, Lint-staged and Commitlint.
Viact - React + TypeScript + ESLint + Prettier + Support RTL + mock REST API Viact + Storybook, ErrorBoundary, UnoCss and more.
Viterts - React + TypeScript + Redux + React Router + Jest + ESLint + Airbnb + Prettier + SASS.
ViteRC - React 18 + TypeScript + ESLint (Airbnb) + Prettier + Husky + Jest + Absolute imports + Commit linting.
VRTTV - React + TypeScript + TailwindCSS + ESLint + Prettier + Husky + Conventional Commits + Gitmoji + GitHub Actions + Vercel Deploy.
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.
react-pipeline - React 18 + TS + AntD + GitHub Pages + Tailwind + Sass + React Router DOM + ESLint.
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 + Mobx + ESlint + Prettier+Husky, and APIs auto importing.
vite-reactts18-eslint-tailwindcss - React 18 + TypeScript + ESLint + TailwindCSS.
vite-plugin-react-views - Create routes automatically based on File System.
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.
leo-react-app - React + SASS | Template for React applications with SASS boilerplate for consistent interfaces.
template-vite-react-ts-tailwind - React + TypeScript + Tailwind CSS + Eslint + Prettier.
vite-react-ts-tailwind-template - React, TypeScript, ESLint, Prettier, Husky, Vitest for specs, and Tailwind + CSS Modules.
vite-react-ts-template - React 18, TypeScript, ESlint, Prettier, Dev Container, Vitest, Storybook, Playwright, MSW, React Router 6, React Query, Chakra UI, Zustand.

Svelte

SvelteKit - The fastest way to build Svelte apps.
sttv - Svelte, Tailwind CSS, TypeScript.
svelte-vite-ssr - Svelte with SSR support.

Solid

vite-solid - Vite + Solid starter template.
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

electron-vite-vue - Electron + Vite + Vue template.
electron-vite-react - Electron + Vite + React template.
electron-vite-boilerplate - Support SerialPort, SQLite3 and node C/C++ addons.
electron-vite-quick-start - Full stack uses Vite to run Electron application, including main process.
electron-vite-template - Electron 13, Vue 3 and TypeScript. Make your desktop development easier.
fast-vite-electron - Vue3 + Vite + Electron with esbuild.
fast-vite-nestjs-electron - Vue3 + Vite + Electron + Nestjs with esbuild.
vite-plugin-electron-quick-start - Template for Electron projects.
vite-electron-builder - Electron apps using Vite for both back and front-end, with automatic releases.
vite-reactts-electron-starter - React, Tailwind CSS, TypeScript and Electron.
Vitectron - TypeScript & JSX + Vue 3.x + Vite 2.x + Pinia 2.x + Vue-Router 4.x.
vite-plugin-electron-renderer - Support use Node.js API in Electron-Renderer.
electron-vue-template - Electron template with TypeScript, including Electron Builder.
Vitron - Build beautiful (win, linux, mac) desktop apps for modern web projects with vite and electron.
Vutron - Electron + Vite + Vue 3 + Pinia (TypeScript) template.
vite-electron-plugin - High-performance, esbuild-based Vite Electron plugin.
vite-plugin-doubleshot - For building Node.js backend or Electron main process.

Elm

vite-elm-template - A default template for building Elm applications.
elm_vite_tailwind_template - Opinionated template for building Elm web apps using Tailwind CSS and Daisy UI.
vite-elm-spa - An unopinionated template for building Elm single page applications.

Petite-Vue

vite-petite-vue-starter - Starter template.

Others

P5.js Starter Template - Templates for creating P5.js sketches.
vit-singlefile-gzip - Starter template for embedded.
11st-Starter-Kit - 11ty, powered by Vite with Tailwind CSS and Alpine.js.
chrome-ext-template-preact-windi-vite - Preact, Windi CSS, TypeScript, Prettier, ESLint, GitHub Actions and Chrome Extension Manifest v3.
vite-vanilla-ts-knockout - Starter template for Knockout.js, TypeScript.

Plugins

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-mpa - Out-of-box multi-page application (MPA) integration.
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.
@nabla/vite-plugin-eslint - Runs ESLint asynchronously in a worker to keep HMR fast.
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-esbuild-typescript-checker - Type checker (TypeScript, Vue SFC, etc.) based on the webpack 5 plugin.
vite-plugin-simple-gql - Easily import .graphql and .gql files.
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-resolve - Custom resolve module content.
vite-plugin-electron - Integrate Vite and Electron.
vite-plugin-optimizer - Manually Pre-Bundling.
vite-plugin-dynamic-import - Enhance Vite builtin dynamic import.
vite-plugin-esmodule - Build ES module to CommonJs module for Node.js.
vite-plugin-dynamic-import-module - Support for dynamic import module with variables.
vite-plugin-mp - Configure multi-pages applications and code splitting.
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-tencent-oss - Upload the production files bundled in the project to Tencent OSS, except for HTML.
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-print-urls - Vite hmr and page reload will print server urls.
vite-plugin-env-switch - Switch project env and restart vite server without command line operation.
vite-plugin-msg-log - Log the msg you want to confirm frequently (like env info) when HMR.
vite-plugin-bullet-msg - Get the target strings in you source code and show them in browser(or handle them yourself).
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.
tailwindcss-vite-plugin - Tailwind CSS integration.
vite-plugin-assemblyscript-asc - AssemblyScript integration with full support for HMR, ESM import bindings, and source maps.
vite-plugin-qiniu-oss - Upload the production files bundled in the project to qiniu OSS, except for HTML.
vite-plugin-stylelint - Runs Stylelint synchronously/asynchronously.
Vite-plugin-graphiql - Integrattion for GraphiQL IDE.
vite-plugin-graphql-server - Bootstrap a local GraphQL server for testing and documentaion.
vite-plugin-multiple - Allow multiple Vite to run simultaneously.
vite-plugin-target - Electron, Node.js, etc.
vite-plugin-gitlab-flow - View the deployment information for the code in the console.
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.

Loaders

unplugin-icons - Access thousands of icons as components.
vite-plugin-rsw - Load rust-compiled (wasm-pack) WebAssembly packages.
vite-imagetools - Load and transform images using url query parameters.
vite-plugin-radar - All in one analytics loader (with 7+ providers supported).
vite-plugin-monaco-editor - Monaco Editor integration.
vite-plugin-image-presets - Define presets to automatically create and optimize responsive images.
vite-plugin-import-rewriter - Rewriter the import based on conditions.
vite-plugin-xml-loader - Loads xml file as JSON.
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-gltf - Load, transform, optimize, and compress glTF 3D files.
vite-plugin-importmap - I call this SASS at the code level.

Bundling

vite-plugin-importer - Integration for babel-plugin-import.
vite-plugin-banner - Adds a banner to the top of each generated chunk.
rollup-plugin-critical - Generate critical CSS.
vite-plugin-dts - Generate declaration files from .ts or .vue source files for lib.
vite-compression-plugin - Use Node.js stream compress file to gzip or more.
vite-plugin-chunk-split - Automatically code splitting, support unbundle in production.
vite-plugin-static-copy - Copy files and folders.
vite-plugin-copy-files - Move files to the location of the corresponding package directory.
vite-plugin-progress - Display with progress bar when building.
vite-plugin-importus - Modularly import plugin, compatible with antd, lodash, material-ui and so on.
vite-plugin-build - Transfom the whole folder in library mode.
vite-plugin-zip-file - Compress files or folders into zip.
vite-plugin-zip-pack - Pack distribution/build folder into a zip file.
vite-plugin-cp - Copy files after building bundles.
unplugin-compression - Compress dist to zip, tar, taz.
unplugin-imagemin - High performance compressed Picture based on squoosh and sharp.
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-clean - Remove or Clean your build folder(s).

Transformers

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-html-config - HTML tag configuration, such as script link style meta favicon and more.
vite-plugin-html-template - HTML template, like html-webpack-plugin for Webpack.
vite-plugin-virtual-html - Make Vite MPA consistent with @vue/cli.
vite-plugin-require-context - Supports require.context.
vite-plugin-commonjs - Support CommonJS to ESM.
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-require-transform - Converts the code from require syntax to import.
vite-plugin-twig - Twig template engine support.
vite-plugin-stache - CanJS’s template engine. Transforms stache files and template strings.
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.
vite-plugin-load-css-module - Support custom regexp of css modules and use vite internal css plugin, not just .module.xxx.
vite-plugin-remain-exports - Remaining exports from the entry file that imported by html.
vite-plugin-unocss-to-uni - UnoCSS in uni-app.
@modyfi/vite-plugin-yaml - Transform YAML files to ESM with schema validation and error reporting.
vite-plugin-head - Modify, add, delete Metadata in the head element.
vite-plugin-html-env - Injection of environment variables in index.html.
vite-plugin-html-inject - Split the index.html into smaller reusable pieces.
vite-plugin-inject-preload - Inject <link rel="preload"> to your index.html based on your build assets.
vite-plugin-document - Use Document.tsx as html template.
@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-setting-css-module - Implementing CSS-Modules with vite modularity rules. Don’t need create xxx.module.css.
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 JS, and support nested rules.
vite-plugin-optimize-css-modules - Generate the smallest possible CSS-Classes when CSS-Modules are used.
Vite-plugin-haxe - Use Haxe when targeting JS, transforming .hxml.
vite-plugin-leader-line - Add default export to leader-line.

Helpers

vite-tsconfig-paths - Support for TypeScript’s path mapping.
vite-plugin-theme - Dynamically changing the theme color.
vite-aliases - Alias auto-generation based on project structure.
vite-plugin-imp - Import library component styles on demand, make your app slimmer.
vite-plugin-mkcert - Provide certificates https dev server.
vite-plugin-vconsole - Help developers use vconsole to facilitate mobile development and debugging.
vite-plugin-externals - Exclude dependencies from the output bundles.
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.
@zougt/vite-plugin-theme-preprocessor - Easily implementing dynamic themes based on LESS or SASS.
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-redirect - Redirect server requests.
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-file-mock - File system based local mock plugin.
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-autogeneration-import-file - Automatically generates import file.
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-patch-env - Patch environment variables from the system into Vite.
vite-plugin-conditional-compile - Conditional compilation syntax based on environment variables.
vite-plugin-debug - Base on specific url parameters dynamically enables mobile web page debugging.
vite-plugin-mock-dev-server - Mock server for development, support CJS/ESM/JSON, auto-importing file and HMR.
vite-plugin-externals-extension - External links plugin which supports ESM and UMD.
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-isomorphic-import - Allows you to configure whether to import modules on the server-side or client-side.
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.

Testing

mocha-vite-puppeteer - Run your Mocha front-end tests with the Vite bundler and the Puppeteer browser launcher.
vitest - A Vite-native test framework.
vitest-mock-extended - Type safe mocking extensions for Vitest.
cypress-vite - Run Cypress specs using Vite.
vitest-preview - Visual debugging experience for Vitest.

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 v23 for plugins that compatible with both versions.

💡 SSR frameworks are listed at SSR - Frameworks.

Integrations

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ebldMwTF-1684668512643)(null)] - Official Vue 3 support.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MXBeSu64-1684668510017)(null)] - Official Vue 3 JSX support.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aPEPNlZE-1684668512288)(null)] - Vue 2 integration.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BPm3d0qJ-1684668512465)(null)] - Enabling <script setup> syntax for Vue 2.

Routing

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5RkA2061-1684668512496)(null)] - File system based route generator.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l8iI6mbH-1684668512218)(null)] - A tool to generate routes.

Loaders

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ki1LW2BU-1684668510049)(null)] - Markdown as Vue components / Vue components in Markdown.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vrnos1AV-1684668512405)(null)] - Load SVG files as Vue components.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X45bPbze-1684668512671)(null)] - Load SVG files as Vue components.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uNdlh0jE-1684668510080)(null)] - Load SVG files as a Vue component, supporting svg file HMR and Typescript intelligence prompt.

SSG

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WAV0d1rs-1684668512436)(null)] - Server-side generation.

Ecosystem

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-doYMmfa6-1684668510118)(null)] - Integration for Vue I18n.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IES3xl2B-1684668512182)(null)] - Load i18n translation message files.

Transformers

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M4ItZx4g-1684668512322)(null)] - Markdown code preview.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HmpRmxU0-1684668512360)(null)] - Code preview for Vue SFC in Markdown, supports online editing.

Helpers

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-alde8JGZ-1684668512556)(null)] - On-demand components auto-importing.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rZKVoQwo-1684668512131)(null)] - GraphQL Tags for your Vue SFC.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R8a11tij-1684668512585)(null)] - Compatible without ‘.vue’ suffix.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pC2QBxuY-1684668512614)(null)] - Jump to local IDE source code while click the element of browser.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Q0dnUCp-1684668512253)(null)] - Serve “.vue” files as static assets.

React

Official

@vitejs/plugin-react - The all-in-one Vite plugin for React projects.

Presets

vite-preset-react - All in one preset for your React app - HMR, Automatic React inject, removal of DevTools in prod.

Loaders

vite-plugin-svgr - Transform SVGs into React components.

Transformers

Framework

vite-plugin-react-pages - A Vite framework for building React app.
@vitjs/vit - React application framework inspired by UmiJS.

Helpers

vite-plugin-react-inspector - Jump to local IDE source code while click the element of browser.
vite-plugin-react-click-to-component - Uses Vite’s launch middleware to enable alt+click to go to component.

💡 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

vite-plugin-svelte - Adds Svelte support. Official plugin of Svelte team.

Solid

Integrations

vite-plugin-solid - Provides JSX transformation for Solid.
vite-plugin-solid-markdown - Compile markdown files to Solid components.
vite-plugin-solid-svg - Import SVG files as Solid.js Components.

Elm

Integrations

vite-plugin-elm - A plugin that enables you to compile an Elm module.

Angular

Integrations

@nxext/angular-vite - A plugin that uses SWC to compile Angular modules.

Electron

Integrations

electron-vite - An Electron CLI integrated with Vite.

Presets

vite-plugin-electron-config - Electron plugin for Vite, support for main process, renderer process and preload script.

Rollup Plugins

Vite Rollup Plugins - Compatibility list for official rollup plugins.

Included in Vite

@rollup/plugin-alias - Define and resolve aliases for bundle dependencies.
@rollup/plugin-commonjs - Convert CommonJS modules to ES6.
@rollup/plugin-dynamic-import-vars - Resolving dynamic imports that contain variables.
@rollup/plugin-json - Convert .json files to ES6 modules.

Covered by default in Vite

@rollup/plugin-babel - Compile your files with Babel.
@rollup/plugin-buble - Compile ES2015 with buble.
@rollup/plugin-data-uri - Import modules from Data URIs.
@rollup/plugin-html - Create HTML files to serve Rollup bundles.
@rollup/plugin-node-resolve - Locate and bundle third-party dependencies in node_modules.
@rollup/plugin-sucrase - Compile TypeScript, Flow, JSX, etc with Sucrase.
@rollup/plugin-typescript - Integration between Rollup and TypeScript.
@rollup/plugin-wasm - Import WebAssembly code with Rollup.
@rollup/plugin-url - Import files as data-URIs or ES Modules.

Compatible with Vite

@rollup/plugin-beep - System beeps on errors and warnings.
@rollup/plugin-dsv - Convert .csv and .tsv files into JavaScript modules with d3-dsv.
@rollup/plugin-eslint - Verify entry point and all imported files with ESLint.
@rollup/plugin-graphql - Convert .gql/.graphql files to ES6 modules.
@rollup/plugin-image - Import JPG, PNG, GIF, SVG, and WebP files (needs enforce: 'pre').
@rollup/plugin-inject - Scan modules for global variables and injects import statements where necessary.
@rollup/plugin-legacy - Add export declarations to legacy non-module scripts.
@rollup/plugin-replace - Replace strings in files while bundling.
@rollup/plugin-strip - Remove debugger statements and functions from your code.
@rollup/plugin-virtual - A Rollup plugin that loads virtual modules from memory.
@rollup/plugin-yaml - Convert YAML files to ES6 modules.
rollup-plugin-graphql-codegen - Generating type definitions for GraphQL tag template strings in worker_threads.
rollup-plugin-i18next-dts-gen - Generating type definitions from i18n JSON files are used for code hinting and validation.

Community

Check the Awesome Rollup list for community-maintained rollup plugins, and refer to the Vite docs section about rollup plugin compatibility.

SSR

Libraries

vite-ssr - Simplified Server Side Rendering with an SPA-like developer experience.
vite-plugin-ssr - 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.

Frameworks

vitedge - Edge-side rendering with fullstack utilities.
vitext - The Next.js like React framework for better User & Developer experience.
Rakkas - React framework inspired by Next.js and SvelteKit.
Vise - SSR framework with server hooks.

Integrations with Backends

Adobe Experience Manager

AEM Vite - Integration for Adobe Experience Manager and AEM SDK.

Craft CMS

Craft Vite - Plugin for integration with Craft CMS.

Django

django-vite - Integration for Django applications.
django-vite-plugin - Integration for Django applications including vite plugin.

Flask

Flask-Vite - Integration with Flask.

Ruby on Rails

vite-plugin-ruby - Configuration for Ruby backends.
Vite Ruby - Integration for Rails, Hanami, Padrino, and Rack apps.

Laravel

Laravel Vite - Integration for the Laravel framework.
Laravel Livewire Plugin - Enable hot reloading of Laravel Livewire components without losing state.
Laravel Vite Plugin - Laravel official plugin for Vite.

CakePHP

cakephp-vite - Integration for CakePHP.

WordPress

wordpress-vite-assets - Integration for WordPress themes.

Go

vite-go - Integration for Golang web apps.

Rust

create-rust-app - Integration for Rust web apps.

OctoberCMS

Vitewind - Integration for OctoberCMS.

Symfony

Vite Bundle - Integration for Symfony.

Shopify

vite-plugin-shopify - Integration for Shopify themes.

CodeIgniter

codeigniter-vite - Integration for CodeIgniter.

DDEV

ddev-viteserve - Add-on for running Vite in the PHP-oriented dev environment DDEV.

Node.js

vite-express - Integration for Express web apps.

Migrations

Vue CLI

vue-cli-plugin-vite - Use Vite on Vue CLI with minimize codebase modifications.
webpack-to-vite - Convert a webpack project to vite project, also provides conversion details to help you migrate smoothly.

React

CRA migration guide - A step-by-step guide for migrating a project from Create React App.
CRA to Nx + Vite tool - An automated tool to convert a Create React App project to use Nx + Vite + Vitest.

Projects Using Vite.js

Open Source

VitePress - Static Site Generator powered by Vite and Vue.
TroisJS - Three.js integration with Vite and Vue 3.
Slidev - Presentation Slides for Developers.
îles - Islands of Interactivity with Vue3, multi-framework.
Astro - Modern Static Site Builder.
Hathora - Multiplayer game framework.
Nhost - Nhost is an 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.

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.
npmview - A web application to view npm package files.
Layoutit Grid - Interactive CSS Grid layout generator.
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.
vite-vue3-lowcode - Low code platform using Vue 3 + TypeScript + Composition API.
Context Note - A note-taking chrome extension built by Vue3 & Vite.
Preview.js - An IDE extension to instantly preview React, Vue 2 and Vue 3 components.
react-keyboard-navigator - A suite of React components and hook for selecting from sibling components through the keyboard.
pointer-lock-movement - A pointer lock movement manager for customizing your own creative UI.