/awesome-vite

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

Primary LanguageJavaScriptMIT LicenseMIT


logo of awesome-vite repository

Awesome Vite.js

A curated list of awesome things related to Vite.js

Awesome

Table of Contents

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

Resources

Official Resources

Get Started

Templates

Vanilla

Vue 3

  • Vitesse - Opinionated starter template.
  • vite-ts-tailwind-starter - TypeScript, Tailwind CSS, Cypress.io e2e tests + CI.
  • vue-vben-admin - Background management template based on Vue3, Ant-Design-Vue, TypeScript.
  • vue-pure-admin - Background management template based on Vue3, TypeScript, Tailwind CSS, element-plus.
  • fast-crud - Options-oriented crud framework, developing crud as fast as lightning.
  • vivu - Opinionated scalable vue boilerplate.
  • vite-tauri-template - Tauri + Vite + Vue 3 + Vuetify 3 desktop app template.
  • vue-vite-h5 - Use Vue3, TypeScript and Vant to develop mobile applications.
  • Vitesome - Vue3 + TypeScript + WindiCSS + Vue Router 4, i18n and Iconify.
  • vitesse-lite - Lightweight version of Vitesse.
  • vitesse-webext - WebExtension Vite Starter Template.
  • vite-ts-vue3-todo - Vue3 + TS + Vue-Router4 + Pinia2 template.
  • 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.
  • vite-quasar-starter - Vite 2.x + Vue 3.x + quasar 2.x starter.
  • vue3-mobile-template - Vue3 + TS + Vue-Router4 + Vuex4 + Vant + Vue-use + Vue-i18n Mobile Template.
  • vue3-template - Vue 3 / Tailwind CSS / vue-router / PNPM / ESlint Airbnb / Stylelint / GitHub pages actions / Netlify.
  • Modern Vue - Modern Vue stack 2022.
  • Vitecamp - Vue3 / Element Plus / Axios / Vue Router / Pinia / Windi CSS / icones / i18n / Markdown / Svg / ESLint Airbnb Style / Components and APIs auto importing.
  • vite-vue3-typescript-webcomponent - Vue 3 / Typescript / boiler plate to develop Web Component.
  • vite-vue-ts-storybook - Vue 3 / i18n / Typescript / Vite / Storybook / ESLint / Prettier.
  • vite-vue-tailwind-v3 - Starter template for Vue3 + TailwindCSS and prettier-plugin-tailwindcss build-in.
  • vite-vue-ts-tailwind-v3 - Starter template for Vue3 + Typescript + TailwindCSS and prettier-plugin-tailwindcss build-in.
  • Vitawind Creator - Create TailwindCSS project rapidly.
  • vue3-ts-vite-vitest-todo - Vue 3 / TypeScript / Vite / Vitest with full tests / Composition API / Pure TS/TSX.
  • vue3-tailwind3-website-starter - Vue3 / Vite / TailwindCSS website starter template, with guides on each page.
  • vite-boot - Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Tailwind CSS + VueUse Template.
  • Vue Naive - Admin template, base on Vue 3 + Pinia + Naive UI.
  • vue-admin-box - Admin template, based on Vue 3 + Element-plus.
  • vivu-npm - Starter template to build component library.
  • vue3-pc-template - Vite + ElementPlus + Vue3 + TS + Vue-Router4 + Vuex4 + Vue-use + Vue-i18n PC Template.
  • ViTauri - Vite + Tauri + Vue3 + TS + Vue-Router4 + Auto imports.
  • vue-hbs-admin - Admin starter template based on Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Unocss + Ant-design-vue + Auto imports.
  • vite-vue-proste - Pinia + Typescript + Vue-Router4 + Vitest + Vue-Test-Utils + Vue-Query + Sass + ESLint + Stylelint + Prettier + project presets.
  • vue-vite-ssr - Typescript, Eslint, Stylelint, Husky, Lint-staged and Commitlint.
  • vue3-vant-mobile - Vite + Vue3 + Vant4 + Pinia + Vue-Router4 + TypeScript Mobile Template.
  • vue3-powerbuild - Vue 3 + TypeScript + Tailwind CSS + Vite + Storybook + ESLint + Prettier.
  • vue-ts-starter - Vue3 + TypeScript + Vite + Pinia.
  • vitequality - Vue 3 + Typescript + Vue Router + Pinia + Eslint + Jest + Cypress.
  • vue-vite-tw-ts - Vue 3 + Vite + Vitest + Cypress E2E + Naive UI + Pinia + Vue Router.
  • vite-vue-box - Vite + Vue 3 + Ts + TailWindCss + VueHook Plus + Pinia + Axios + ESLint + Stylelint.
  • vite-vue-js-starter-template - Vite + Vue3 + JavaScript + Vue Router + Pinia + TDesign + ESLint + Stylelint + Prettier Simple Template.
  • vite-vue3-bootstrap-ts-vitest-starter - Vue 3 + TypeScript + Vite + Bootstrap Vue 3 + Vitest.
  • vue-xs-admin - Based on Vue3, Vite3 ElementPlus, TypeScript, Pinia, VueRouter.
  • vue-component-template - Vue 3, TSX, ESLint, Prettier.
  • ionic-vue-vite - Vue 3 + Vue Router + Vite + Ionic.
  • ionic-vue-pnpm-monorepo - Vue 3 + Vue Router + Vite + Ionic + pnpm monorepo.
  • ionic-vue-pnpm-express-monorepo - Frontend: Vue 3 + Vue Router + Vite + Ionic, Backend: express + pnpm monorepo.
  • ionic-vue-capacitor - Vue 3 + Vue Router + Vite + Ionic + Capacitor + pnpm monorepo.
  • ultimate-vite-ts-less-template - Vue 3, TypeScript, Less, i18n, Vitest, Vitepress, lodash, Axios, Pinia, Built-in logger, Built-in Input Validators, env files.
  • vite-vue-h5-app - Vite 3 + Vue 3.2 + TypeScript + Vant mobile applications.
  • vulcan - The template for mobile application. Vite, Vue 3, TypeScript, Sass, i18n, Vitest&Cypress, Pinia, APIs&Mock, ESLint, Prettier, auto-importing.
  • vite-plugin-ssr-vue3-ts-compositionAPI-i18n-fetchData - Vue3 + Typescript + CompositionAPI + i18n + fetchData.
  • vite-plugin-vue-sfc-in-js - Vue SFC syntax in JS files, allows to create multiple components in a single .js file.
  • vite-vue-lib-template - Vue 3, Eslint, Prettier, Conventional Commit, Pre-commit, Lint-staged, Semantic-release, TypeScript.
  • vite-plugin-style-vw-loader - A loader that can convert the style px in the vue tag to vw.
  • vue3-ts-pinia-vant - Vue3, Vue Router, Pinia, Composition API, TypeScript, Vant4, VueUse, Axios, SocketIO, PostCSS, ESlint, Prettier, Husky, Lint-staged, Mock, Amap, QQ Login, Alipay Sandbox, Eruda, CI/CD, Vercel, Mobile Project.
  • antdv-pro - AntdvPro is a complete set of enterprise-level mid-backend front-end/design solutions based on Vue3, Vite4, ant-design-vue4, Pinia, UnoCSS and Typescript.
  • vue3-quick-start - Building an engineered Vue 3 project, integrated with Vite + Vue3 + TypeScript + ESLint + Prettier + Commitizen + Husky + LintStaged + CommitLint + AutoImport + ReleaseIt.
  • antd-vue3-admin - A starter template based on Vue3, Vite4, TS5 and Ant-Design-Vue4.
  • vue-file-upload - A file management system built with Vue3 and TypeScript that allows for single and multiple file uploading with a preview feature.

