awesome-vite

⚡️ A curated list of awesome things related to Vite.js
https://github.com/vitejs/awesome-vite

Last synced: 5 days ago
JSON representation

Resources
- Official Resources
Get Started
- Official Resources
  - 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.
  - create-awesome-node-app - Scaffolding your project choosing between different templates.
  - bati - Scaffolding a Vike project.
- Templates
  - vite-tailwind - Starter template for Tailwindcss.
  - vite-ts-vue3-todo - Vue3 + TS + Vue-Router4 + Pinia2 template.
  - Vitawind Creator - Create TailwindCSS project rapidly.
  - vue-vite-ssr - Typescript, Eslint, Stylelint, Husky, Lint-staged and Commitlint.
  - vite-ts-vue2-todo - Vue2 + ts + Vue-Router3 + Pinia1 + Composition API.
  - react-vite-ssr - Mobx, Typescript, Eslint, Stylelint, Husky, Lint-staged and Commitlint.
  - vite-plugin-doubleshot - For building Node.js backend or Electron main process.
  - vite-vue2-windicss-starter - Vue 2, Vue Router, Composition API, VueUse, Windi CSS and TypeScript.
  - 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`.
  - react-vite-template - React, TypeScript, Vite, Mantine, Million, Husky, Prettier, Import Sorter, Lint-staged.
  - 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.
  - 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-ts-tailwind-starter - TypeScript, Tailwind CSS, Cypress.io e2e tests + CI.
  - fast-crud - Options-oriented crud framework, developing crud as fast as lightning.
  - 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`.
  - 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.
  - materio-free-vuetify-nuxtjs-admin-template - Vuejs 3, Vite 5, Vuetify 3 & NuxtJS 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-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.
  - Vitamin - React TypeScript, TailwindCSS, 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, TailwindCSS 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, TailwindCSS, 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, 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.
  - 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.
  - 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, TailwindCSS, 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 + TailwindCSS + 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 + ExpressJS + Vite SSR template with inbuild api feature.
  - vite-react-flow-template - React Flow starter template.
  - 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`.
  - SvelteKit - The fastest way to build Svelte apps.
  - template-vite-svelte-ts-tailwind - Svelte + TypeScript + Tailwind CSS + Prettier.
  - vite-svelte-flow-template - Svelte Flow 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-vite-vue - Electron + Vite + Vue template.
  - electron-vite-react - Electron + Vite + React template.
  - 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-reactts-electron-starter - React, Tailwind CSS, TypeScript and Electron.
  - 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-biome-tailwind-template - React, Typescript, Biome, Tailwind CSS.
  - vite-vue3-tailwind4-daisyui5-starter-template - Starter template with Vue 3 + Vite + Tailwind CSS 4 + DaisyUI 5 + Sass.
  - portfolio-vite-manifest - fullstack portfolio template with `Vite`, `React`, `TypeScript`, `Manifest`.
  - vite-swagger-ui - Swagger UI with built-in support for multiple APIs.
  - 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`.
  - React Dapp Starter - Enterprise-ready Web3 DApp starter with `TypeScript`, `TailwindCSS`, `Web3Modal`, `Wagmi`, `Shadcn UI`, `Zustand`, and `TanStack Query` for scalable decentralized applications.
  - create-domco - Starter template for domco.
  - react-boilerplate - Template for bootstrapping with `Eslint` + `Husky` + `Prettier`.
  - vite-template-react-ts-jest - `React` + `TypeScript` + `Jest`.
  - Viterts - React + TypeScript + Redux + React Router + Jest + ESLint + Airbnb + Prettier + SASS.
  - vue-pure-admin - Background management template based on Vue3, TypeScript, Tailwind CSS, element-plus.
  - ViteRC - React 18 + TypeScript + ESLint (Airbnb) + Prettier + Husky + Jest + Absolute imports + Commit linting.
  - svelte-vite-ssr - Svelte with SSR support.
  - react-component-library-template - A library template for with `React`, `TypeScript`, `Vitest`, `React Testing Library`, `Storybook`, `Biome`, `Stylelint`.
  - vite-svelte-docker-template - `Docker` + `Svelte` + `Vitest`.
  - vite-amplify - Template with SSR + Express APIs + AWS Amplify Hosting.
  - react-boilerplate - Template for bootstrapping with `Eslint` + `Husky` + `Prettier`.
  - vitesse-lite - Lightweight version of Vitesse.
  - vitesse-webext - WebExtension Vite Starter Template.
  - naive-ui-dashboard-template - UI friendly, Vue 3 + TSX + TailwindCSS 2 JIT + PostCSS + Naive UI.
  - vue3-tailwind3-website-starter - Vue3 / Vite / TailwindCSS website starter template, with guides on each page.
  - Vitesse - Opinionated starter template.
  - vue-vben-admin - Background management template based on Vue3, Ant-Design-Vue, TypeScript.
  - 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.
  - react-admin-dashboard - Dashboard template with `TypeScript`, `Vite`, `Ant Design`, `React Router`, `Zustand`, `Ant Design Charts`.
  - electron-vite-boilerplate - Support SerialPort, SQLite3 and node C/C++ addons.
  - 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-electron-plugin - High-performance, esbuild-based Vite Electron plugin.
  - vite-react-universal-template - React18 + TypeScript + `react-router-dom` + Zustand + ESlint + Prettier + Stylelint + Husky + Docker, and APIs auto importing.
  - vite-plugin-ssr-config - Configure server-side rendering (SSR) with `React`, `React-Query`, `React-Router`.
