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.
Use the "Table on Contents" menu on the top-left corner to explore the list.
- @vite/create-app - Scaffolding Your First Vite Project.
- 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-wind - Boilerplate with Tailwind CSS, TypeScript, css-pro-layout, 9+ components and dark mode support.
- d2-advance - Boilerplate with Tailwind CSS, TypeScript. Advanced, colorful front-end integration practice.
- 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.
- 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.
- sttv - Svelte, TailwindCSS, TypeScript.
- svelte-vite-ssr - Svelte with SSR support.
- 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-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-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.
- 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-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.
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.
- @vitejs/plugin-vue - Official Vue 3 support.
- vite-plugin-vue2 - Vue 2 integration.
- vite-plugin-voie - File system based routing.
- vite-plugin-pages - File system based route generator.
- 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.
- vite-ssg - Server-side generation.
- vite-ssr - Server-side rendering.
- vitedge - Edge-side rendering with fullstack utilities.
- vite-plugin-vue-i18n - Integration for Vue I18n.
- vite-plugin-i18n-resources - Load i18n translation message files.
- vite-plugin-components - On-demand components auto-importing.
- vite-plugin-multi-device - Outputs for different devices.
- @vitejs/plugin-react-refresh - Official React Refresh support.
- 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-twstyled - Plugin to compile Tailwind CSS with JSX and CSS-in-JS support.
- vite-plugin-react-pages - A Vite framework for building React app.
- vite-plugin-solid - Provides JSX transformation for Solid.
- 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 which loads virtual modules from memory.
- @rollup/plugin-yaml - Convert YAML files to ES6 modules.
- Check the Awesome Rollup list for community maintained rollup plugins, and refer to the Vite docs section about rollup plugin compatibility.
- Vite Ruby - Integration for Rails, Hanami, Padrino, and Rack apps.
- vite-plugin-ruby - Configuration for Ruby backends.
- vue-cli-plugin-vite - Use Vite on Vue CLI with minimize codebase modifications.
- VitePress - Static Site Generator powered by Vite and Vue.
- TroisJS - Three.js integration with Vite and Vue 3.
- 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.
- TypGame - Test your typing performance.
- aitrack.work - A task-based time tracker for everyday use.
- macOS Web - macOS Desktop experience for Web.