Vue 2

React

  • Vitamin - React TypeScript, TailwindCSS, SPA + PWA, Cypress and CI.
  • vite-reactts-eslint-prettier - React, TypeScript, ESlint, Prettier, Pre-commit.
  • 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.
  • template-vite-react - A minimal React Vite starter template.
  • reactjs-vite-tailwindcss-boilerplate - React 18, TypeScript, Vitest, Testing Library, TailwindCSS 3, Eslint and Prettier.
  • Tropical - React, Storybook, MDX, Fela, SSR prerendering, and islands architecture.
  • vite-reactts18-chakra-jest-husky - React 18, 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.
  • stravital - TypeScript, Git Hooks, Commitizen, Lint Staged, TailwindCSS.
  • vite-react-ts-tailwind-firebase-starter - Starter using Vite + React + TypeScript + Tailwind CSS (daisyUI) + Firebase (v9) + Prettier + ESLint.
  • vite-react-ts-starter - React, TypeScript, Jest, ESLint, Prettier, TailwindCSS, Husky, Conventional Commits.
  • vital - React, TypeScript, Tailwind (JIT), CSS-Modules, Jest, Atomic Design, Prettier, Husky, Commit-lint.
  • vite-react-ts-ghactions-template - React, TypeScript, Vitest + React Testing Library, GitHub Actions + GitHub Pages, ESLint, Prettier, Husky, Commitlint.
  • vite-react-tailwind-v3 - Starter template for React + TailwindCSS and prettier-plugin-tailwindcss build-in.
  • vite-react-ts-tailwind-v3 - Starter template for React + Typescript + TailwindCSS and prettier-plugin-tailwindcss build-in.
  • create-react-app-vite - React, TypeScript, TailwindCSS, MSW, Vitest, React Testing Library, ESLint, Prettier, GitHub Actions.
  • vite-react-starter - React + ESLint + Prettier + SASS + Emotion + TailwindCSS + Jest + Testing Library.
  • chrome-extension-boilerplate-react-vite - React + TypeScript + SASS + Prettier + ESLint + GitHub Actions + Chrome Extension Manifest v3.
  • vite-ant-design-pro - React + antd + ProComponents + ReactQuery + ReactRouter6.
  • vite-rtk-query - React, TypeScript, Redux Toolkit, RTK Query, TailwindCSS, MSW, Jest, React Testing Library, ESLint, Prettier.
  • vite-react-proste - React + TypeScript + react-router-dom + Recoil + SASS + Testing Library + react-query + ESLint + Stylelint + Prettier.
  • React-PWA - React v18, TypeScript, Vite, React Router v6, MUI v5, Recoil, PWA, Eslint, Prettier, Husky, lint-staged, https localhost and more.
  • vite-react-ts-minimal-template - React + TypeScript + Airbnb ESLint + Prettier + Husky.
  • react-vite-ssr - Mobx, Typescript, Eslint, Stylelint, Husky, Lint-staged and Commitlint.
  • Viact - React + TypeScript + ESLint + Prettier + Support RTL + mock REST API Viact + Storybook, ErrorBoundary, UnoCss and more.
  • Viterts - React + TypeScript + Redux + React Router + Jest + ESLint + Airbnb + Prettier + SASS.
  • ViteRC - React 18 + TypeScript + ESLint (Airbnb) + Prettier + Husky + Jest + Absolute imports + Commit linting.
  • VRTTV - React + TypeScript + TailwindCSS + ESLint + Prettier + Husky + Conventional Commits + Gitmoji + GitHub Actions + Vercel Deploy.
  • React Starter Kit - Jamstack, React, React Router, Material UI, Firebase Auth, TypeScript, ESLint, Prettier, Jest, GitHub Actions.
  • vite-mern-template - React 18 + TypeScript + Vite + Redux Toolkit + ESLint + React Router DOM + Axios + React Icons + React Toastify + Express + Mongoose.
  • react-pipeline - React 18 + TS + AntD + GitHub Pages + Tailwind + Sass + React Router DOM + ESLint.
  • Varsarr - React, Typescript, Styled-Components, Recoil, React-Query, Axios, Absolute imports.
  • viterjs-template - React + JavaScript + Redux + Material UI + Axios + ESLint + Prettier.
  • react-vite-ts-boilerplate - React 18, TypeScript, SCSS, ESLint, Prettier, Vitest.
  • vite-react-universal-template - React18 + TypeScript + react-router-dom + Zustand + ESlint + Prettier + Stylelint + Husky + Docker, and APIs auto importing.
  • vite-reactts18-eslint-tailwindcss - React 18 + TypeScript + ESLint + TailwindCSS.
  • vite-plugin-react-views - Create routes automatically based on File System.
  • react-vite-template - A react project template.
  • react-xs-admin - The background management system template developed based on React18 + ReactRouteV6 + Vite + And Design + ReactIntl + ReactRedux + Emulation.
  • vite-mui-ts - React + TypeScript + Redux + Material UI + RRD + ESLint + Prettier.
  • leo-react-app - React + SASS | Template for React applications with SASS boilerplate for consistent interfaces.
  • template-vite-react-ts-tailwind - React + TypeScript + Tailwind CSS + Eslint + Prettier.
  • vite-react-ts-tailwind-template - React, TypeScript, ESLint, Prettier, Husky, Vitest for specs, and Tailwind + CSS Modules.
  • vite-react-ts-template - React 18, TypeScript, ESlint, Prettier, Dev Container, Vitest, Storybook, Playwright, MSW, React Router 6, React Query, Chakra UI, Zustand.
  • react-vite-tailwindcss-template - React, JavaScript, TailwindCSS, ESlint, Prettier, Pre-commit.
  • vite-tinybase-react - Starter template for TinyBase and React.
  • vite-tinybase-ts-react - Starter template for TinyBase, TypeScript, and React.
  • vite-react_best_practices-template - Template for creating React apps with TypeScript following best practices: Unit and end-to-end tests, Continuous Integration, and linting.
  • vite-react-ssr-boost-template - Template for creating React 18 SSR/SPA apps with TypeScript, Mobx, React Router, Head Manager, Suspense, Streaming. Also included CI/CD, ESLint, Prettier, Stylelint, Husky, Semantic Release.
  • vite-react-ts-shadcn-starter - Template for creating React 18 SPA apps with TypeScript, React Router, Tailwind CSS, Shadcn UI, React Query, ESLint, Prettier, Stylelint, Husky, React-i18next, Transmart.
  • template-tauri-vite-react-ts-tailwind - Template for Tauri + React + Typescript + TailwindCSS + Prettier + ESLint build-in.
  • vite-react-chakra-starter - Starter template for creating React App with TypeScript and Chakra UI. Configured with ESLint, Prettier, and Husky.
  • vite-react-tailwind-starter - Starter template for creating React App with TypeScript and Tailwind CSS with Shadcn UI. Configured with ESLint, Prettier, and Husky.
  • monorepo-template-react - React + Typescript template for SSR, SPG, SPA and API provision.
  • vite-react-dapp-template - Starter template for decentralized app frontend development with preconfigured Wallet Authentication, i18n and UI features.
  • vite-express-ssr-ts - React + Typescript + ExpressJS + Vite SSR template with inbuild api feature.
  • vite-react-flow-template - React Flow starter template.
  • react-vite-template - Frontend template for building web apps (React, TypeScript, Vite, Mantine, Million, Husky, Prettier, Import Sorter, Lint-staged and others features).

