aboutsam/awesome-vite

⚡️ A curated list of awesome things related to Vite.js

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.
• vite-electron-ts - Electron 12, Vue 3 and TypeScript.
• d2-advance - Boilerplate with Tailwind CSS, TypeScript. Advanced, colorful front-end integration practice.
• vue-pure-admin - Background management template based on Vue3, TypeScript, Tailwind CSS, element-plus.
• vite-electron-typescript-template - Electron 12 TypeScript Template.
• vite-ts-quick - Vue 3 + Vuex + Vue-router + TypeScript Quick Template.
• fast-crud - Options-oriented crud framework, developing crud as fast as lightning.
• vivu - Opinionated scalable vue boilerplate.
• electron-vite-quick-start - Full stack uses Vite to run Electron application, including main process.

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.
• admin-base-tmpl - Basic admin template using Vue2, TypeScript, Element UI.

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.
• vite-reactts-eslint-prettier - React, TypeScript, ESlint, Prettier, Pre-commit.
• vite-reactts-antd-starter - React, Typescript, Antd.
• react-vite-admin - React, Recoil, React Query, React Hooks, TypeScript, Axios.
• vite-template-react - A Create React App-like template.
• vitejs-template-react-rescript - Vite official React template + ReScript.

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.
• vite-react-jsx - React 17's automatic JSX runtime for your entire bundle.
• vite-plugin-spritesmith - Converts a set of images into a spritesheet and SASS/LESS/Stylus mixins.

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).
• vite-plugin-virtual-plain-text - A Vite plugin loads file as plain text from the virtual assets workspace.

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.
• rollup-plugin-critical - Vite.js & Rollup plugin for generating critical CSS.

Transformers

• vite-plugin-html - Plugin to minimize and use ejs template syntax in index.html.
• vite-plugin-ts-nameof - Ability to resolve nameof in TypeScript.
• vite-plugin-handlebars - Process HTML files with Handlebars.
• vite-plugin-html-config - HTML tag configuration, such as script link style meta favicon and more.
• vite-plugin-html-template - HTML template for vite app, like html-webpack-plugin for webpack.
• vite-plugin-md2vue - Transform markdown module to vue component.
• vite-plugin-virtual-html - Make Vite MPA consistent with @vue/cli.
• vite-plugin-posthtml - Vite plugin to run PostHTML. Currently only runs on served/built HTML files index.html.
• vite-plugin-plain-text - A Vite plugin transforms the rule-matched file as plain text.

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.
• view-launcher - Inspect Vue components and jump to source code directly from browsers.
• vite-plugin-mkcert - Provide certificates for vite's https dev service.
• vite-plugin-vconsole - Help developers use vconsole to facilitate mobile development and debugging.
• vite-plugin-cdn-import - Import packages from CDN.
• vite-dts - Blazing fast plugin that generates .d.ts modules for libraries.

Testing

• mocha-vite-puppeteer - Run your Mocha front-end tests with the Vite bundler and the Puppeteer browser launcher.
• vite-plugin-test - Vite plugin with mocha and puppeteer.
• vite-web-test-runner-plugin - A @web/test-runner plugin to test Vite-powered projects.

---

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.

💡 SSR frameworks are listed at SSR - Frameworks.

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.

SSG

• vite-ssg - Server-side generation.

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.
• vite-plugin-vue-gql - GraphQL Tags for your Vue SFC.

Bundling

• vite-plugin-multi-device - Outputs for different devices.

---

React

Official

• @vitejs/plugin-react-refresh - Official React Refresh support.

Presets

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

Loaders

• vite-plugin-svgr - Transform SVGs into React components.
• 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.
• @vitjs/vit - React application framework inspired by UmiJS.

💡 SSR frameworks are listed at SSR - Frameworks.

---

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 that 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.

SSR

Libraries

• vite-ssr - Simplified Server Side Rendering with an SPA-like developer experience.
• vite-plugin-ssr - Like Nuxt/Next.js but as a do-one-thing-do-it-well plugin.

Frameworks

• vitedge - Edge-side rendering with fullstack utilities.

Integrations with Backends

Ruby on Rails

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

Adobe Experience Manager

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

Craft CMS

• Craft Vite - Plugin for integration with Craft CMS.

Migrations

Vue CLI

• vue-cli-plugin-vite - Use Vite on Vue CLI with minimize codebase modifications.
• wp2vite - A front-end project automatic conversion tool, make your Webpack projects support Vite.

Projects Using Vite.js

Open Source

• VitePress - Static Site Generator powered by Vite and Vue.
• TroisJS - Three.js integration with Vite and Vue 3.
• Slidev - Presentation Slides for Developers.

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.
• vue3-realworld-example-app - Realworld app implementation using Vue 3 + TypeScript + Composition API.
• vue3-ssr-realworld-example-app - Realworld app implementation using Vue 3 with SSR.
• react-device-frameset - This is yet another device frameset component for React.