brandonsueur/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

Table of Contents

Use the "Table of 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

• create-vite - Scaffolding Your First Vite Project.
• create-vite-pwa - Same scaffolding options as create-vite, but with PWA support out-of-the-box.

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-electron-ts - Electron 12, Vue 3 and TypeScript.
• 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.
• NeuVite - Desktop app template with Neutralino.js
• vue3-SSR-starter - Vue3-SSR, prefetch and sync state to client with one line of code.
• electron-vite-template - Electron 13, Vue 3 and TypeScript. Make your desktop development easier.
• vite-tauri-template - Tauri + Vite + Vue 3 + Vuetify 3 desktop app template.
• vue-vite-h5 - Use Vue3, TypeScript and Vant to develop mobile applications.
• electron-vue-vite - Electron, Vue3, Vite integration.
• Vitesome - Vue3 + TypeScript + WindiCSS + Vue Router 4, i18n and Iconify.
• vitesse-lite - Lightweight version of Vitesse.
• vitesse-webext - WebExtension Vite Starter Template.
• Vitesse SSR - Vitesse-based Server Side Rendering. Deploy to Vercel or any Node.js environment.
• Vitesse Edge - Vitesse-based Edge Side Rendering, powered by Vitedge. Deploy to Cloudflare Workers.
• vite-ts-vue3-todo - Vue3 + TS + Vue-Router4 + Pinia2 template.
• vue-component-template - A template for creating own Vue3 TSX component.
• vite-vue3-tsx-starter - Vite, Vue 3, and Tsx.
• fast-vite-electron - Vue3 + Vite + Electron with esbuild.
• fast-vite-nestjs-electron - Vue3 + Vite + Electron + Nestjs with esbuild.
• naive-ui-dashboard-template - UI friendly, Vue 3 + TSX + TailwindCSS 2 JIT + PostCSS + Naive UI.
• vitailse - Like Vitesse but with Tailwind CSS.
• vitespa - Vitesse-based SPA without SSG.

Vue 2

• vite-vue2-windicss-starter - Vue 2, Vue Router, Composition API, VueUse, Windi CSS and TypeScript.
• admin-base-tmpl - Basic admin template using Vue2, TypeScript, Element UI.
• vite-ts-vue2-todo - Vue2 + ts + Vue-Router3 + Pinia1 + Composition API.
• vite-vue2-typescript - Vue2 TypeScript starter template using composition-api.

React

• vite-reactts-electron-starter - React, Tailwind CSS, TypeScript and Electron.
• vite-electron-esbuild-stater - Starter template with React, TypeScript, Electron and esbuild.
• Vitamin - React TypeScript, TailwindCSS, SPA + PWA, Cypress and CI.
• 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 - React + ReScript.
• vite-react-rtkq - A React + Redux Toolkit Query starter template with opt-in TypeScript.
• vite-react-quick - Vite + React + React-router-dom + TypeScript Quick Template.
• vite-template-react-plus - Vite + React + TypeScript + ESLint + Prettier + Windi CSS + Visualizer Quick Template.
• vite-boilerplate - Full-Stack template with TypeScript, React, Storybook and Express.
• reactjs-vite-tailwindcss-boilerplate - React, TypeScript, Jest, Testing Library, Tailwind CSS, ESLint and Prettier.
• Tropical - React, Storybook, MDX, Fela, SSR prerendering, and islands architecture.
• vite-plugin-react-refresh - Provide enhancements for @vitejs/plugin-react-refresh.
• vite-reactts17-chakra-jest-husky - React 17, TypeScript, Chakra UI, Jest, ESLint, Prettier, Husky.
• react-ts-vite-template - React, TypeScript, Jest, Testing Library, Cypress, ESLint, Prettier, Husky.
• vite-reactts-tailwind-rtk-eslint - React, TypeScript, Tailwind CSS, Redux Toolkit, eslint.
• vite-react-tailwind-template - React 17, TypeScript, Jest, ESLint, Prettier, Husky, Tailwind CSS, PostCSS, pnpm.
• vite-react-ssr - Server Side Rendering project template base on Vite + React + React-router-dom, Tailwind CSS 2 JIT inside.
• vite-material-ui - Material UI v5, TypeScript, Dark mode toggle.
• stravital - React 17 + Vite + react-router-dom + react-icons + Prop-Types + Tailwind CSS with JIT.
• vite-react-ts-tailwind-firebase-starter - Starter using Vite + React + TypeScript + Tailwind CSS (daisyUI) + Firebase (v9) + Prettier + ESLint.

Svelte

