Skip to content

Latest commit

 

History

History
814 lines (617 loc) · 115 KB

README.md

File metadata and controls

814 lines (617 loc) · 115 KB


logo of awesome-vite repository

Awesome Vite.js

A curated list of awesome things related to  68399⭐   6167🍴 Vite.js

Awesome

Table of Contents

Use the "Table of Contents" menu on the top-right corner to explore the list.

Resources

Official Resources

Get Started

  •  68399⭐   6167🍴 create-vite) - Scaffolding Your First Vite Project.
  •    158⭐     28🍴 create-vitawind) - Scaffolding for TailwindCSS project.
  •    173⭐     21🍴 create-electron-vite) - Scaffolding Your Electron + Vite Project.
  •    222⭐     32🍴 create-vite-app) - Scaffolding Your Out Of The Box Vite Project.
  •  23578⭐   2358🍴 create-nx-workspace) - Scaffolding a Nx + React + Vite + Vitest.
  •    260⭐     14🍴 bati) - Scaffolding a Vike project.
  •     69⭐      3🍴 create-awesome-node-app) - Scaffolding your project choosing between different templates.

Templates

Vanilla

  •    291⭐     33🍴 vite-vanilla-ts-lib-starter) - Starter for library (CJS, ESM, IIFE) with TypeScript, ESLint, Stylelint, Prettier, Jest, Husky + lint-staged.
  •     55⭐      5🍴 vite-tailwind-nojs-starter) - NoJS Tailwind CSS starter template.
  •     11⭐      2🍴 vite-tailwind-stimulus-starter) - Starter template for Tailwind CSS and Stimulus controllers.
  •     18⭐      1🍴 vite-phaser-ts) - Starter template with Phaser and Typescript.
  •      5⭐      1🍴 vite-tinybase) - Starter template for TinyBase.
  •      8⭐      1🍴 vite-tinybase-ts) - Starter template for TinyBase and TypeScript.
  •     40⭐      3🍴 vite-vanilla-js-template) - Starter template ESlint, Prettier, PostCSS, Nesting, Autoprefixer, CSS Nano, CSS Reset.
  •     41⭐      2🍴 vite-starter-markup-template) - Starter template for Markup.
  •     32⭐      0🍴 create-domco) - Starter template for domco SSG.
  •     26⭐      3🍴 vite-vanilla-library-template) - Starter template TypeScript, ESLint, Vitest, Husky, Conventional Commits, GitHub actions.
  •      3⭐      0🍴 vite-alpine-template) - Starter template for Alpine.
  •     10⭐      0🍴 vite-ts-lib-starter) - Starter template for libraries with TypeScript, Bun, Vitest, Prettier, Renovate and np.
  •      2⭐      1🍴 vite-swagger-ui) - Swagger UI with built-in support for multiple APIs.

Vue 3

  •   8865⭐    933🍴 Vitesse) - Opinionated starter template.
  •    429⭐     76🍴 vite-ts-tailwind-starter) - TypeScript, Tailwind CSS, Cypress.io e2e tests + CI.
  •  25140⭐   6851🍴 vue-vben-admin) - Background management template based on Vue3, Ant-Design-Vue, TypeScript.
  •  16215⭐   3075🍴 vue-pure-admin) - Background management template based on Vue3, TypeScript, Tailwind CSS, element-plus.
  •    918⭐     93🍴 fast-crud) - Options-oriented crud framework, developing crud as fast as lightning.
  •   1111⭐    216🍴 vitesse-lite) - Lightweight version of Vitesse.
  •   2896⭐    224🍴 vitesse-webext) - WebExtension Vite Starter Template.
  •     59⭐     10🍴 naive-ui-dashboard-template) - UI friendly, Vue 3 + TSX + TailwindCSS 2 JIT + PostCSS + Naive UI.
  • 🌎 Vitawind Creator - Create TailwindCSS project rapidly.
  •      ?⭐      ?🍴 vue3-tailwind3-website-starter) - Vue3 / Vite / TailwindCSS website starter template, with guides on each page.
  •    255⭐     46🍴 boot-vue) - Starter template with TypeScript + UnoCSS + DaisyUI + Vue Router + Pinia.
  •   3254⭐    477🍴 Vue Naive) - Admin template, base on Vue 3 + Pinia + Naive UI.
  •   1726⭐    278🍴 vue-admin-box) - Admin template, based on Vue 3 + Element-plus.
  •     16⭐      3🍴 vite-vue-proste) - Pinia + Typescript + Vue-Router4 + Vitest + Vue-Test-Utils + Vue-Query + Sass + ESLint + Stylelint + Prettier + project presets.
  •     27⭐      4🍴 vue-vite-ssr) - Typescript, Eslint, Stylelint, Husky, Lint-staged and Commitlint.
  •   1176⭐    241🍴 vue3-vant-mobile) - Vite5 + Vue3 + Vant4 + Pinia + Vue-Router4 + TypeScript Mobile Template.
  •     13⭐      2🍴 vue-vite-tw-ts) - Vue 3 + Vite + Vitest + Cypress E2E + Naive UI + Pinia + Vue Router.
  •    152⭐     42🍴 vite-vue-js-starter-template) - Vite + Vue3 + JavaScript + Vue Router + Pinia + TDesign + ESLint + Stylelint + Prettier Simple Template.
  •    110⭐     21🍴 vue-xs-admin) - Based on Vue3, Vite3 ElementPlus, TypeScript, Pinia, VueRouter.
  •     19⭐      1🍴 vulcan) - The template for mobile application. Vite, Vue 3, TypeScript, Sass, i18n, Vitest&Cypress, Pinia, APIs&Mock, ESLint, Prettier, auto-importing.
  •    690⭐    121🍴 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.
  •     22⭐      6🍴 vue3-quick-start) - Building an engineered Vue 3 project, integrated with Vite + Vue3 + TypeScript + ESLint + Prettier + Commitizen + Husky + LintStaged + CommitLint + AutoImport + ReleaseIt.
  •     23⭐      2🍴 antd-vue3-admin) - A starter template based on Vue3, Vite4, TS5 and Ant-Design-Vue4.
  •     32⭐      6🍴 vue-file-upload) - A file management system built with Vue3 and TypeScript that allows for single and multiple file uploading with a preview feature.
  •    122⭐     14🍴 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.
  •     52⭐     14🍴 materio-free-vuetify-nuxtjs-admin-template) - Vuejs 3, Vite 5, Vuetify 3 & NuxtJS 3.
  •      7⭐      0🍴 vite-plugin-vue-style-bundler) - Auto bundle Vue/sfc styles into JavaScript.
  •    403⭐     60🍴 celeris-web) - Template based on Vite + Vue3 + TypeScript + Vue-Router + Pinia + Unocss + Naive UI + pnpm Monorepo.
  •    125⭐     14🍴 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.

