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.
  • vitesse-lite - Lightweight version of Vitesse.
  • vitesse-webext - WebExtension Vite Starter Template.
  • naive-ui-dashboard-template - UI friendly, Vue 3 + TSX + TailwindCSS 2 JIT + PostCSS + Naive UI.
  • Vitawind Creator - Create TailwindCSS project rapidly.
  • vue3-tailwind3-website-starter - Vue3 / Vite / TailwindCSS website starter template, with guides on each page.
  • boot-vue - Starter template with TypeScript + UnoCSS + DaisyUI + Vue Router + Pinia.
  • Vue Naive - Admin template, base on Vue 3 + Pinia + Naive UI.
  • vue-admin-box - Admin template, based on Vue 3 + Element-plus.
  • 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 - Vite5 + Vue3 + Vant4 + Pinia + Vue-Router4 + TypeScript Mobile Template.
  • vue-vite-tw-ts - Vue 3 + Vite + Vitest + Cypress E2E + Naive UI + Pinia + Vue Router.
  • vite-vue-js-starter-template - Vite + Vue3 + JavaScript + Vue Router + Pinia + TDesign + ESLint + Stylelint + Prettier Simple Template.
  • vue-xs-admin - Based on Vue3, Vite3 ElementPlus, TypeScript, Pinia, VueRouter.
  • vulcan - The template for mobile application. Vite, Vue 3, TypeScript, Sass, i18n, Vitest&Cypress, Pinia, APIs&Mock, ESLint, Prettier, auto-importing.
  • 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.
  • arco-admin - Vite + ArcoDesign + TypeScript follows ESM standards, offering an out-of-the-box,standardized, feature-rich template for middle and back-office management systems.
  • materio-free-vuetify-nuxtjs-admin-template - Vuejs 3, Vite 5, Vuetify 3 & NuxtJS 3.
  • vite-plugin-vue-style-bundler - Auto bundle Vue/sfc styles into JavaScript.
  • celeris-web - Template based on Vite + Vue3 + TypeScript + Vue-Router + Pinia + Unocss + Naive UI + pnpm Monorepo.
  • vite-ts-starter - Vue I18n Dynamic Router Localization Template, Internationalized Applications with UnoCSS + Unplugin + Element-Plus + Vitest + TypeScript + Vue-Router + Vuex + Scss + ESLint + Stylelint + Husky + lint-staged.

Vue 2

  • vite-vue2-windicss-starter - Vue 2, Vue Router, Composition API, VueUse, Windi CSS and TypeScript.
  • vite-vue2-ts-starter - Vue2 TypeScript starter template using vue-property-decorator, vue-router, Vuex.
  • vite-vue2-ts-vuetify-starter - It is the above vite-vue2-ts-starter with Vuetify and its optimized settings. Includes basic templates.
  • vitify-admin - Vuetify admin starter template with full TypeScript support and intellisense of Vuetify components.

