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.

Table of Contents

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

Resources

Official Resources

• Documentation
• GitHub Repo
• Release Notes
• Vue 3 Docs
• Awesome Vue
• Migration from v1

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 .json files to ES6 modules.

Covered by default in Vite

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

Compatible with Vite

• @rollup/plugin-beep - System beeps on errors and warnings.
• @rollup/plugin-dsv - Convert .csv and .tsv files into JavaScript modules with d3-dsv.
• @rollup/plugin-eslint - Verify entry point and all imported files with ESLint.
• @rollup/plugin-graphql - Convert .gql/.graphql files to ES6 modules.
• @rollup/plugin-image - Import JPG, PNG, GIF, SVG, and WebP files (needs enforce: 'pre').
• @rollup/plugin-inject - Scan modules for global variables and injects import statements where necessary.
• @rollup/plugin-legacy - Add export declarations to legacy non-module scripts.
• @rollup/plugin-replace - Replace strings in files while bundling.
• @rollup/plugin-strip - Remove debugger statements and functions from your code.
• @rollup/plugin-virtual - A Rollup plugin 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.