Vue 2

  •    195⭐     37🍴 vite-vue2-windicss-starter) - Vue 2, Vue Router, Composition API, VueUse, Windi CSS and TypeScript.
  •     34⭐      5🍴 vite-vue2-ts-starter) - Vue2 TypeScript starter template using vue-property-decorator, vue-router, Vuex.
  •     84⭐     30🍴 vite-vue2-ts-vuetify-starter) - It is the above vite-vue2-ts-starter with Vuetify and its optimized settings. Includes basic templates.
  •    148⭐     14🍴 vitify-admin) - Vuetify admin starter template with full TypeScript support and intellisense of Vuetify components.

React

  •    548⭐     50🍴 Vitamin) - React TypeScript, TailwindCSS, SPA + PWA, Cypress and CI.
  •     90⭐     55🍴 vite-template-react) - A Create React App-like template.
  •    127⭐     14🍴 vitejs-template-react-rescript) - React + ReScript.
  •    165⭐     27🍴 template-vite-react) - A minimal React Vite starter template.
  •    571⭐    107🍴 reactjs-vite-tailwindcss-boilerplate) - React 18, TypeScript, Vitest, Testing Library, TailwindCSS 3, Eslint and Prettier.
  •    280⭐     57🍴 vite-react-ts-tailwind-firebase-starter) - Starter using Vite + React + TypeScript + Tailwind CSS (daisyUI) + Firebase (v9) + Prettier + ESLint.
  •    128⭐     30🍴 create-react-app-vite) - React, TypeScript, TailwindCSS, MSW, Vitest, React Testing Library, ESLint, Prettier, GitHub Actions.
  •   2394⭐    350🍴 chrome-extension-boilerplate-react-vite) - React + TypeScript + SASS + Prettier + ESLint + GitHub Actions + HMR(Hot Module Reload) + Turborepo + Chrome Extension Manifest v3.
  •    133⭐     14🍴 vite-rtk-query) - React, TypeScript, Redux Toolkit, RTK Query, TailwindCSS, MSW, Jest, React Testing Library, ESLint, Prettier.
  •     19⭐      4🍴 vite-react-proste) - React + TypeScript + react-router-dom + Recoil + SASS + Testing Library + react-query + ESLint + Stylelint + Prettier.
  •    580⭐    132🍴 React-PWA) - React v18, TypeScript, Vite, React Router v6, MUI v5, Recoil, PWA, Eslint, Prettier, Husky, lint-staged, https localhost and more.
  •     27⭐      4🍴 react-vite-ssr) - Mobx, Typescript, Eslint, Stylelint, Husky, Lint-staged and Commitlint.
  •      ?⭐      ?🍴 Viterts) - React + TypeScript + Redux + React Router + Jest + ESLint + Airbnb + Prettier + SASS.
  •     58⭐     12🍴 ViteRC) - React 18 + TypeScript + ESLint (Airbnb) + Prettier + Husky + Jest + Absolute imports + Commit linting.
  •  22734⭐   4154🍴 React Starter Kit) - Jamstack, React, React Router, Material UI, Firebase Auth, TypeScript, ESLint, Prettier, Jest, GitHub Actions.
  •     78⭐     14🍴 vite-mern-template) - React 18 + TypeScript + Vite + Redux Toolkit + ESLint + React Router DOM + Axios + React Icons + React Toastify + Express + Mongoose.
  •     29⭐      9🍴 Varsarr) - React, Typescript, Styled-Components, Recoil, React-Query, Axios, Absolute imports.
  •     44⭐      8🍴 viterjs-template) - React + JavaScript + Redux + Material UI + Axios + ESLint + Prettier.
  •    102⭐      8🍴 react-vite-ts-boilerplate) - React 18, TypeScript, SCSS, ESLint, Prettier, Vitest.
  •     54⭐     17🍴 vite-react-universal-template) - React18 + TypeScript + react-router-dom + Zustand + ESlint + Prettier + Stylelint + Husky + Docker, and APIs auto importing.
  •     29⭐      4🍴 react-vite-template) - A react project template.
  •     37⭐     14🍴 react-xs-admin) - The background management system template developed based on React18 + ReactRouteV6 + Vite + And Design + ReactIntl + ReactRedux + Emulation.
  •     50⭐     13🍴 vite-mui-ts) - React + TypeScript + Redux + Material UI + RRD + ESLint + Prettier.
  •     54⭐     12🍴 template-vite-react-ts-tailwind) - React + TypeScript + Tailwind CSS + Eslint + Prettier.
  •     84⭐     10🍴 vite-react-ts-template) - React 18, TypeScript, ESlint, Prettier, Dev Container, Vitest, Storybook, Playwright, MSW, React Router 6, React Query, Chakra UI, Zustand.
  •     13⭐      7🍴 react-vite-tailwindcss-template) - React, JavaScript, TailwindCSS, ESlint, Prettier, Pre-commit.
  •      5⭐      1🍴 vite-tinybase-react) - Starter template for TinyBase and React.
  •      9⭐      0🍴 vite-tinybase-ts-react) - Starter template for TinyBase, TypeScript, and React.
  •     27⭐      5🍴 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.
  •     69⭐     15🍴 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.
  •     11⭐      0🍴 template-tauri-vite-react-ts-tailwind) - Template for Tauri + React + Typescript + TailwindCSS + Prettier + ESLint build-in.
  •    101⭐     21🍴 vite-react-chakra-starter) - Starter template for creating React App with TypeScript and Chakra UI. Configured with ESLint, Prettier, and Husky.
  •     38⭐      2🍴 vite-react-tailwind-starter) - Starter template for creating React App with TypeScript and Tailwind CSS with Shadcn UI. Configured with ESLint, Prettier, and Husky.
  •     67⭐      2🍴 monorepo-template-react) - React + Typescript template for SSR, SPG, SPA and API provision.
  •      9⭐      5🍴 vite-react-dapp-template) - Starter template for decentralized app frontend development with preconfigured Wallet Authentication, i18n and UI features.
  •     40⭐      8🍴 vite-express-ssr-ts) - React + Typescript + ExpressJS + Vite SSR template with inbuild api feature.
  •     44⭐     20🍴 vite-react-flow-template) - React Flow starter template.
  •     10⭐      1🍴 react-vite-template) - React, TypeScript, Vite, Mantine, Million, Husky, Prettier, Import Sorter, Lint-staged.
  •      2⭐      0🍴 gravity-ui-vite-template) - Template with Gravity UI ecosystem (React, TypeScript, Gravity UI, Vite, Husky, ESLint, Prettier, Lint-staged).
  •     42⭐      4🍴 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.
  •      1⭐      1🍴 vite-template-awesome-soho) - DevContainer Template for creating React 18, Javascript + JSDoc, React Router, Ant Design, ESLint, EditorConfig, .env, SonarLint, Vitest.
  •      3⭐      1🍴 react-component-library-vite) - A library template for with React, Javascript,Styled-Components, Vitest, React Testing Library, Storybook.
  •     10⭐      1🍴 ReTail) - Starter template for building Full Stack WEB applications with Remix using TypeScript, Tailwind CSS, Prettier and ESLint.
  •      4⭐      1🍴 vite-react-redux-saga-typescript) - Starter template with React, TypeScript, Redux (Redux Toolkit), Saga, React Testing Library, ESLint, Prettier and Husky.
  •      7⭐      2🍴 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.
  •      6⭐      0🍴 vite-react-framer-starter) - Starter template with React, TypeScript, Framer Motion, Tailwind CSS, ESLint, and Prettier.
  •      4⭐      1🍴 vite-jsx-remove-attributes) - Remove the data-testid (configurable) from production builds.
  •      3⭐      4🍴 React Tanning) - Starter template with React + Vite + TypeScript + TanStack + Tailwind.
  •      4⭐      1🍴 Reactive) - React starter template with Remix file-based routing convention for react-router, UnoCSS, LinguiJs, zustand, and ton of features.
  •      2⭐      0🍴 RVTGB) - React + TypeScript starter template, with file-based routing with Generouted and Biome.
  •      3⭐      0🍴 vite-biome-tailwind-template) - React, Typescript, Biome, Tailwind CSS.
  •      8⭐      0🍴 React Dapp Starter) - Enterprise-ready Web3 DApp starter with TypeScript, TailwindCSS, Web3Modal, Wagmi, Shadcn UI, Zustand, and TanStack Query for scalable decentralized applications.
  •      1⭐      2🍴 vite-template-react-ts-jest) - React + TypeScript + Jest.
  •      5⭐      2🍴 vite-amplify) - Template with SSR + Express APIs + AWS Amplify Hosting.
  •      1⭐      0🍴 react-component-library-template) - A library template for with React, TypeScript, Vitest, React Testing Library, Storybook, Biome, Stylelint.