Svelte

Solid

  • vite-solid - Vite + Solid starter template.
  • vitesse-solid - Opinionated Vite + SolidJS Starter Template. Includes TypeScript, ESLint, Prettier, UnoCSS, HopeUI and more.
  • vitesse-lite-solid - Lightweight Vite Starter Template for SolidJS.

Electron

Elm

Petite-Vue

VanJS

Others

Plugins

Framework-agnostic Plugins

Integrations

Loaders

Bundling

Transformers

Helpers

Testing


Vue

In this section, we use badges to indicate the targeted Vue version for each plugin.

v2 for Vue 2 only, v3 for Vue 3 only, and v23 for plugins that compatible with both versions.

💡 SSR frameworks are listed at SSR - Frameworks.

Integrations

Routing

Loaders

SSG

Ecosystem

Transformers

Helpers


React

Official

Presets

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

Routing

  • generouted - Client-side type-safe file-based routing and global modals — supports layouts, loaders, code-splitting and more.

Loaders

Transformers

Framework

Helpers

SSG

💡 SSR frameworks are listed at SSR - Frameworks.


Preact

Presets

  • @preact/preset-vite - Preact preset. HMR, automatic Preact inject, removal of DevTools in prod.

Svelte

Integrations

Helpers


Solid

Integrations

