axe-me/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

• Resources
  • Official Resources
• Get Started
  • Templates
    • Vue 3
    • React
• Plugins
  • Framework-agnostic Plugins
    • Integrations
    • Loaders
    • Resolvers
    • Helpers
    • Bundling
  • Vue 3
    • Official
    • Routing
    • Loaders
    • SSR / SSG
    • Integrations
    • Helpers
    • Bundling
  • Vue 2
    • Integrations
  • React
    • Official
    • Loaders
    • Framework
  • Solid
    • Integrations
  • Rollup Plugins
    • Included in Vite
    • Compatible with Vite
    • Community
• Integrations with Backends
  • Ruby on Rails
• Projects Using Vite.js
  • Open Source
  • Apps/Websites

Resources

Official Resources

• Documentation
• GitHub Repo
• Release Notes
• Vue 3 Docs
• Awesome Vue
• Migration from v1

Get Started

• @vite/create-app - Scaffolding Your First Vite Project.

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.

React

• vite-reactts-electron-starter - React, TailwindCSS, TypeScript and Electron.

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.

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.

Resolvers

• vite-tsconfig-paths - Support for TypeScript's path mapping.

Bundling

• vite-plugin-compress - Compress your bundle + assets.
• vite-plugin-imagemin - Compress image assets.

Transformers

• vite-plugin-html - Plugin to minimize and use ejs template syntax in index.html.

Helpers

• 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-test - Headless testing your component.

---

Vue 3

Official

• @vitejs/plugin-vue - Official Vue support.

Routing

• vite-plugin-voie - File system based routing.
• vite-plugin-pages - File system based route generator.

Loaders

• vite-plugin-vuedoc - Markdown Code block as Vue Preview components.
• vite-plugin-md - Markdown as Vue components / Vue components in Markdown.
• vite-svg-loader - Load SVG files as Vue components.

SSR / SSG

• vite-ssg - Server-side generation.
• vite-ssr - Server-side rendering.
• vitedge - Edge-side rendering with fullstack utilities.

Integrations

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

Bundling

• vite-plugin-multi-device - Outputs for different devices.

---

Vue 2

Integrations

• vite-plugin-vue2 - Vue 2 integration.

---

React

Official

• @vitejs/plugin-react-refresh - Official React Refresh support.

Loaders

• vite-plugin-svgr - Transform SVGs into React components.

Framework

• vite-plugin-react-pages - A Vite framework for building React app.

Integrations

• @brillout/vite-plugin-mdx - Use MDX for your Vite app, with support for MDX v1, MDX v2, HMR, and SSR.

---

Solid

Integrations

• vite-plugin-solid - Provides JSX transformation for Solid.

---

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

Integrations with Backends

Ruby on Rails

• vite-plugin-ruby - Vite configuration for Ruby backends.
• vite_rails - Manage your Rails assets with Vite.

Projects Using Vite.js

Open Source

• VitePress - Static Site Generator powered by Vite and Vue.
• TroisJS - Three.js integration with Vite and Vue 3.

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.
• TypGame - Test your typing performance.
• aitrack.work - A task-based time tracker for everyday use.
• macOS Web - macOS Desktop experience for Web.