Svelte

Solid

  •     64⭐      1🍴 vitesse-solid) - Opinionated Vite + SolidJS Starter Template. Includes TypeScript, ESLint, Prettier, UnoCSS, HopeUI and more.
  •      7⭐      0🍴 vitesse-lite-solid) - Lightweight Vite Starter Template for SolidJS.

Electron

  •   4272⭐    563🍴 electron-vite-vue) - Electron + Vite + Vue template.
  •   1900⭐    227🍴 electron-vite-react) - Electron + Vite + React template.
  •    206⭐     27🍴 electron-vite-boilerplate) - Support SerialPort, SQLite3 and node C/C++ addons.
  •    411⭐    110🍴 electron-vite-template) - Electron 13, Vue 3 and TypeScript. Make your desktop development easier.
  •    187⭐     19🍴 fast-vite-electron) - Vue3 + Vite + Electron with esbuild.
  •    305⭐     33🍴 fast-vite-nestjs-electron) - Vue3 + Vite + Electron + Nestjs with esbuild.
  •    181⭐     23🍴 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.
  •    309⭐     93🍴 vite-reactts-electron-starter) - React, Tailwind CSS, TypeScript and Electron.
  •    591⭐    110🍴 electron-vue-template) - Electron template with TypeScript, including Electron Builder.
  •     17⭐      1🍴 Vitron) - Build beautiful (win, linux, mac) desktop apps for modern web projects with vite and electron.
  •    253⭐     21🍴 Vutron) - Electron + Vite + Vue 3 + Pinia (TypeScript) template.
  •     54⭐      7🍴 vite-electron-plugin) - High-performance, esbuild-based Vite Electron plugin.
  •    129⭐     12🍴 vite-plugin-doubleshot) - For building Node.js backend or Electron main process.