React

  • Vitamin - React TypeScript, TailwindCSS, SPA + PWA, Cypress and CI.
  • 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.
  • vite-react-ts-tailwind-firebase-starter - Starter using Vite + React + TypeScript + Tailwind CSS (daisyUI) + Firebase (v9) + Prettier + ESLint.
  • create-react-app-vite - React, TypeScript, TailwindCSS, MSW, Vitest, React Testing Library, ESLint, Prettier, GitHub Actions.
  • chrome-extension-boilerplate-react-vite - React + TypeScript + SASS + Prettier + ESLint + GitHub Actions + HMR(Hot Module Reload) + Turborepo + Chrome Extension Manifest v3.
  • 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.
  • react-vite-ssr - Mobx, Typescript, Eslint, Stylelint, Husky, Lint-staged and Commitlint.
  • Viterts - React + TypeScript + Redux + React Router + Jest + ESLint + Airbnb + Prettier + SASS.
  • ViteRC - React 18 + TypeScript + ESLint (Airbnb) + Prettier + Husky + Jest + Absolute imports + Commit linting.
  • 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.
  • 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.
  • 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.
  • template-vite-react-ts-tailwind - React + TypeScript + Tailwind CSS + Eslint + Prettier.
  • 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-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 - React, TypeScript, Vite, Mantine, Million, Husky, Prettier, Import Sorter, Lint-staged.
  • gravity-ui-vite-template - Template with Gravity UI ecosystem (React, TypeScript, Gravity UI, Vite, Husky, ESLint, Prettier, Lint-staged).
  • vite-react-component-library-starter - A starter template for creating React component libraries with TypeScript, Tailwind CSS, Storybook, Vitest, ESLint, Prettier, Husky, and GitHub Action.
  • vite-template-awesome-soho - DevContainer Template for creating React 18, Javascript + JSDoc, React Router, Ant Design, ESLint, EditorConfig, .env, SonarLint, Vitest.
  • react-component-library-vite - A library template for with React, Javascript,Styled-Components, Vitest, React Testing Library, Storybook.
  • ReTail - Starter template for building Full Stack WEB applications with Remix using TypeScript, Tailwind CSS, Prettier and ESLint.
  • vite-react-redux-saga-typescript - Starter template with React, TypeScript, Redux (Redux Toolkit), Saga, React Testing Library, ESLint, Prettier and Husky.
  • vite-complete-react-app - Starter template for building web applications using React, TypeScript, Redux Toolkit, React Router, Axios, Sass, Moment, ESLint, Prettier and React Testing Library.
  • vite-react-framer-starter - Starter template with React, TypeScript, Framer Motion, Tailwind CSS, ESLint, and Prettier.
  • vite-jsx-remove-attributes - Remove the data-testid (configurable) from production builds.
  • React Tanning - Starter template with React + Vite + TypeScript + TanStack + Tailwind.
  • Reactive - React starter template with Remix file-based routing convention for react-router, UnoCSS, LinguiJs, zustand, and ton of features.
  • RVTGB - React + TypeScript starter template, with file-based routing with Generouted and Biome.
  • vite-biome-tailwind-template - React, Typescript, Biome, Tailwind CSS.
  • React Dapp Starter - Enterprise-ready Web3 DApp starter with TypeScript, TailwindCSS, Web3Modal, Wagmi, Shadcn UI, Zustand, and TanStack Query for scalable decentralized applications.
  • vite-template-react-ts-jest - React + TypeScript + Jest.
  • vite-amplify - Template with SSR + Express APIs + AWS Amplify Hosting.

Svelte

Solid

  • 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

Neutralino

Elm

Petite-Vue

VanJS

GitHub

  • github-action-template - Starter template for GitHub Actions, Typescript, ESLint, Vitest, Husky, Conventional Commits.

Others

Plugins

Framework-agnostic Plugins

Integrations

Loaders

Bundling

Transformers

Helpers

Testing

Security

  • vite-plugin-csp-guard - Lets you configure a Content Security Policy to your project, supports all directives and hashing.

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

Routing

  • generouted - Client-side type-safe file-based routing and global modals — supports layouts, loaders, code-splitting and more.
  • unplugin-remix-router - Generates a React Router file, that depends on Remix v2 file-based router convention.
  • vite-plugin-remix-flat-routes - Remix-flat-routes convention-based routing, compatible with react-router data-api routing.

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

  • Vike - 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
  • SSRx - A thin layer on top of Vite to build modern SSR apps with a delightful DX.
  • Vinxi - The Full Stack JavaScript SDK. Allows adding SSR to a Vite app.

Frameworks

Integrations with Backends

Adobe Experience Manager

Craft CMS

  • Craft Vite - Plugin for integration with Craft CMS.

Django

Flask

Ruby on Rails

Laravel

CakePHP

WordPress

TYPO3 CMS

Go

  • vite - Integration with Go.

Rust

OctoberCMS

Symfony

Shopify

CodeIgniter

DDEV

Node.js

ASP.NET Core

Drupal

PHP

  • PHP-Vite - Integration for PHP, Composer package, no framework dependencies.
  • PHP-Vite Starter Repo - Starter repository, with TypeScript/JavaScript, Tailwind CSS, SASS/SCSS, EJS, SVG and image support.
  • php-vitelinker - A CLI tool that generates includable PHP files after building bundles.

Migrations

Vue CLI

React

  • Viject - One-shot migration tool from Create React App.

Projects Using Vite.js

Open Source

  • VitePress - Static Site Generator powered by Vite and Vue.
  • Slidev - Presentation Slides for Developers.
  • 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.
  • Gracile - A meta-framework powered by Lit SSR.
  • @lazarv/react-server - A React meta-framework.
  • WXT - Framework for building web extensions, with the same DX as Nuxt.

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.
  • 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.
  • Preview.js - An IDE extension to instantly preview React, Vue 2 and Vue 3 components.
  • 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.
  • Dataviz Explorer - A tool for large CSV, database, and real-time visualization with interactive plots using Highcharts, Chart.js, React, JavaScript, Material UI and GitHub Actions with Coverage Report.