OzkanOnay / 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 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.
• 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.
• 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 + Vue 3 + Vuetify 3 template to make next generation desktop apps with web technologies.
• 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 - A todo action template based on (Vue3 + ts + Vue-Router4 + Pinia2), UI components contains (Ant-Design-Vue + ElementPlus + NaiveUI).
• 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.

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.
• vite-ts-vue2-todo - A todo action template based on (Vue2 + ts + Vue-Router3 + Pinia1 + CompositionApi), UI components contains (ElementUI + ViewUI + Vuesax4).
• vite-vue2-typescript - TypeScript, Vue 2, Vue Router, Composition API, VueUse, File based routing, Auto import vuex store modules, Global components auto import and lint-staged commitlint.

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.
• vite-react-rtkq - A React + Redux Toolkit Query starter template with opt-in TypeScript.
• vite-react-quick - Vite2.x + React + React-router-dom + TypeScript Quick Template.
• vite-template-react-plus - Vite2.x + React + TypeScript + Eslint + Preitter + Windicss + Visualizer Quick Template.
• vite-boilerplate - Full-Stack template with TypeScript, React, Storybook and Express.
• reactjs-vite-tailwindcss-boilerplate - ReactJS, TypeScript, Jest, Testing Library, Tailwindcss, 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, Tailwindcss, Redux Toolkit, eslint.
• vite-react-tailwind-template - React 17, Typescript, Jest, ESLint, Prettier, Husky, TailwindCSS 2, PostCSS, pnpm.
• vite-react-ssr - Server Side Rendering project template base on Vite + React + React-router-dom, TailwindCSS 2 JIT inside.
• vite-material-ui - Material UI v5 (now officially called MUI), TypeScript, Dark mode toggle.

Svelte

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

Elm

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

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

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.
• vite-plugin-monaco-editor - A vite plugin for the Monaco Editor.

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.
• 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 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.
• vite-plugin-virtual-html-template - HTML template for vite app, support flexible virtual URL.
• vite-plugin-require-context - A Vite plugin that supports require.context by code transforming.
• vite-remark-html - Transform .md imports into HTML strings.
• vite-plugin-commonjs - Support commonJS to esm in vite.
• vite-plugin-vue2-suffix - Compatible with no '.vue' suffix in vite (should be useful for those who transfer webpack to vite)
• 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.

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.
• 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 Tailwindcss automatically for Vite.
• 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 in vite2. It not only work on our source code, but also work on pre-bundling dependencies well.
• vite-plugin-vars-modifier - Convert variables from css preprocessor file.

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.

---

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.

---

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