Neutralino

Elm

  •    130⭐     14🍴 vite-elm-template) - A default template for building Elm applications.
  •     39⭐      2🍴 elm_vite_tailwind_template) - Opinionated template for building Elm web apps using Tailwind CSS and Daisy UI.

Petite-Vue

VanJS

GitHub

  •     12⭐      0🍴 github-action-template) - Starter template for GitHub Actions, Typescript, ESLint, Vitest, Husky, Conventional Commits.

Others

Plugins

Framework-agnostic Plugins

Integrations

  •  68399⭐   6167🍴 @vitejs/plugin-legacy) - Legacy browser support.
  •   3199⭐    208🍴 vite-plugin-pwa) - Zero-config PWA.
  •    853⭐     65🍴 vite-plugin-windicss) - Windi CSS integration.
  •    999⭐     48🍴 vite-plugin-node) - Integration with Node.js backend servers.
  •    232⭐     37🍴 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.
  •    992⭐     86🍴 vite-plugin-checker) - Fast run checkers (TypeScript/VLS/vue-tsc, etc.) in worker threads with overlay and terminal hint.
  •    159⭐      4🍴 vite-plugin-tauri) - Integrate Tauri in a Vite project to build cross-platform apps.
  •   2367⭐    240🍴 vite-plugin-federation) - Support Module Federation, Inspired by Webpack Module Federation feature.
  •    232⭐     36🍴 vite-plugin-wasm-pack) - Integration with rust   6302⭐    409🍴 wasm-pack), the simple way.
  •    173⭐     18🍴 vite-plugin-comlink) - Use WebWorkers with the power of  11369⭐    390🍴 Comlink) to make them enjoyable.
  •    120⭐     18🍴 vite-plugin-sass-dts) - This is a plugin that automatically creates a type file when using the CSS module type-safely.
  •     31⭐     10🍴 vite-plugin-ali-oss) - Upload the production files bundled in the project to Ali OSS, except for HTML.
  •    304⭐     11🍴 vite-plugin-webfont-dl) - Downloads and injects webfonts (Google Fonts) to improve website's performance.
  •     53⭐     14🍴 vite-plugin-babel) - Babel integration for both build and server to support f.ex. decorators or class fields in pure JS/JSX files.
  •    687⭐     56🍴 vite-plugin-electron) - Integrate Vite and Electron.
  •     36⭐      2🍴 vite-plugin-optimizer) - Manually Pre-Bundling.
  •     24⭐      0🍴 vite-plugin-babel-compiler) - The plugin works with Babel compiler.
  •    108⭐     17🍴 vite-plugin-commonjs) - A pure JavaScript implementation for CommonJs.
  •     82⭐      7🍴 vite-plugin-mpa-plus) - More flexible MPA (multi-page application) supports html templates, path rewriting.
  •     25⭐      2🍴 vite-plugin-multi-pages) - Multi Pages Support,can build src/pages anyPage,can set prefixName.
  •     22⭐      2🍴 vite-plugin-html-template-mpa) - Multi Pages Common template support.
  •      5⭐      1🍴 vite-plugin-vconsole-mpa) - Multi Pages Vconsole supports,simple config.
  •     66⭐      3🍴 vite-plugin-browser-sync) - BrowserSync.
  •     60⭐      9🍴 vite-plugin-jspm) - Resolves dependencies independently from CDN providers using import maps and es-module-shims.
  •      9⭐      1🍴 vite-plugin-env-switch) - Switch project env and restart vite server without command line operation.
  •    118⭐     15🍴 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.
  •     23⭐      1🍴 vite-plugin-stylelint) - Runs Stylelint synchronously/asynchronously.
  •      6⭐      0🍴 Vite-plugin-graphiql) - Integration for GraphiQL IDE.
  •      9⭐      1🍴 vite-plugin-graphql-server) - Bootstrap a local GraphQL server for testing and documentaion.
  •    342⭐     24🍴 unplugin-fonts) - Load font from Typekit, Google Fonts, Fontsource or your own custom one.
  •     24⭐      2🍴 unplugin-config) - Configuration file generator for web apps, allowing external customization of global variables without repackaging.
  •     42⭐      2🍴 vite-plugin-svg-spritemap) - Generates a SVG spritemap from multiple .svg files.
  •      3⭐      7🍴 vite-plugin-dc) - Integration with @dvgis/dc-sdk library.
  •     53⭐      4🍴 @spiriit/vite-plugin-svg-spritemap) - Pack your SVG files in one spritemap file and use them with <svg>/<img> and directly in your CSS.
  •      8⭐      0🍴 vite-plugin-auto-mpa-html) - A file directory-based automated multi-page build plugin that supports HTML templates using EJS.
  •     55⭐      7🍴 vite-plugin-cloudflare-functions) - Cloudflare pages function integration.
  •  84576⭐   9300🍴 @storybook/builder-vite) - Storybook builder.
  •  13061⭐    434🍴 @builder.io/partytown) - Relocate resource intensive third-party scripts off of the main thread and into a web worker.
  •      7⭐      0🍴 vite-plugin-dynamic-proxy) - Automatically configure reverse proxies based on URL parameters.
  •     28⭐      0🍴 unplugin-auto-export) - Automates the maintenance of export statements in the index.ts file.
  •    722⭐     35🍴 remix-development-tools) - Plugin for Remix.run development tools.
  •     55⭐      0🍴 vite-plugin-legacy-swc) - Legacy browser support with SWC.
  •     45⭐      5🍴 vite-plugin-biome) - Biome linter.
  •     23⭐      3🍴 vite-plugin-oxlint) - Oxlint linter.
  •      5⭐      0🍴 @tomjs/vite-plugin-electron) - Easily develop Electron applications.
  •     36⭐      6🍴 @tomjs/vite-plugin-vscode) - Easily use web frameworks to develop VSCode Extension's Webview, and support HMR and Debug.
  •      7⭐      1🍴 vite-plugin-px-rem-vw) - Integrate PostCSS plugin pxTorem and pxTovw.
  •      1⭐      0🍴 vite-plugin-mpg) - Simple configuration of multi page applications.
  •     15⭐      1🍴 vite-plugin-pagefind) - Integrate pagefind search.
  •     11⭐      1🍴 @mistjs/vite-plugin-px2viewport) - A plugin that automatically converts inline styles and style files from px units to vw units.
  •     18⭐      9🍴 vite-multiple-assets) - Add support for multiple public asset directories.