Routing

  • generouted - Client-side type-safe file-based routing and global modals — supports layouts, loaders, code-splitting and more.

Elm

Integrations


Angular

Integrations


Fastify

Integrations

Routing


Electron

Integrations

Presets


Rollup Plugins

Included in Vite

Covered by default in Vite

Compatible with Vite

Community

SSR

Libraries

  • vite-ssr - Simplified Server Side Rendering with an SPA-like developer experience. react vue3
  • vite-plugin-ssr - Like Nuxt/Next.js but as a do-one-thing-do-it-well plugin. react vue3 vue2 svelte
  • ssr - A Server Side Rendering framework combined with Webpack/Vite. react vue3 vue2
  • vavite - A tool for developing and building server-side applications with live reloading capabilities.
  • vue-ssr - Minimalistic wrapper to develop and run SSR powered Vue apps. vue3
  • vite-ssr-boost - Server side rendering library for create awesome app based on react-router. react

Frameworks

  • vitedge - Edge-side rendering with fullstack utilities. react vue3
  • vitext - The Next.js like React framework for better User & Developer experience. react
  • Rakkas - React framework inspired by Next.js and SvelteKit. react
  • Vise - SSR framework with server hooks. react vue3
  • @fastify/fastify-dx - Allowing you to serve static or live (SSR).
  • vite-plugin-vercel - Vercel adapter.

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

