Awesome Vite.js
A curated list of awesome things related to Vite.js
This awesome list is for Vite 2.x and onward. Vite 1.x's list is archived.
Resources
Official Resources
Get Started
- @vite/create-app - Scaffolding Your First Vite Project.
Templates
Vue 3
- Vitesse - Opinionated starter template.
- vite-vue3-tailwind-starter - Vue 3, Vue Router and Tailwind CSS.
- vite-ts-tailwind-starter - TypeScript, Tailwind CSS, Cypress.io e2e tests + CI.
- vite-electron-quick - Starter template with Vue 3, TypeScript and Electron 11.
- vite-electron-builder - Electron apps using Vite for both back and front-end, with automatic releases.
- vue-vben-admin - Background management template based on Vue3, Ant-Design-Vue, TypeScript.
- electron-vue-next - Vue 3 and Electron with VS Code debug and GitHub release process out-of-box.
- vite-wind - Boilerplate with Tailwind CSS, TypeScript, css-pro-layout, 9+ components and dark mode support.
- d2-advance - Boilerplate with Tailwind CSS, TypeScript. Advanced, colorful front-end integration practice.
Vue 2
- vite-vue2-windicss-starter - Vue 2, Vue Router, Composition API, VueUse, Windi CSS and TypeScript.
- vite-vue2-starter - Barebones Vue 2 starter, similar to Vue-Cli's base template.
React
- vite-reactts-electron-starter - React, TailwindCSS, TypeScript and Electron.
- vite-reactts-chakra-starter - React, Typescript, Chakra, Cypress.
- electron-vite-react - Electron, TypeScript and Tailwind CSS with twstyled.
- vite-electron-esbuild-stater - Starter template with React, Typescript, Electron and esbuild.
- Vitamin - React Typescript, TailwindCSS, SPA + PWA, Cypress and CI.
- vite-react-tailwind-rtk - React, Tailwind, Redux Toolkit.
Svelte
- sttv - Svelte, TailwindCSS, TypeScript.
- svelte-vite-ssr - Svelte with SSR support.
Plugins
Framework-agnostic Plugins
Integrations
- vite-plugin-pwa - Zero-config PWA.
- vite-plugin-purge-icons - Bundle icons on demand by PurgeIcons.
- vite-eslint - Allow ESLint to work with bundling and dev server.
- 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-svg-icons - Fast creating SVG sprites.
Loaders
- vite-plugin-rsw - Load rust-compiled (wasm-pack) WebAssembly packages.
- vite-plugin-fonts - Webfont loader.
- vite-imagetools - Load and transform images using url query parameters.
- vite-plugin-radar - All in one analytics loader (with 7+ providers supported).
Bundling
- vite-plugin-compress - Compress your bundle + assets.
- vite-plugin-imagemin - Compress image assets.
- vite-plugin-importer - Integration for babel-plugin-import.
- vite-plugin-banner - Adds a banner to the top of each generated chunk.
- vite-plugin-compression - Use gzip or brotli to compress resources.
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.
Helpers
- vite-tsconfig-paths - Support for TypeScript's path mapping.
- vite-plugin-faker - Use TypeScript compiler to generate mock data.
- vite-plugin-style-import - Introduces component library styles on demand.
- vite-plugin-mock - Mock plugin for development and production.
- vite-plugin-mocker - Mocker server.
- vite-plugin-theme - Dynamically changing the theme color.
- vite-plugin-test - Headless testing your component.
- vite-aliases - Alias auto-generation based on project structure.
- vite-plugin-import - Modular import plugin for Vite.
- vite-plugin-imp - Import library component styles on demand, make your app slimmer.
Vue
In this section, we use badges to indicate the targeted Vue version for each plugin.
for Vue 2 only, 
for Vue 3 only, and 
for plugins that compatible with both versions.
Integrations
@vitejs/plugin-vue - Official Vue 3 support.
vite-plugin-vue2 - Vue 2 integration.
Routing
vite-plugin-voie - File system based routing.
vite-plugin-pages - File system based route generator.
Loaders
vite-plugin-md - Markdown as Vue components / Vue components in Markdown.
vite-plugin-icons - Access thousands of icons as Vue components.
vite-plugin-vuedoc - Markdown Code block as Vue Preview components.
vite-svg-loader - Load SVG files as Vue components.
SSR / SSG
vite-ssg - Server-side generation.
vite-ssr - Server-side rendering.
vitedge - Edge-side rendering with fullstack utilities.
Ecosystem
vite-plugin-vue-i18n - Integration for Vue I18n.
vite-plugin-i18n-resources - Load i18n translation message files.
Helpers
vite-plugin-components - On-demand components auto-importing.
Bundling
vite-plugin-multi-device - Outputs for different devices.
React
Official
- @vitejs/plugin-react-refresh - Official React Refresh support.
Loaders
- vite-plugin-svgr - Transform SVGs into React components.
- vite-plugin-mdx - Use MDX for your Vite app, with support for MDX v1, MDX v2, HMR, and SSR.
Transformers
- vite-plugin-twstyled - Plugin to compile Tailwind CSS with JSX and CSS-in-JS support.
Framework
- vite-plugin-react-pages - A Vite framework for building React app.
Solid
Integrations
- vite-plugin-solid - Provides JSX transformation for Solid.
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
.jsonfiles 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
.csvand.tsvfiles 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 which loads virtual modules from memory.
- @rollup/plugin-yaml - Convert YAML files to ES6 modules.
Community
- Check the Awesome Rollup list for community maintained rollup plugins, and refer to the Vite docs section about rollup plugin compatibility.
Integrations with Backends
Ruby on Rails
- Vite Ruby - Integration for Rails, Hanami, Padrino, and Rack apps.
- vite-plugin-ruby - Configuration for Ruby backends.
Migrations
Vue CLI
- vue-cli-plugin-vite - Use Vite on Vue CLI with minimize codebase modifications.
Projects Using Vite.js
Open Source
- VitePress - Static Site Generator powered by Vite and Vue.
- TroisJS - Three.js integration with Vite and Vue 3.
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.
- Tailwind Pre-Processor - An implementation of Tailwind CSS using Less / Stylus / Sass / SCSS.
- npmview - A web application to view npm package files.
- Layoutit Grid - Interactive CSS Grid layout generator.
- TypGame - Test your typing performance.
- aitrack.work - A task-based time tracker for everyday use.
- macOS Web - macOS Desktop experience for Web.