Loaders

  •   4082⭐    145🍴 unplugin-icons) - Access thousands of icons as components.
  •    933⭐     59🍴 vite-imagetools) - Load and transform images using url query parameters.
  •    131⭐     13🍴 vite-plugin-radar) - All in one analytics loader (with 7+ providers supported).
  •    319⭐     21🍴 vite-plugin-glsl) - Import shader file chunks.
  •     29⭐      1🍴 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.
  •     34⭐      0🍴 vite-plugin-php) - Load and process PHP-entry files instead of default index.html.
  •     48⭐      2🍴 vite-plugin-lqip) - Generate low quality image placeholders (LQIP).
  •      2⭐      0🍴 vite-plugin-ms-clarity) - Inject the Microsoft Clarity script to index.html.
  •     11⭐      0🍴 @cyco130/vite-plugin-mdx) - Import MDX.
  •     11⭐      0🍴 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.
  •     15⭐      1🍴 vite-plugin-dir2json) - Convert the directory structure into json data containing supported file paths.

Bundling

Transformers

  •    591⭐     96🍴 vite-plugin-html) - Plugin to minimize and use ejs template syntax in index.html.
  •     21⭐      3🍴 vite-plugin-ts-nameof) - Ability to resolve    493⭐     23🍴 nameof) in TypeScript.
  •    184⭐     22🍴 vite-plugin-handlebars) - Process HTML files with Handlebars.
  •     73⭐      9🍴 vite-plugin-virtual-html) - Make Vite MPA consistent with @vue/cli.
  •    129⭐     18🍴 vite-plugin-content) - Convert yaml, xml, ini, toml, csv, plist and properties files to ES6 modules.
  •     72⭐      6🍴 vite-plugin-require) - A Vite plugin that supports require by code transforming.
  •    129⭐     18🍴 vite-plugin-global-style) - Deal with global styles for CSS, SASS, LESS and Stylus.
  •     30⭐      0🍴 vite-plugin-shared-modules) - Share node_modules in monorepos.
  •     38⭐      3🍴 vite-plugin-pug-transformer) - Pug template engine support.
  •    239⭐     14🍴 @import-meta-env/unplugin) - Inject environment variables into the import.meta.env object after building the application instead of statically replacing it during production.
  •     75⭐     15🍴 @modyfi/vite-plugin-yaml) - Transform YAML files to ESM with schema validation and error reporting.
  •     58⭐      3🍴 vite-plugin-html-inject) - Split the index.html into smaller reusable pieces.
  •     27⭐      4🍴 unplugin-inject-preload) - Inject <link rel="preload"> to your index.html based on your build assets.
  •      6⭐      2🍴 @vituum/vite-plugin-handlebars) - Handlebars template engine support, transforms .hbs templates to .html.
  •      6⭐      0🍴 @vituum/vite-plugin-pug) - Pug template engine support, transforms .pug templates to .html.
  •     11⭐      3🍴 @vituum/vite-plugin-nunjucks) - Nunjucks template engine support, transforms .njk templates to .html.
  •     10⭐      1🍴 @vituum/vite-plugin-liquid) - Liquid template engine support, transforms .liquid templates to .html.
  •     18⭐      1🍴 @vituum/vite-plugin-twig) - Twig template engine support, transforms .twig templates to .html.
  •      1⭐      0🍴 @vituum/vite-plugin-latte) - Latte template engine support, transforms .latte templates to .html.
  •      9⭐      0🍴 @vituum/vite-plugin-posthtml) - PostHTML support, transforms syntax to .html.
  •      5⭐      1🍴 @vituum/vite-plugin-juice) - Juice support, transforms .css to inline styles in .html.
  •     57⭐      7🍴 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.
  •     27⭐      1🍴 vite-plugin-css-export) - Export variables from CSS to JavaScript, and support nested rules.
  •     30⭐      3🍴 vite-plugin-optimize-css-modules) - Generate the smallest possible CSS-Classes when CSS-Modules are used.
  •      8⭐      0🍴 vite-plugin-generate-html) - Define separate output files for JavaScript and CSS bundles.
  •    521⭐     12🍴 vite-plugin-turbo-console) - Enhance the readability of console.log().
  •     19⭐      1🍴 vite-plugin-html-injection) - Inject HTML, JavaScript and CSS code snippets into the index.html.
  •     16⭐      2🍴 vite-plugin-typescript-transform) - Applies the TypeScript compiler during Vite's transform build phase.
  •     12⭐      3🍴 vite-plugin-public-typescript) - Inject Typescript into index.html.
  •     20⭐      1🍴 unplugin-generate-component-name) - Automatically generate component's name.
  •     94⭐      9🍴 @laynezh/vite-plugin-lib-assets) - Extracts resource files referenced in library mode instead of embedded them as base64.
  •     36⭐      2🍴 css-media-splitter/vite-plugin) - Extracts all @media At-rules into a dedicated .css files and download it only when matches the media query.
  •      4⭐      0🍴 @tomjs/vite-plugin-html) - Support compression, loading, CDN and others for index.html.
  •      3⭐      0🍴 @tomjs/vite-plugin-iconify) - Inject the global variable IconifyProviders into index.html for iconify, and support local area network and custom url.
  •     98⭐      6🍴 vite-plugin-icons-spritesheet) - Generate a spritesheet and TypeScript types from SVG icons by listening to the icons folder changes.
  •      1⭐      0🍴 vite-plugin-abbrlink) - Add the abbrlink attribute to the markdown file in the specified directory.
  •     14⭐      1🍴 vite-plugin-native) - Supports Node/Electron C/C++ native addons.
  •      1⭐      1🍴 @yoichiro/vite-plugin-handlebars) - Import of Handlebars templates .hbs as ES Modules.
  •     11⭐      0🍴 vite-plugin-magic-preloader) - Generate <link rel="prefetch" /> or <link rel="preload" /> tags through magic comments and inject them into index.html.