Flask

Ruby on Rails

Laravel

CakePHP

WordPress

TYPO3 CMS

Go

  • vite-go - Integration for Golang web apps.

Rust

OctoberCMS

  • Vitewind - Integration for OctoberCMS.

Symfony

Shopify

CodeIgniter

DDEV

  • ddev-viteserve - Add-on for running Vite in the PHP-oriented dev environment DDEV.

Node.js

ASP.NET Core

Migrations

Vue CLI

  • vue-cli-plugin-vite - Use Vite on Vue CLI with minimize codebase modifications.
  • webpack-to-vite - Convert a webpack project to vite project, also provides conversion details to help you migrate smoothly.

React

  • CRA migration guide - A step-by-step guide for migrating a project from Create React App.
  • Viject - One-shot migration tool from Create React App.

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.
  • îles - Islands of Interactivity with Vue3, multi-framework.
  • Astro - Modern Static Site Builder.
  • Hathora - Multiplayer game framework.
  • Nhost - Nhost is an Open Source Firebase Alternative with GraphQL.
  • Ladle - Tool for developing and testing component stories powered by Vite and React.
  • IslandJS - Static site generator base on islands architecture.
  • Vituum - Wrapper around Vite with predefined config, integrations and template engines.
  • Compiiile - Preview or host folders containing Markdown files with full-text search and presentation slides.

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.
  • react-device-frameset - This is yet another device frameset component for React.
  • vite-vue3-lowcode - Low code platform using Vue 3 + TypeScript + Composition API.
  • Context Note - A note-taking chrome extension built by Vue3 & Vite.
  • Preview.js - An IDE extension to instantly preview React, Vue 2 and Vue 3 components.
  • react-keyboard-navigator - A suite of React components and hook for selecting from sibling components through the keyboard.
  • pointer-lock-movement - A pointer lock movement manager for customizing your own creative UI.
  • vite-run - Multiple configuration execution support for vite, freely combining configurations like stacked blocks.