A curated list of awesome things related to Vite.js
Use the "Table of Contents" menu on the top-left corner to explore the list.
- create-vite - Scaffolding Your First Vite Project.
- create-vite-pwa - Same scaffolding options as
create-vite
, but with PWA support out-of-the-box. - create-vitawind - Scaffolding for TailwindCSS project.
- vite-vanilla-tailwind-v3 - Starter template for Tailwindcss and prettier-plugin-tailwindcss build-in.
- 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-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.
- vite-electron-ts - Electron 12, Vue 3 and TypeScript.
- vue-pure-admin - Background management template based on Vue3, TypeScript, Tailwind CSS, element-plus.
- 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
- 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 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 - 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-tail-fire - Vue 3 + Vite + Firebase 9 + Tailwind CSS.
- Vuelix - Vue 3 + Auth System + OpenAPI Client Generator + Routes Transitions + i18n + File System Routing + Layouts System + Universal Icons Framework.
- 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.
- electron-vite-boilerplate - Support SerialPort, SQLite3 and node C/C++ addons.
- Vitalis - Vue 3 / Vue Router 4 / TypeScript / Tailwind CSS / ESlint / Prettier.
- 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-pinia-ts-windi-starter - Pinia / TypeScript / Windi CSS / Vue Router 4 / ESLint / Prettier.
- 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.
- Vitectron - TypeScript & JSX + Vue 3.x + Vite 2.x + Pinia 2.x + Vue-Router 4.x.
- 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.
- vite-vue2-windicss-starter - Vue 2, Vue Router, Composition API, VueUse, Windi CSS and TypeScript.
- vite-ts-vue2-todo - Vue2 + ts + Vue-Router3 + Pinia1 + Composition API.
- vite-vue2-typescript - Vue2 TypeScript starter template using composition-api.
- vite-vue2-mpa-template - A multi-page application template using Vue2.
- vite-vue2-ts-starter - Vue2 TypeScript startar 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.
- vite-vue2-simple-starter - Vue2 + Vue Router + Vuex + Axios Api + SASS With Sample Code.
- vite-reactts-electron-starter - React, Tailwind CSS, TypeScript and Electron.
- 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.
- template-vite-minimal - Vite + React + TypeScript + ESLint + Prettier.
- 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.
- vite-react-express-boilerplate - Full-Stack template with React and Express.
- vite-react-express-docker-boilerplate - Full-Stack template with Docker, React, and Express.
- vite-react-ts-starter - React, TypeScript, Jest, ESLint, Prettier, TailwindCSS, Husky, Conventional Commits.
- vite-react-tailwind-jit - React with TailwindCSS configured.
- vital - React, TypeScript, Tailwind (JIT), CSS-Modules, Jest, Atomic Design, Prettier, Husky, Commit-lint.
- vite-react-electron - Vite + React + Electron template.
- vite-react-vendor-split - React + TypeScript + Vendor Chunk Splitting.
- vite-react-stitches-radix - React, ESLint, Stitches, Radix.
- vite-react-ts-ghactions-template - React, TypeScript, Jest + 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. - vite-react-ts-extended - React, TypeScript, TailwindCSS, MSW, Axios, Jest, React Testing Library, ESLint, Prettier, GitHub Actions.
- SvelteKit - The fastest way to build Svelte apps.
- sttv - Svelte, Tailwind CSS, TypeScript.
- svelte-vite-ssr - Svelte with SSR support.
- vite-elm-template - A default template for building Elm applications.
- mithril-vite-starter - Template for Mithril projects.
- mithril-ts-vite-starter - Template for Mithril projects with TypeScript.
- P5.js Starter Template - Templates for creating P5.js sketches.
- vit-singlefile-gzip - Starter template for embedded.
- 11st-Starter-Kit - 11ty, powered by Vite with Tailwind CSS and Alpine.js.
- @vitejs/plugin-legacy - Legacy browser support.
- 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-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.
- vite-plugin-sass-dts - This is a plugin that automatically creates a type file when using the CSS module type-safely.
- vite-esbuild-typescript-checker - Type checker (TypeScript, Vue SFC, etc.) based on the webpack 5 plugin.
- vite-plugin-simple-gql - Easily import .graphql and .gql files.
- vite-plugin-ali-oss - Upload the production files bundled in the project to Ali OSS, except for HTML.
- vite-plugin-flow - Flow type checker support.
- vite-plugin-webfont-dl - Downloads and injects webfonts (Google Fonts) to improve website's performance.
- vite-plugin-babel - Babel integration for both build and server to support f.ex. decorators or class fields in pure JS/JSX files.
- vite-plugin-resolve - Custom resolve module content.
- vite-plugin-electron-renderer - Use Electron and Node.js API in Renderer-process.
- vite-plugin-fast-external - Support browser, Node.js and Electron. Without lexical transform. Support custom external code.
- vite-plugin-optimizer - Manually Pre-Bundling.
- vite-plugin-dynamic-import - Enhance Vite builtin dynamic import.
- 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.
- vite-plugin-svg-path-hot - Dynamic Created Svg Folder And Hot update.
- vite-plugin-raw - Transform any type file to string.
- vite-plugin-image-presets - Define presets to automatically create and optimize responsive images.
- 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-vue-docs - Analyze vue components to automatically generate previewable documents.
- vite-compression-plugin - Use Node.js stream compress file to gzip or more.
- vite-plugin-chunk-split - Automatically code splitting, support unbundle in production.
- vite-plugin-static-copy - Copy files and folders.
- 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-require-context - Supports
require.context
. - vite-plugin-commonjs - Support CommonJS to ESM.
- vite-plugin-content - Convert
yaml
,xml
,ini
,toml
,csv
,plist
andproperties
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.
- vite-plugin-shared-modules - Share node_modules in monorepos.
- vite-plugin-nunjucks - Nunjucks templating engine.
- vite-plugin-require-transform - Converts the code from require syntax to import.
- vite-plugin-twig - Twig template engine support.
- vite-plugin-stache - CanJS's template engine. Transforms
stache
files and template strings. - vite-plugin-pug-transformer - Pug template engine support.
- @import-meta-env/unplugin - Inject environment variables into the
import.meta.env
object after building the application instead of statically replacing it during production.
- vite-tsconfig-paths - Support for TypeScript's path mapping.
- vite-plugin-style-import - Introduces component library styles on demand.
- vite-plugin-theme - Dynamically changing the theme color.
- vite-aliases - Alias auto-generation based on project structure.
- vite-plugin-imp - Import library component styles on demand, make your app slimmer.
- vite-plugin-mkcert - Provide certificates https dev server.
- vite-plugin-vconsole - Help developers use vconsole to facilitate mobile development and debugging.
- vite-dts - Blazing fast plugin that generates
.d.ts
modules for libraries. - vite-plugin-externals - Exclude dependencies from the output bundles.
- 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.
- vite-plugin-proxy-middleware - A Plugin allows you to turn on
proxy
andh2
options at the same time. - @zougt/vite-plugin-theme-preprocessor - Easily implementing dynamic themes based on LESS or SASS.
- vite-plugin-remove-console - A vite plugin that deletes console.log in the production environment.
- vite-plugin-dev-manifest - Generates
manifest.dev.json
during dev server, for backend integration with any language/framework. - vite-plugin-watch-and-run - Watch some files (glob) and trigger a command. To enable any tool to have a watch mode.
- vite-plugin-dynamic-base - Resolve all resource files dynamic publicPath.
- vite-plugin-redirect - Redirect server requests.
- vite-plugin-live-reload - Live reloading.
- vite-plugin-simple-vconsole - A debug console view inside your app to make mobile debugging easier, for both SPA and MPA.
- vite-plugin-file-mock - File system based local mock plugin.
- 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-plugin-nightwatch - Nightwatch integration. Test your Vue or React components in isolation.
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.
- @vitejs/plugin-vue - Official Vue 3 support.
- @vitejs/plugin-vue-jsx - Official Vue 3 JSX support.
- vite-plugin-vue2 - Vue 2 integration.
- unplugin-vue2-script-setup - Enabling
<script setup>
syntax for Vue 2.
- vite-plugin-pages - File system based route generator.
- 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.
- vite-plugin-vue2-svg - Load SVG files as Vue components.
- vite-ssg - Server-side generation.
- vite-plugin-vue-i18n - Integration for Vue I18n.
- vite-plugin-i18n-resources - Load i18n translation message files.
- 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.
- vite-plugin-vue-inspector - Jump to local IDE source code while click the element of browser.
- @vitejs/plugin-react - The all-in-one Vite plugin for React projects.
- vite-preset-react - All in one preset for your React app - HMR, Automatic React inject, removal of DevTools in prod.
- 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.
- 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.
- vite-plugin-svelte - Adds Svelte support. Official plugin of Svelte team.
- vite-plugin-solid - Provides JSX transformation for Solid.
- vite-plugin-elm - A plugin that enables you to compile an Elm module.
- @nxext/angular-vite - A plugin that uses SWC to compile Angular modules.
- Vite Rollup Plugins - Compatibility list for official rollup plugins.
- @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.
- @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.
- @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.
- rollup-plugin-graphql-codegen - Generating type definitions for GraphQL tag template strings in worker_threads.
- rollup-plugin-i18next-dts-gen - Generating type definitions from i18n JSON files are used for code hinting and validation.
- Check the Awesome Rollup list for community-maintained rollup plugins, and refer to the Vite docs section about rollup plugin compatibility.
- 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.
- ssr - A Server Side Rendering framework combined with Webpack/Vite.
- 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
- AEM Vite - Integration for Adobe Experience Manager and AEM SDK.
- Craft Vite - Plugin for integration with Craft CMS.
- Vite.js Docker Dev - Local development environment for developing Vite via Docker container.
- django-vite - Integration for Django applications.
- vite-plugin-ruby - Configuration for Ruby backends.
- Vite Ruby - Integration for Rails, Hanami, Padrino, and Rack apps.
- Laravel Vite - Integration for the Laravel framework.
- cakephp-vite - Integration for CakePHP.
- Vite + TailwindCSS - Integration for WinterCMS.
- wordpress-vite-assets - Integration for WordPress themes.
- 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.
- CRA migration guide - A step-by-step guide for migrating a project from Create React App.
- 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.
- 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.
- Context Note - A note-taking chrome extension built by Vue3 & Vite.