Helpers

  •   1332⭐     48🍴 vite-tsconfig-paths) - Support for TypeScript's path mapping.
  •    213⭐     13🍴 vite-aliases) - Alias auto-generation based on project structure.
  •    592⭐     39🍴 vite-plugin-mkcert) - Provide certificates https dev server.
  •     75⭐      8🍴 vite-plugin-vconsole) - Help developers use vconsole to facilitate mobile development and debugging.
  •     58⭐     13🍴 vite-plugin-mock-server) - Mock server plugin, support using TS and JS to write Mock API and HMR.
  •    158⭐     28🍴 vitawind) - Install and Setting Tailwind CSS automatically.
  •    168⭐     12🍴 vite-plugin-restart) - Restart the Vite server on file changes.
  •    145⭐      8🍴 vite-plugin-full-reload) - Reload the browser on file changes.
  •     61⭐      1🍴 vite-plugin-tips) - Provide better development server status tips on the page.
  •     69⭐      6🍴 vite-plugin-external) - Provides a way of excluding dependencies from the runtime code and output bundles.
  •   3274⭐    199🍴 unplugin-auto-import) - On-demand API auto-importing.
  •   1280⭐     75🍴 vite-plugin-inspect) - Inspect the intermediate state of Vite plugins.
  •    161⭐     11🍴 vite-plugin-remove-console) - A vite plugin that deletes console.log in the production environment.
  •     19⭐      8🍴 vite-plugin-dev-manifest) - Generates manifest.dev.json during dev server, for backend integration with any language/framework.
  •    406⭐     37🍴 vite-plugin-watch-and-run) - Watch some files (glob) and trigger a command. To enable any tool to have a watch mode.
  •     71⭐     11🍴 vite-plugin-dynamic-base) - Resolve all resource files dynamic publicPath.
  •     86⭐      3🍴 vite-plugin-live-reload) - Live reloading.
  •      7⭐      0🍴 vite-plugin-simple-vconsole) - A debug console view inside your app to make mobile debugging easier, for both SPA and MPA.
  •    150⭐      3🍴 vite-plugin-qrcode) - Show QR code on server start.
  •     28⭐      5🍴 vite-plugin-cem) - Generates custom-elements.json manifest for describing custom elements.
  •    482⭐     40🍴 vite-plugin-web-update-notification) - Detect webpage updates and notify user to reload. support vite and umijs.
  •     14⭐      0🍴 vite-plugin-browserslist-useragent) - Compile browserslist query to a RegExp to test browser useragent.
  •    168⭐      6🍴 vite-plugin-validate-env) - Validate your environment variables at build time. Never forget an environment variable again.
  •     69⭐      6🍴 vite-plugin-mock-data) - Provides a simple way to mock data.
  •     69⭐      6🍴 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.
  •     64⭐      7🍴 vite-plugin-conditional-compile) - Conditional compilation syntax based on environment variables.
  •    168⭐     14🍴 vite-plugin-mock-dev-server) - Mock server for development, support CJS/ESM/JSON, auto-importing file and HMR.
  •     29⭐      4🍴 vite-plugin-api) - Generate route mapping for API Routes services from the directory tree.
  •     10⭐      0🍴 vite-plugin-shortcuts) - Add additional customized shortcut key population.
  •    124⭐      8🍴 vite-plugin-entry-shaking) - Mimic tree-shaking behaviour when importing code from an entry file in development mode.
  •      9⭐      0🍴 vite-plugin-auto-alias) - Automatically generate alias based on path.
  •     10⭐      1🍴 vite-plugin-image-placeholder) - Generate placeholder images by path matches.
  •      7⭐      0🍴 vite-plugin-find-image-duplicates) - Find if there are duplicate images in your project when building it.
  •     32⭐      1🍴 @froxz/vite-plugin-s3) - Allows you to upload files to S3.
  •    101⭐     12🍴 vite-plugin-vitepress-auto-sidebar) - Automatically generates sidebar data by scanning directories, based on vitepress.
  •      9⭐      0🍴 vite-plugin-global-const) - Define constants for reuse of your code.
  •      3⭐      0🍴 vite-plugin-cli-copy) - Start the project and automatically copy the terminal's network URL.
  •      3⭐      0🍴 vite-plugin-module-list) - Automatically import the modules found in a specified folder.
  •     80⭐      6🍴 unplugin-info) - Export build information as a virutal module.
  •      3⭐      2🍴 vite-plugin-auto-origin) - Detect origin configuration automatically based on incoming requests to dev server.
  •     28⭐      3🍴 vite-plugin-deadfile) - Find unused source files in the project.
  •    158⭐      8🍴 vite-bundle-analyzer) - Utility that represents bundles as an interactive treemap.
  •      5⭐      0🍴 vite-font-extractor-plugin) - Utility that minification bundle fonts by glyphs.
  •     10⭐      2🍴 vite-plugin-i18n-detector) - Lazyload i18n locale resources.
  •     21⭐      4🍴 vite-plugin-ngrok) - Integration with Ngrok, allowing you to easily share your local development server.
  •      5⭐      0🍴 vite-plugin-docker) - Docker utility based on Dockerode.
  •     29⭐      4🍴 vite-plugin-api-routes) - Generate route mapping for API Routes services from the directory tree.
  •     76⭐      2🍴 unplugin-detect-duplicated-deps) - Detect duplicate packaged dependencies.
  •     20⭐      1🍴 vite-plugin-vitepress-auto-nav) - Automatically generates sidebar and nav configurations by scanning directories, based on VitePress.
  •     18⭐      2🍴 vite-plugin-pretty-module-classnames) - Adds the filename without the -module suffix to the class names of CSS modules.
  •      6⭐      0🍴 vite-plugin-serve-static) - Allows serving arbitrary static files not in the public/ directory.
  •      4⭐      0🍴 vite-plugin-valibot-env) - Validate environment variables against a Valibot schema.
  •      1⭐      0🍴 vite-plugin-vitest-cache) - Optimize Vitest execution time through caching.
  •     14⭐      1🍴 vite-preload) - Preloads lazy loaded modules and stylesheets that were rendered by the server using 103 Early Hints, Link headers or link tags.
  •      1⭐      0🍴 vite-plugin-envtype-patch) - Generate type info for import.meta.env.