- Tauri
  - vite-plugin-fable - Template with `.fs` and `.fsproj` files and the F# compiler.
  - vite-react-neutralino-template - Neutralino + Vite + React template.
  - vite-vue3-chrome-extension-v3 - Web extension starter template for Chrome, Firefox and Edge.
  - HuLa - is a desktop instant messaging app built on `Vite 5` + `Vue 3` + `TypeScript` + `Tauri` (not just instant messaging).
  - vite-elm-template - A default template for building Elm applications.
  - github-action-template - Starter template for GitHub Actions, Typescript, ESLint, Vitest, Husky, Conventional Commits.
  - 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.
  - elm_vite_tailwind_template - Opinionated template for building Elm web apps using Tailwind CSS and Daisy UI.
Plugins
- Framework-agnostic Plugins
  - @vitejs/plugin-legacy - Legacy browser support.
  - @storybook/builder-vite - Storybook builder.
  - vite-plugin-cp - Copy files after building bundles.
  - 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-global-style - Deal with global styles for CSS, SASS, LESS and Stylus.
  - @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-external - Provides a way of excluding dependencies from the runtime code and output bundles.
  - 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.
  - 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-abbrlink - Add the abbrlink attribute to the `markdown` file in the specified directory.
  - vite-plugin-valibot-env - Validate environment variables against a Valibot schema.
  - 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-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-icons-spritesheet - Generate a spritesheet and TypeScript types from SVG icons by listening to the icons folder changes.
  - 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.
  - @yoichiro/vite-plugin-handlebars - Import of Handlebars templates `.hbs` as ES Modules.
  - @builder.io/partytown - Relocate resource intensive third-party scripts off of the main thread and into a web worker.
  - @mistjs/vite-plugin-px2viewport - A plugin that automatically converts inline styles and style files from px units to vw units.
  - @goodforyou/vite-plugin-markdown-import - Directly import Markdown files as a string, with support for front-matter attributes as an object.
  - 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-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.
  - vite-plugin-eslint2 - Runs ESLint synchronously/asynchronously.
  - vite-plugin-static-filehash - It can help the program improve the cache hit rate.
  - 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`.
  - unplugin-auto-import - On-demand API auto-importing.
  - vite-plugin-inspect - Inspect the intermediate state of Vite plugins.
  - @yuanjianming/unplugin-image-convert - Image multi format conversion plugin based on sharp.js.
  - 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-plugin-multi-pages - Multi Pages Support，can build src/pages anyPage，can set prefixName.
  - vite-multiple-assets - Add support for multiple public asset directories.
  - unplugin-icons - Access thousands of icons as components.
  - 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-page-html - Multi-page generic template plugin, support `ejs` template syntax. Similar to `vue-cli` pages configuration.
  - vite-plugin-pwa - Zero-config PWA.
  - 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-imagetools - Load and transform images using url query parameters.
  - vite-compression-plugin - Use Node.js stream compress file to gzip or more.
  - unplugin-imagemin - High performance compressed Picture based on squoosh and sharp.
  - vite-plugin-turbo-console - Enhance the readability of `console.log()`.
  - vite-plugin-replace-lodash - Replacing the import of `lodash` with `lodash-es` is more beneficial to tree-shaking.
  - vite-plugin-api - Generate route mapping for API Routes services from the directory tree.
  - vite-plugin-builder - Enable dual compilation for Server-Side Rendering (SSR) and Client-Side Rendering (CSR).
  - genaicode/vite-plugin - A plugin that embeds an AI coding assistant into the app UI.
  - 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.
  - @storybook/builder-vite - Storybook builder.
- Vue
  - v3 - Official Vue 3 JSX support.
  - v3 - Integration for Vue I18n.
  - v3 - Official Vue 3 support.
  - v2 - Official Vue 2 support.
  - v2 - Official Vue 2 JSX support.
  - v2 - Vue 2 integration.
  - v23 - File system based route generator.
  - v3 - Official experimental file based routing.
  - v3 - File-based routing, similar to SvelteKit and Next.js App Router.
  - v23 - Markdown as Vue components / Vue components in Markdown.
  - v3 - Load SVG files as Vue components.
  - v2 - Load SVG files as Vue components.
  - v3 - Load SVG files as a Vue component, supporting svg file HMR and Typescript intelligence prompt.
  - v23 - Load Markdown files, with Mermaid rendering support.
  - v3 - Converting the inline style px to vw.
  - v3 - Load i18n translation message files.
  - v3 - Auto import i18n config file for components.
  - v3 - Implicit usage of CSS Modules for template and script SFC tags with static replacement.
  - v3 - GraphQL Tags for your Vue SFC.
  - v2 - Compatible without '.vue' suffix.
  - v23 - Jump to local IDE source code while click the element of browser.
  - v23 - Serve ".vue" files as static assets.
  - v3 - Designed to enhance the Vue developer experience.
  - v3 - Nest SFCs inside your SFC.
  - v3 - Extract the style tags in template.
  - v2 - Enabling `<script setup>` syntax for Vue 2.
  - v3 - Server-side generation.
  - v3 - Markdown code preview.
  - v23 - On-demand components auto-importing.
  - v3 - A tool to generate routes.
  - v3 - Code preview for Vue SFC in Markdown, supports online editing.
- React
  - @vitejs/plugin-react - Official React support that uses Babel.
  - @vitejs/plugin-react-swc - Official React support that uses SWC.
  - unplugin-remix-router - Generates a React Router file, that depends on Remix v2 file-based router convention.
  - vite-plugin-svgr - Transform SVGs into React components.
  - vite-plugin-react-rich-svg - Seamless SVG loader with versatile import options; such as DataURI, SVGR Component and Raw HTML Code.
  - vite-plugin-react-pages - A Vite framework for building React app.
  - vite-plugin-react-click-to-component - Uses Vite's launch middleware to enable alt+click to go to component.
  - vite-react-ssg - Static-site generation for React.
  - @stylin/vite-plugin - Transform CSS and SCSS modules into React components.
  - vite-plugin-remix-flat-routes - Remix-flat-routes convention-based routing, compatible with react-router data-api routing.
  - generouted - Client-side type-safe file-based routing and global modals — supports layouts, loaders, code-splitting and more.
- Svelte
  - vite-plugin-kit-routes - Generates a file with all the routes, params, actions of your SvelteKit App.
  - vite-plugin-svelte - Adds Svelte support. Official plugin of Svelte team.
- Angular
  - @nxext/angular-vite - A plugin that uses SWC to compile Angular modules.
- Rollup Plugins
  - Vite Rollup Plugins - Compatibility list for official rollup plugins.
  - @rollup/plugin-dynamic-import-vars - Resolving dynamic imports that contain variables.
  - @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.
  - @rollup/plugin-beep - System beeps on errors and warnings.
  - @rollup/plugin-graphql - Convert .gql/.graphql files to ES6 modules.
  - @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-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.
  - Awesome Rollup list - maintained rollup plugins, and refer to the Vite docs section about [rollup plugin compatibility](https://vitejs.dev/guide/api-plugin.html#rollup-plugin-compatiblity).
  - @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.
  - @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-virtual - A Rollup plugin that loads virtual modules from memory.
  - @rollup/plugin-yaml - Convert YAML files to ES6 modules.
- Preact
  - @preact/preset-vite - Preact preset. HMR, automatic Preact inject, removal of DevTools in prod.
- Solid
  - vite-plugin-solid-svg - Import SVG files as Solid.js Components.
  - generouted - Client-side type-safe file-based routing and global modals — supports layouts, loaders, code-splitting and more.
  - vite-plugin-solid - Provides JSX transformation for Solid.
- Elm
  - vite-plugin-elm - A plugin that enables you to compile an Elm module.
- Fastify
  - vite-plugin-fastify - Fastify plugin for Vite with Hot-module Replacement.
  - vite-plugin-fastify-routes - File-based routing, similar to SvelteKit and Next.js App Router.
- Electron
  - electron-vite - An Electron CLI integrated with Vite.
SSR
- Libraries
  - vite-plugin-ssr - Like Nuxt/Next.js but as a do-one-thing-do-it-well plugin. ![react] ![vue3] ![vue2] ![svelte]
  - Vike - Like Nuxt/Next.js but as a do-one-thing-do-it-well plugin. ![react] ![vue3] ![vue2] ![svelte]
  - ssr - A Server Side Rendering framework combined with Webpack/Vite. ![react] ![vue3] ![vue2]
  - 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. ![vue3]
  - vite-ssr-boost - Server side rendering library for create awesome app based on `react-router`. ![react]
  - 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
  - Rakkas - React framework inspired by Next.js and SvelteKit. ![react]
  - Vise - SSR framework with server hooks. ![react] ![vue3]
  - @fastify/fastify-dx - Allowing you to serve static or live (SSR).
  - vite-plugin-vercel - Vercel adapter.
  - vite-vlugin-vercel-skew-protection - Helps configure Vercel Skew Protection.
Integrations with Backends
- 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.
- Shopify
  - vite-plugin-shopify - Integration for Shopify themes.
  - vite-plugin-shopify - Integration for Shopify themes.
- 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.
- Laravel
  - Laravel Vite - Integration for the Laravel framework.
  - Laravel Vite Plugin - Laravel official plugin for Vite.
- WordPress
  - wordpress-vite-assets - Integration for WordPress themes.
  - Kima - Starter theme with Twig.
  - WordPlate - Starter app with Composer.
- Go
  - vite - Integration with Go.
- Rust
  - create-rust-app - Integration for Rust web apps.
  - vite-rs - Embed assets in your Rust binary.
- Symfony
  - Vite Bundle - Integration for Symfony.
- Node.js
  - vite-express - Integration for Express web apps.
  - vite-manifest-parser - Parses manifest.json to generate HTML script and link tags.
- ASP.NET Core
  - Vite.AspNetCore - Integration with ASP.NET Core projects.
- Drupal
  - vite-plugin-twig-drupal - Support for Twig with includes/embeds and Drupal specific twig features.
  - Vite module - Backend integration for 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.
- TYPO3 CMS
  - vite-plugin-typo3 - Frontend integration for TYPO3 CMS.
  - vite-asset-collector for TYPO3 - Backend integration for TYPO3 CMS.
- CakePHP
  - cakephp-vite - Integration for CakePHP.
Migrations
- React
  - CRA migration guide - A step-by-step guide for migrating a project from Create React App.
  - Viject - One-shot migration tool from Create React App.
Projects Using Vite.js
- Apps/Websites
  - aitrack.work - A task-based time tracker for everyday use.
  - Preview.js - An IDE extension to instantly preview React, Vue 2 and Vue 3 components.
  - Awesome CN Café - Web application for Awesome CN Café.
  - Todo Example - Todo app with routing and state management.
  - 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.
  - 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`.
  - Icônes - Icon explorer with instant search.
  - macOS in Svelte - macOS Desktop experience for Web in Svelte.
- Open Source
  - VitePress - Static Site Generator powered by Vite and Vue.
  - Slidev - Presentation Slides for Developers.
  - Astro - Modern Static Site Builder.
  - 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.
  - 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.
  - Hathora - Multiplayer game framework.
  - Compiiile - Preview or host folders containing Markdown files with full-text search and presentation slides.

Programming Languages

TypeScript 297 JavaScript 49 Vue 20 PHP 10 HTML 9 Rust 2 Elm 2 Go 1 Ruby 1 Python 1

awesome-vite

Resources

Official Resources

Get Started

Official Resources

Templates

Tauri

Plugins

Framework-agnostic Plugins

Vue

React

Svelte

Angular

Rollup Plugins

Preact

Solid

Elm

Fastify

Electron

SSR

Libraries

Frameworks

Integrations with Backends

Flask

Ruby on Rails

Shopify

Craft CMS

Django

Laravel

WordPress

Go

Rust

Symfony

Node.js

ASP.NET Core

Drupal

PHP

TYPO3 CMS

CakePHP

Migrations

React

Projects Using Vite.js

Apps/Websites

Open Source