• sttv - Svelte, Tailwind CSS, TypeScript.
• svelte-vite-ssr - Svelte with SSR support.
• svelte-vite-starter - Next template for Svelte, TypeScript, SCSS, Babel, and HMR.

Elm

• vite-elm-template - A default template for building Elm applications.

Plugins

Framework-agnostic Plugins

Integrations

• vite-plugin-pwa - Zero-config PWA.
• 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-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.
• vite-plugin-host - Allow you to use the custom domain for development.
• vite-plugin-eruda - Help you automatically open debugging tools in the development environment.
• 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-stimulus-hmr - Integration with Stimulus enabling HMR.
• @nabla/vite-plugin-eslint - Runs ESLint asynchronously in a worker to keep HMR fast.
• vite-plugin-relay - Allows for the usage of Relay.
• 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, the simple way.
• vite-plugin-comlink - Use WebWorkers with the power of Comlink to make them enjoyable.

Loaders

• unplugin-icons - Access thousands of icons as components.
• vite-plugin-svg-icons - Fast creating SVG sprites.
• vite-plugin-rsw - Load rust-compiled (wasm-pack) WebAssembly packages.
• 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 - Loads file as plain text from the virtual assets workspace.
• vite-plugin-monaco-editor - Monaco Editor integration.

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 - Generate critical CSS.
• vite-plugin-dts - Generate declaration files from .ts or .vue source files for lib.
• vite-plugin-multi-device - Outputs for different devices.
• vite-plugin-vue-docs - Analyze vue components to automatically generate previewable documents.

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, 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.
• vite-plugin-virtual-html-template - HTML template, support flexible virtual URL.
• vite-plugin-require-context - Supports require.context.
• vite-remark-html - Transform .md imports into HTML strings.
• 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-require - A Vite plugin that supports require by code transforming.
• vite-plugin-css-modules - vite projects to support can use css modules, Not just .module.xxx .
• vite-plugin-macro - Brings macro capabilities to Vite based projects.
• vite-plugin-global-style - Deal with global styles for CSS, SASS, LESS and Stylus.

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-aliases - Alias auto-generation based on project structure.
• vite-plugin-import - Modular import plugin.
• 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 https dev server.
• 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.
• vite-plugin-externals - Exclude dependencies from the output bundles.
• vite-plugin-async-catch - Auto inject try catch code for async function.
• vite-plugin-mock-server - Mock server plugin, support using TS and JS to write Mock API and HMR.
• vite-plugin-dynamic-publicpath - Use dynamic import handler to change runtime public base path, like Webpack's __webpack_public_path__.
• 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-external - Better to define externals.
• vite-plugin-vars-modifier - Convert variables from css preprocessor file.
• unplugin-auto-import - On-demand API auto-importing.
• vite-plugin-inspect - Inspect the intermediate state of Vite plugins.

Testing

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

---

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.
• unplugin-vue2-script-setup - Enabling <script setup> syntax for Vue 2.

Routing

• vite-plugin-pages - File system based route generator.

Loaders

• vite-plugin-md - Markdown as Vue components / Vue components in Markdown.
• 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

• unplugin-vue-components - On-demand components auto-importing.
• vite-plugin-vue-gql - GraphQL Tags for your Vue SFC.
• vite-plugin-vue2-suffix - Compatible without '.vue' suffix.

---

React

Official

• @vitejs/plugin-react - The all-in-one Vite plugin for React projects.

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

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.

---

Elm

Integrations

• vite-plugin-elm - A plugin that enables you to compile an Elm module.

---

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.
• vitext - The Next.js like React framework for better User & Developer experience.
• Rakkas - React framework inspired by Next.js and SvelteKit

Integrations with Backends

Adobe Experience Manager

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

Craft CMS

• Craft Vite - Plugin for integration with Craft CMS.

Django

• django-vite - Integration for Django applications.

Ruby on Rails

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

Laravel

• Laravel Vite - Integration for the Laravel framework.

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.
• webpack-to-vite - Convert a webpack project to vite project, also provides conversion details to help you migrate smoothly.

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.
• npmview - A web application to view npm package files.
• Layoutit Grid - Interactive CSS Grid layout generator.
• aitrack.work - A task-based time tracker for everyday use.
• macOS in Svelte - macOS Desktop experience for Web in Svelte.
• 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.
• vite-vue3-lowcode - Low code platform using Vue 3 + TypeScript + Composition API.
• Death Star dashboard - Example of dashboard build with Vue 3, TypeScript, Tailwind, Docker.
• Context Note - A note-taking chrome extension built by Vue3 & Vite.