Testing

  •  13031⭐   1167🍴 vitest) - A Vite-native test framework.
  •    166⭐      7🍴 vitest-mock-extended) - Type safe mocking extensions for Vitest.
  •     88⭐     11🍴 cypress-vite) - Run Cypress specs using Vite.
  •     60⭐      0🍴 vite-plugin-doctest) - Documentation testing for Vitest.
  •     30⭐      1🍴 @poyro/vitest) - Test LLM integrations using Vitest.

Security

  •      9⭐      0🍴 vite-plugin-csp-guard) - Lets you configure a Content Security Policy to your project, supports all directives and hashing.

Vue

In this section, we use badges to indicate the targeted Vue version for each plugin.

v2 for Vue 2 only, v3 for Vue 3 only, and v23 for plugins that compatible with both versions.

💡 SSR frameworks are listed at SSR - Frameworks.

Integrations

Routing

  • v23   1870⭐    127🍴 vite-plugin-pages) - File system based route generator.
  • v3     12⭐      0🍴 v-route-generate) - A tool to generate routes.
  • v3   1667⭐     81🍴 unplugin-vue-router) - Official experimental file based routing.
  • v3      1⭐      0🍴 vite-plugin-vue-routes) - File-based routing, similar to SvelteKit and Next.js App Router.

Loaders

  • v23    606⭐     89🍴 vite-plugin-md) - Markdown as Vue components / Vue components in Markdown.
  • v3    590⭐     61🍴 vite-svg-loader) - Load SVG files as Vue components.
  • v2     19⭐      9🍴 vite-plugin-vue2-svg) - Load SVG files as Vue components.
  • v3     58⭐      5🍴 unplugin-svg-component) - Load SVG files as a Vue component, supporting svg file HMR and Typescript intelligence prompt.
  • v23      4⭐      0🍴 vite-plugin-markdown-mermaid) - Load Markdown files, with Mermaid rendering support.
  • v3      6⭐      1🍴 vite-plugin-style-vw-loader) - Converting the inline style px to vw.

SSG

  • v3   1341⭐    137🍴 vite-ssg) - Server-side generation.

Ecosystem

Transformers

Helpers


React

Official

Presets

Routing

  •   1064⭐     51🍴 generouted) - Client-side type-safe file-based routing and global modals — supports layouts, loaders, code-splitting and more.
  •     10⭐      1🍴 unplugin-remix-router) - Generates a React Router file, that depends on Remix v2 file-based router convention.
  •      1⭐      0🍴 vite-plugin-remix-flat-routes) - Remix-flat-routes convention-based routing, compatible with react-router data-api routing.

Loaders

  •    562⭐     54🍴 vite-plugin-svgr) - Transform SVGs into React components.
  •      7⭐      0🍴 vite-plugin-react-rich-svg) - Seamless SVG loader with versatile import options; such as DataURI, SVGR Component and Raw HTML Code.

Transformers

  •    181⭐      5🍴 @stylin/vite-plugin) - Transform CSS and SCSS modules into React components.

Framework

Helpers

SSG

  •    114⭐      6🍴 vite-react-ssg) - Static-site generation for React.

💡 SSR frameworks are listed at SSR - Frameworks.


Preact

Presets

  •    260⭐     26🍴 @preact/preset-vite) - Preact preset. HMR, automatic Preact inject, removal of DevTools in prod.

Svelte

Integrations

  •    862⭐    105🍴 vite-plugin-svelte) - Adds Svelte support. Official plugin of Svelte team.

Helpers

  •    406⭐     37🍴 vite-plugin-kit-routes) - Generates a file with all the routes, params, actions of your SvelteKit App.

Solid

Integrations

Routing

  •   1064⭐     51🍴 generouted) - Client-side type-safe file-based routing and global modals — supports layouts, loaders, code-splitting and more.

Elm

Integrations

  •    201⭐     31🍴 vite-plugin-elm) - A plugin that enables you to compile an Elm module.

Angular

Integrations


Fastify

Integrations

  •     10⭐      0🍴 vite-plugin-fastify) - Fastify plugin for Vite with Hot-module Replacement.

Routing


Electron

Integrations

  •   3475⭐    150🍴 electron-vite) - An Electron CLI integrated with Vite.

Presets


Rollup Plugins

Included in Vite

Covered by default in Vite

Compatible with Vite

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

Community

SSR

