Awesome Vite.js

Official and community plugins for Vue development. Note the version compatibility badges:

• Official Vue 3: @vitejs/plugin-vue and @vitejs/plugin-vue-jsx.
• Official Vue 2: @vitejs/plugin-vue2 and @vitejs/plugin-vue2-jsx.
• Community Vue 2: vite-plugin-vue2 and unplugin-vue2-script-setup (enables <script setup> for Vue 2).

Tools for testing applications built with Vite:

• Vitest: The native Vite testing framework. Use vitest-mock-extended for type-safe mocking and vite-plugin-doctest for documentation testing.
• Cypress: Use cypress-vite to run Cypress specs using Vite.
• LLM Testing: @poyro/vitest for testing LLM integrations.

A collection of plugins to enhance the development experience, including:

• Path Mapping: vite-tsconfig-paths (TypeScript path mapping) and vite-aliases (auto-generated aliases).
• Mocking: vite-plugin-mock-server, vite-plugin-mock-data, and vite-plugin-mock-dev-server for API mocking.
• Debugging: vite-plugin-vconsole and vite-plugin-simple-vconsole for mobile debugging, vite-plugin-inspect to inspect plugin states, and vite-bundle-analyzer for interactive bundle treemaps.
• Server/Workflow: vite-plugin-restart (restart server on file changes), vite-plugin-full-reload (browser reload), vite-plugin-qrcode (show QR code on start), and vite-plugin-ngrok (share local server via Ngrok).

Since Vite is frequently used with Vue, the following resources are provided:

• Vue 3 Documentation: https://vuejs.org/
• Awesome Vue: https://github.com/vuejs/awesome-vue

Many popular open-source projects use Vite for their development or production builds:

Static Site Generators & Frameworks

• VitePress: Static Site Generator powered by Vite and Vue.
• Astro: Modern Static Site Builder.
• Slidev: Presentation slides for developers.
• IslandJS: Static site generator based on islands architecture.
• WXT: Framework for building web extensions.

Developer Tools

• Ladle: Component story development and testing (React).
• Preview.js: IDE extension for instant component previews (React, Vue 2, Vue 3).
• Vituum: Vite wrapper with predefined configs and template engines.

For core information regarding Vite.js, use the following official links:

• Documentation: https://vitejs.dev/
• GitHub Repository: https://github.com/vitejs/vite
• Release Notes: https://vitejs.dev/vite/CHANGELOG.md
• Migration Guide (v4): https://vitejs.dev/guide/migration.html

Plugins for handling specialized file types in Vue projects:

• Markdown: vite-plugin-md (Markdown as Vue components) and vite-plugin-markdown-mermaid (Markdown with Mermaid support).
• SVG: vite-svg-loader, unplugin-svg-component, and vite-plugin-vue2-svg to load SVGs as Vue components.
• SSG: vite-ssg for Server-side generation (Vue 3).

Plugins designed for build-time optimization and production safety:

• Optimization: vite-plugin-external (exclude dependencies from bundles), vite-plugin-remove-console (delete console.log in production), and vite-font-extractor-plugin (minify fonts).
• Validation: vite-plugin-validate-env and vite-plugin-valibot-env for validating environment variables at build time.
• Deployment/Assets: @froxz/vite-plugin-s3 (upload to S3), vite-plugin-dynamic-base (dynamic publicPath), and vite-plugin-serve-static (serve files outside public/).

Plugins to automate route generation based on the file system:

• unplugin-vue-router: Official experimental file-based routing (Vue 3).
• vite-plugin-pages: File system based route generator (Vue 2/3).
• vite-plugin-vue-routes: File-based routing similar to SvelteKit/Next.js App Router (Vue 3).
• v-route-generate: A tool to generate routes (Vue 3).

Plugins to implement Content Security Policy (CSP):

• vite-plugin-csp-guard: Configure CSP with support for all directives and hashing.
• vite-plugin-csp: Automatically calculates asset hashes (SRI) and detects Google Fonts for SPAs. Supports Bun and Node.js runtimes.

Fastify

• vite-plugin-fastify: Adds Hot-module Replacement (HMR) support to Fastify.
• vite-plugin-fastify-routes: Provides file-based routing similar to SvelteKit or Next.js App Router.

Electron

• electron-vite: An Electron CLI integrated with Vite.