Libraries

  •   4327⭐    348🍴 Vike) - Like Nuxt/Next.js but as a do-one-thing-do-it-well plugin. react vue3 vue2 svelte
  •   2607⭐    284🍴 ssr) - A Server Side Rendering framework combined with Webpack/Vite. react vue3 vue2
  •    473⭐     12🍴 vavite) - A tool for developing and building server-side applications with live reloading capabilities.
  •     12⭐      0🍴 vue-ssr) - Minimalistic wrapper to develop and run SSR powered Vue apps. vue3
  •     88⭐      3🍴 vite-ssr-boost) - Server side rendering library for create awesome app based on react-router. react
  •    113⭐      6🍴 SSRx) - A thin layer on top of Vite to build modern SSR apps with a delightful DX.
  •   2108⭐     80🍴 Vinxi) - The Full Stack JavaScript SDK. Allows adding SSR to a Vite app.

Frameworks

  •   1064⭐     29🍴 Rakkas) - React framework inspired by Next.js and SvelteKit. react
  •     15⭐      1🍴 Vise) - SSR framework with server hooks. react vue3
  •    901⭐     42🍴 @fastify/fastify-dx) - Allowing you to serve static or live (SSR).
  •     98⭐     14🍴 vite-plugin-vercel) - Vercel adapter.
  •      2⭐      0🍴 vite-vlugin-vercel-skew-protection) - Helps configure Vercel Skew Protection.

Integrations with Backends

Adobe Experience Manager

Craft CMS

  •     52⭐     16🍴 Craft Vite) - Plugin for integration with Craft CMS.

Django

  •    570⭐     72🍴 django-vite) - Integration for Django applications.
  •    108⭐     13🍴 django-vite-plugin) - Integration for Django applications including vite plugin.

Flask

Ruby on Rails

  •   1326⭐    122🍴 vite-plugin-ruby) - Configuration for Ruby backends.
  •   1326⭐    122🍴 Vite Ruby) - Integration for Rails, Hanami, Padrino, and Rack apps.

Laravel

  •    601⭐     70🍴 Laravel Vite) - Integration for the Laravel framework.
  •    804⭐    152🍴 Laravel Vite Plugin) - Laravel official plugin for Vite.

CakePHP

  •     20⭐      6🍴 cakephp-vite) - Integration for CakePHP.

WordPress

  •    132⭐     12🍴 wordpress-vite-assets) - Integration for WordPress themes.
  •     19⭐      0🍴 Kima) - Starter theme with Twig.
  •   2115⭐    156🍴 WordPlate) - Starter app with Composer.

TYPO3 CMS

Go

  •     29⭐      5🍴 vite) - Integration with Go.

Rust

  •   1537⭐     63🍴 create-rust-app) - Integration for Rust web apps.

OctoberCMS

Symfony

  •    231⭐     24🍴 Vite Bundle) - Integration for Symfony.

Shopify

CodeIgniter

DDEV

Node.js

  •    655⭐     38🍴 vite-express) - Integration for Express web apps.
  •     12⭐      1🍴 vite-manifest-parser) - Parses manifest.json to generate HTML script and link tags.

ASP.NET Core

  •    254⭐     34🍴 Vite.AspNetCore) - Integration with ASP.NET Core projects.

Drupal

  • 🌎 Vite module - Backend integration for Drupal.
  •     17⭐      7🍴 vite-plugin-twig-drupal) - Support for Twig with includes/embeds and Drupal specific twig features.

PHP

  •     30⭐      2🍴 PHP-Vite) - Integration for PHP, Composer package, no framework dependencies.
  •     19⭐      1🍴 PHP-Vite Starter Repo) - Starter repository, with TypeScript/JavaScript, Tailwind CSS, SASS/SCSS, EJS, SVG and image support.
  •      0⭐      0🍴 php-vitelinker) - A CLI tool that generates includable PHP files after building bundles.

Migrations

Vue CLI

React

  •    132⭐      3🍴 Viject) - One-shot migration tool from Create React App.

Projects Using Vite.js

Open Source

  •  13047⭐   2105🍴 VitePress) - Static Site Generator powered by Vite and Vue.
  •  33259⭐   1350🍴 Slidev) - Presentation Slides for Developers.
  •  46608⭐   2474🍴 Astro) - Modern Static Site Builder.
  •    554⭐     35🍴 Hathora) - Multiplayer game framework.
  •   7915⭐    462🍴 Nhost) - Nhost is an Open Source Firebase Alternative with GraphQL.
  •   2616⭐     91🍴 Ladle) - Tool for developing and testing component stories powered by Vite and React.
  •    458⭐     67🍴 IslandJS) - Static site generator base on islands architecture.
  •    329⭐     10🍴 Vituum) - Wrapper around Vite with predefined config, integrations and template engines.
  •    189⭐     12🍴 Compiiile) - Preview or host folders containing Markdown files with full-text search and presentation slides.
  •     27⭐      1🍴 Gracile) - A meta-framework powered by Lit SSR.
  •    117⭐      5🍴 @lazarv/react-server) - A React meta-framework.
  •   4463⭐    185🍴 WXT) - Framework for building web extensions, with the same DX as Nuxt.

Apps/Websites

  •   5487⭐    259🍴 Icônes) - Icon explorer with instant search.
  •     98⭐     11🍴 Awesome CN Café) - Web application for Awesome CN Café.
  •     42⭐     16🍴 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.
  •    952⭐    343🍴 vue3-realworld-example-app) - Realworld app implementation using Vue 3 + TypeScript + Composition API.
  •     78⭐     12🍴 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.
  •     22⭐      2🍴 pointer-lock-movement) - A pointer lock movement manager for customizing your own creative UI.
  •     64⭐      1🍴 vite-run) - Multiple configuration execution support for vite, freely combining configurations like stacked blocks.
  •     20⭐      1🍴 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.

Source

 14352⭐   1138🍴 vitejs/awesome-vite)