vitejs/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

Table of Contents

Use the "Table of Contents" menu on the top-right corner to explore the list.

Resources

Official Resources

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

Get Started

• create-vite - Scaffolding Your First Vite Project.
• create-vitawind - Scaffolding for TailwindCSS project.
• create-electron-vite - Scaffolding Your Electron + Vite Project.
• create-vite-app - Scaffolding Your Out Of The Box Vite Project.
• create-nx-workspace - Scaffolding a Nx + React + Vite + Vitest.
• bati - Scaffolding a Vike project.
• create-awesome-node-app - Scaffolding your project choosing between different templates.

Templates

Vanilla

• vite-vanilla-ts-lib-starter - Starter for library (CJS, ESM, IIFE) with TypeScript, ESLint, Stylelint, Prettier, Jest, Husky + lint-staged.
• vite-tailwind-nojs-starter - NoJS Tailwind CSS starter template.
• vite-tailwind-stimulus-starter - Starter template for Tailwind CSS and Stimulus controllers.
• vite-phaser-ts - Starter template with Phaser and Typescript.
• vite-tinybase - Starter template for TinyBase.
• vite-tinybase-ts - Starter template for TinyBase and TypeScript.
• vite-vanilla-js-template - Starter template ESlint, Prettier, PostCSS, Nesting, Autoprefixer, CSS Nano, CSS Reset.
• vite-starter-markup-template - Starter template for Markup.
• create-domco - Starter template for domco SSG.
• vite-vanilla-library-template - Starter template TypeScript, ESLint, Vitest, Husky, Conventional Commits, GitHub actions.
• vite-alpine-template - Starter template for Alpine.

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.

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.

Svelte

• SvelteKit - The fastest way to build Svelte apps.
• svelte-vite-ssr - Svelte with SSR support.
• template-vite-svelte-ts-tailwind - Svelte + TypeScript + Tailwind CSS + Prettier.
• vite-svelte-flow-template - Svelte Flow starter template.

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

• electron-vite-vue - Electron + Vite + Vue template.
• electron-vite-react - Electron + Vite + React template.
• electron-vite-boilerplate - Support SerialPort, SQLite3 and node C/C++ addons.
• electron-vite-template - Electron 13, Vue 3 and TypeScript. Make your desktop development easier.
• fast-vite-electron - Vue3 + Vite + Electron with esbuild.
• fast-vite-nestjs-electron - Vue3 + Vite + Electron + Nestjs with esbuild.
• vite-plugin-electron-quick-start - Template for Electron projects.
• vite-electron-builder - Electron apps using Vite for both back and front-end, with automatic releases.
• vite-reactts-electron-starter - React, Tailwind CSS, TypeScript and Electron.
• electron-vue-template - Electron template with TypeScript, including Electron Builder.
• Vitron - Build beautiful (win, linux, mac) desktop apps for modern web projects with vite and electron.
• Vutron - Electron + Vite + Vue 3 + Pinia (TypeScript) template.
• vite-electron-plugin - High-performance, esbuild-based Vite Electron plugin.
• vite-plugin-doubleshot - For building Node.js backend or Electron main process.

Neutralino

• vite-react-neutralino-template - Neutralino + Vite + React template.

Elm

• vite-elm-template - A default template for building Elm applications.
• elm_vite_tailwind_template - Opinionated template for building Elm web apps using Tailwind CSS and Daisy UI.

Petite-Vue

VanJS

GitHub

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

Others

• vit-singlefile-gzip - Starter template for embedded.
• 11st-Starter-Kit - 11ty, powered by Vite with Tailwind CSS and Alpine.js.
• chrome-ext-template-preact-windi-vite - Preact, Windi CSS, TypeScript, Prettier, ESLint, GitHub Actions and Chrome Extension Manifest v3.
• vite-vue3-chrome-extension-v3 - Web extension starter template for Chrome, Firefox and Edge.

Plugins

Framework-agnostic Plugins

Integrations

• @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-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-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-plugin-ali-oss - Upload the production files bundled in the project to Ali OSS, except for HTML.
• 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-electron - Integrate Vite and Electron.
• vite-plugin-optimizer - Manually Pre-Bundling.
• vite-plugin-babel-compiler - The plugin works with Babel compiler.
• vite-plugin-commonjs - A pure JavaScript implementation for CommonJs.
• vite-plugin-mpa-plus - More flexible MPA (multi-page application) supports html templates, path rewriting.
• vite-plugin-multi-pages - Multi Pages Support，can build src/pages anyPage，can set prefixName.
• vite-plugin-html-template-mpa - Multi Pages Common template support.
• vite-plugin-vconsole-mpa - Multi Pages Vconsole supports，simple config.
• vite-plugin-browser-sync - BrowserSync.
• vite-plugin-jspm - Resolves dependencies independently from CDN providers using import maps and es-module-shims.
• vite-plugin-env-switch - Switch project env and restart vite server without command line operation.
• vite-plugin-virtual-mpa - Out-of-box MPA plugin, with html template engine and virtual files support, which generate multiple files using only one template.
• vite-plugin-stylelint - Runs Stylelint synchronously/asynchronously.
• Vite-plugin-graphiql - Integration for GraphiQL IDE.
• vite-plugin-graphql-server - Bootstrap a local GraphQL server for testing and documentaion.
• unplugin-fonts - Load font from Typekit, Google Fonts, Fontsource or your own custom one.
• unplugin-config - Configuration file generator for web apps, allowing external customization of global variables without repackaging.
• vite-plugin-svg-spritemap - Generates a SVG spritemap from multiple .svg files.
• vite-plugin-dc - Integration with @dvgis/dc-sdk library.
• @spiriit/vite-plugin-svg-spritemap - Pack your SVG files in one spritemap file and use them with <svg>/<img> and directly in your CSS.
• vite-plugin-auto-mpa-html - A file directory-based automated multi-page build plugin that supports HTML templates using EJS.
• vite-plugin-cloudflare-functions - Cloudflare pages function integration.
• @storybook/builder-vite - Storybook builder.
• @builder.io/partytown - Relocate resource intensive third-party scripts off of the main thread and into a web worker.
• vite-plugin-dynamic-proxy - Automatically configure reverse proxies based on URL parameters.
• unplugin-auto-export - Automates the maintenance of export statements in the index.ts file.
• remix-development-tools - Plugin for Remix.run development tools.
• vite-plugin-legacy-swc - Legacy browser support with SWC.
• vite-plugin-biome - Biome linter.
• vite-plugin-oxlint - Oxlint linter.
• @tomjs/vite-plugin-electron - Easily develop Electron applications.
• @tomjs/vite-plugin-vscode - Easily use web frameworks to develop VSCode Extension's Webview, and support HMR and Debug.
• vite-plugin-px-rem-vw - Integrate PostCSS plugin pxTorem and pxTovw.
• vite-plugin-mpg - Simple configuration of multi page applications.
• vite-plugin-pagefind - Integrate pagefind search.

Loaders

• unplugin-icons - Access thousands of icons as components.
• vite-imagetools - Load and transform images using url query parameters.
• vite-plugin-radar - All in one analytics loader (with 7+ providers supported).
• vite-plugin-glsl - Import shader file chunks.
• vite-plugin-svgo - Load SVGs as plain string and transform with SVGO library.
• vite-plugin-remark-rehype - Loads and transform markdown files using the unified ecosystem.
• vite-plugin-php - Load and process PHP-entry files instead of default index.html.
• vite-plugin-lqip - Generate low quality image placeholders (LQIP).
• vite-plugin-ms-clarity - Inject the Microsoft Clarity script to index.html.
• @cyco130/vite-plugin-mdx - Import MDX.
• vite-awesome-svg-loader - Imports SVGs as source code, base64 and data URI. Preserves stroke width, replaces colors with currentColor. Optimizes SVGs with SVGO. Creates SVG sprites.
• vite-plugin-dir2json - Convert the directory structure into json data containing supported file paths.

Bundling

• rollup-plugin-critical - Generate critical CSS.
• vite-plugin-dts - Generate declaration files from .ts or .vue source files for lib.
• 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-zip-file - Compress files or folders into zip.
• vite-plugin-zip-pack - Pack distribution/build folder into a zip file.
• vite-plugin-cp - Copy files after building bundles.
• unplugin-imagemin - High performance compressed Picture based on squoosh and sharp.
• vite-plugin-image-optimizer - Optimize (compress) your image assets using Sharp.js and SVGO at build time.
• vite-plugin-no-bundle - Generate unbundled code for use with native ESM or other bundlers.
• vite-plugin-css-injected-by-js - Takes the CSS and adds it to the page through the JS.
• unplugin-zip-pack - Zip your dist with filter function support.
• vite-plugin-singlefile - Inline all JavaScript and CSS resources directly into the final dist/index.html file.
• vite-plugin-node-polyfills - Polyfill Node's Core Modules for browser environments.
• vite-plugin-cdn2 - Replace module with CDN.
• vite-plugin-bundle-prefetch - Inject prefetch assets into index.html.
• vite-plugin-imagemin - Optimize and compress your image assets and optionally create WebP/AVIF.
• vite-plugin-lib-types - Generate DTS file while building library.
• vite-plugin-minipic - Efficient image compression tool.
• vite-plugin-robots - Generating robots.txt.

Transformers

• 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-virtual-html - Make Vite MPA consistent with @vue/cli.
• vite-plugin-content - Convert yaml, xml, ini, toml, csv, plist and properties files to ES6 modules.
• vite-plugin-require - A Vite plugin that supports require by code transforming.
• 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-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.
• @modyfi/vite-plugin-yaml - Transform YAML files to ESM with schema validation and error reporting.
• vite-plugin-html-inject - Split the index.html into smaller reusable pieces.
• unplugin-inject-preload - Inject <link rel="preload"> to your index.html based on your build assets.
• @vituum/vite-plugin-handlebars - Handlebars template engine support, transforms .hbs templates to .html.
• @vituum/vite-plugin-pug - Pug template engine support, transforms .pug templates to .html.
• @vituum/vite-plugin-nunjucks - Nunjucks template engine support, transforms .njk templates to .html.
• @vituum/vite-plugin-liquid - Liquid template engine support, transforms .liquid templates to .html.
• @vituum/vite-plugin-twig - Twig template engine support, transforms .twig templates to .html.
• @vituum/vite-plugin-latte - Latte template engine support, transforms .latte templates to .html.
• @vituum/vite-plugin-posthtml - PostHTML support, transforms syntax to .html.
• @vituum/vite-plugin-juice - Juice support, transforms .css to inline styles in .html.
• vite-plugin-version-mark - Automatically use package version / git commit / custom to be inserted into your project as a unique identifier for the project version.
• vite-plugin-css-export - Export variables from CSS to JavaScript, and support nested rules.
• vite-plugin-optimize-css-modules - Generate the smallest possible CSS-Classes when CSS-Modules are used.
• vite-plugin-generate-html - Define separate output files for JavaScript and CSS bundles.
• vite-plugin-turbo-console - Enhance the readability of console.log().
• vite-plugin-html-injection - Inject HTML, JavaScript and CSS code snippets into the index.html.
• vite-plugin-typescript-transform - Applies the TypeScript compiler during Vite's transform build phase.
• vite-plugin-public-typescript - Inject Typescript into index.html.
• unplugin-generate-component-name - Automatically generate component's name.
• @laynezh/vite-plugin-lib-assets - Extracts resource files referenced in library mode instead of embedded them as base64.
• css-media-splitter/vite-plugin - Extracts all @media At-rules into a dedicated .css files and download it only when matches the media query.
• @tomjs/vite-plugin-html - Support compression, loading, CDN and others for index.html.
• @tomjs/vite-plugin-iconify - Inject the global variable IconifyProviders into index.html for iconify, and support local area network and custom url.
• vite-plugin-icons-spritesheet - Generate a spritesheet and TypeScript types from SVG icons by listening to the icons folder changes.
• vite-plugin-abbrlink - Add the abbrlink attribute to the markdown file in the specified directory.

Helpers

• vite-tsconfig-paths - Support for TypeScript's path mapping.
• vite-aliases - Alias auto-generation based on project structure.
• vite-plugin-mkcert - Provide certificates https dev server.
• vite-plugin-vconsole - Help developers use vconsole to facilitate mobile development and debugging.
• vite-plugin-mock-server - Mock server plugin, support using TS and JS to write Mock API and HMR.
• 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 - Provides a way of excluding dependencies from the runtime code and output bundles.
• unplugin-auto-import - On-demand API auto-importing.
• vite-plugin-inspect - Inspect the intermediate state of Vite plugins.
• 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-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-qrcode - Show QR code on server start.
• vite-plugin-cem - Generates custom-elements.json manifest for describing custom elements.
• vite-plugin-web-update-notification - Detect webpage updates and notify user to reload. support vite and umijs.
• vite-plugin-browserslist-useragent - Compile browserslist query to a RegExp to test browser useragent.
• vite-plugin-validate-env - Validate your environment variables at build time. Never forget an environment variable again.
• vite-plugin-mock-data - Provides a simple way to mock data.
• vite-plugin-reverse-proxy - Sometimes we have to redirect scripts on production environment to debug and solve problems, the plugin will transform the script to be served with the text/javascript MIME type to module MIME type.
• vite-plugin-conditional-compile - Conditional compilation syntax based on environment variables.
• vite-plugin-mock-dev-server - Mock server for development, support CJS/ESM/JSON, auto-importing file and HMR.
• vite-plugin-api - Generate route mapping for API Routes services from the directory tree.
• vite-plugin-shortcuts - Add additional customized shortcut key population.
• vite-plugin-entry-shaking - Mimic tree-shaking behaviour when importing code from an entry file in development mode.
• vite-plugin-auto-alias - Automatically generate alias based on path.
• vite-plugin-image-placeholder - Generate placeholder images by path matches.
• vite-plugin-find-image-duplicates - Find if there are duplicate images in your project when building it.
• @froxz/vite-plugin-s3 - Allows you to upload files to S3.
• vite-plugin-vitepress-auto-sidebar - Automatically generates sidebar data by scanning directories, based on vitepress.
• vite-plugin-global-const - Define constants for reuse of your code.
• vite-plugin-cli-copy - Start the project and automatically copy the terminal's network URL.
• vite-plugin-module-list - Automatically import the modules found in a specified folder.
• unplugin-info - Export build information as a virutal module.
• vite-plugin-auto-origin - Detect origin configuration automatically based on incoming requests to dev server.
• vite-plugin-deadfile - Find unused source files in the project.
• vite-bundle-analyzer - Utility that represents bundles as an interactive treemap.
• vite-font-extractor-plugin - Utility that minification bundle fonts by glyphs.
• vite-plugin-i18n-detector - Lazyload i18n locale resources.
• vite-plugin-ngrok - Integration with Ngrok, allowing you to easily share your local development server.
• vite-plugin-docker - Docker utility based on Dockerode.
• vite-plugin-api-routes - Generate route mapping for API Routes services from the directory tree.
• unplugin-detect-duplicated-deps - Detect duplicate packaged dependencies.
• vite-plugin-vitepress-auto-nav - Automatically generates sidebar and nav configurations by scanning directories, based on VitePress.
• vite-plugin-pretty-module-classnames - Adds the filename without the -module suffix to the class names of CSS modules.
• vite-plugin-serve-static - Allows serving arbitrary static files not in the public/ directory.
• vite-plugin-valibot-env - Validate environment variables against a Valibot schema.
• vite-plugin-vitest-cache - Optimize Vitest execution time through caching.

Testing

• vitest - A Vite-native test framework.
• vitest-mock-extended - Type safe mocking extensions for Vitest.
• cypress-vite - Run Cypress specs using Vite.
• vite-plugin-doctest - Documentation testing for Vitest.

---

Vue

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.

Integrations

• @vitejs/plugin-vue - Official Vue 3 support.
• @vitejs/plugin-vue-jsx - Official Vue 3 JSX support.
• @vitejs/plugin-vue2 - Official Vue 2 support.
• @vitejs/plugin-vue2-jsx - Official Vue 2 JSX support.
• vite-plugin-vue2 - Vue 2 integration.
• unplugin-vue2-script-setup - Enabling <script setup> syntax for Vue 2.

Routing

• vite-plugin-pages - File system based route generator.
• v-route-generate - A tool to generate routes.
• unplugin-vue-router - Official experimental file based routing.
• vite-plugin-vue-routes - File-based routing, similar to SvelteKit and Next.js App Router.

Loaders

• vite-plugin-md - Markdown as Vue components / Vue components in Markdown.
• vite-svg-loader - Load SVG files as Vue components.
• vite-plugin-vue2-svg - Load SVG files as Vue components.
• unplugin-svg-component - Load SVG files as a Vue component, supporting svg file HMR and Typescript intelligence prompt.
• vite-plugin-markdown-mermaid - Load Markdown files, with Mermaid rendering support.
• vite-plugin-style-vw-loader - Converting the inline style px to vw.

SSG

• vite-ssg - Server-side generation.

Ecosystem

• unplugin-vue-i18n - Integration for Vue I18n.
• vite-plugin-i18n-resources - Load i18n translation message files.
• vite-plugin-i18n-autoimport - Auto import i18n config file for components.

Transformers

• vite-plugin-md-preview - Markdown code preview.
• vite-plugin-vue-preview - Code preview for Vue SFC in Markdown, supports online editing.
• vite-plugin-vue-css-modules - Implicit usage of CSS Modules for template and script SFC tags with static replacement.

Helpers

• 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.
• vite-plugin-vue-static-sfc - Serve ".vue" files as static assets.
• vite-plugin-vue-devtools - Designed to enhance the Vue developer experience.
• vite-plugin-vue-nested-sfc - Nest SFCs inside your SFC.

---

React

Official

• @vitejs/plugin-react - Official React support that uses Babel.
• @vitejs/plugin-react-swc - Official React support that uses SWC.

Presets

Routing

• generouted - Client-side type-safe file-based routing and global modals — supports layouts, loaders, code-splitting and more.

Loaders

• vite-plugin-svgr - Transform SVGs into React components.
• vite-plugin-react-rich-svg - Seamless SVG loader with versatile import options; such as DataURI, SVGR Component and Raw HTML Code.

Transformers

• @stylin/vite-plugin - Transform CSS and SCSS modules into React components.

Framework

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

Helpers

• vite-plugin-react-click-to-component - Uses Vite's launch middleware to enable alt+click to go to component.

SSG

• vite-react-ssg - Static-site generation for React.

💡 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

• vite-plugin-svelte - Adds Svelte support. Official plugin of Svelte team.

Helpers

• vite-plugin-kit-routes - Generates a file with all the routes, params, actions of your SvelteKit App.

---

Solid

Integrations

• vite-plugin-solid - Provides JSX transformation for Solid.
• vite-plugin-solid-svg - Import SVG files as Solid.js Components.

Routing

• generouted - Client-side type-safe file-based routing and global modals — supports layouts, loaders, code-splitting and more.

---

Elm

Integrations

• vite-plugin-elm - A plugin that enables you to compile an Elm module.

---

Angular

Integrations

---

Fastify

Integrations

• vite-plugin-fastify - Fastify plugin for Vite with Hot-module Replacement.

Routing

• vite-plugin-fastify-routes - File-based routing, similar to SvelteKit and Next.js App Router.

---

Electron

Integrations

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

Presets

---

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

Community

• Check the Awesome Rollup list for community-maintained rollup plugins, and refer to the Vite docs section about rollup plugin compatibility.

SSR

Libraries

• Vike - Like Nuxt/Next.js but as a do-one-thing-do-it-well plugin.
• ssr - A Server Side Rendering framework combined with Webpack/Vite.
• 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.
• vite-ssr-boost - Server side rendering library for create awesome app based on react-router.
• 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

• Rakkas - React framework inspired by Next.js and SvelteKit.
• Vise - SSR framework with server hooks.
• @fastify/fastify-dx - Allowing you to serve static or live (SSR).
• vite-plugin-vercel - Vercel adapter.

Integrations with Backends

Adobe Experience Manager

Craft CMS

• Craft Vite - Plugin for integration with Craft CMS.

Django

• django-vite - Integration for Django applications.
• django-vite-plugin - Integration for Django applications including vite plugin.

Flask

• Flask-Vite - Integration with Flask.

Ruby on Rails

• vite-plugin-ruby - Configuration for Ruby backends.
• Vite Ruby - Integration for Rails, Hanami, Padrino, and Rack apps.

Laravel

• Laravel Vite - Integration for the Laravel framework.
• Laravel Vite Plugin - Laravel official plugin for Vite.

CakePHP

• cakephp-vite - Integration for CakePHP.

WordPress

• wordpress-vite-assets - Integration for WordPress themes.
• Kima - Starter theme with Twig.

TYPO3 CMS

• vite-asset-collector for TYPO3 - Integration for TYPO3 CMS.

Go

Rust

• create-rust-app - Integration for Rust web apps.

OctoberCMS

Symfony

• Vite Bundle - Integration for Symfony.

Shopify

• vite-plugin-shopify - Integration for Shopify themes.

CodeIgniter

DDEV

Node.js

• vite-express - Integration for Express web apps.
• vite-manifest-parser - Parses manifest.json to generate HTML script and link tags.

ASP.NET Core

• Vite.AspNetCore - Integration with ASP.NET Core projects.

Drupal

• Vite module - Backend integration for Drupal.
• vite-plugin-twig-drupal - Support for Twig with includes/embeds and Drupal specific twig features.

PHP

• PHP-Vite - Integration for PHP, Composer package, no framework dependencies.

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.

awesome-vite's Issues

GitHub changed layout of readme document header? ToC is on the right.

Use the "Table of Contents" menu on the top-left corner to explore the list.

The Table of Contents icons if on the top-right for my client, not top-left.

@vitejs/plugin-vue-jsx page 404

--

Backend integration for Go

I've put together a backend integration for Go based web apps. PR to come.

Add another toc pointer?

I saw this in the readme:

And thought that maybe you could do something like this at the top too? Maybe?

↖️ Click <img height="16" valign="middle" src="https://i.imgur.com/yFtQXvN.png" /> for TOC

↖️ Click for TOC

Problems with require (commonjs)

I use quasar (vue3) with Vite and want to use a nom package (orbit-db) which uses requires.

in the quasar.config.js (for Vite) I have this plugin registered

  // extendViteConf (viteConf) {},
  // viteVuePluginOptions: {},
   vitePlugins: [
     [ 'vite-plugin-require', { fileRegex:/(.js?|.tsx?|.vue)$/} ]
   ]
},`

in the code I have

import * as IPFS from 'ipfs-core' import {onMounted} from 'vue' const OrbitDB = require('orbit-db'). //<<this line causes the error

But I still get vue-router.mjs:3451 TypeError: Failed to fetch dynamically imported module: http://localhost:9000/src/pages/Orbit.vue

on the terminal output I get the following lines. Whit do I wrong to get this module to run ?

`
App dir................ /Users/ek/orb
» App URL................ http://localhost:9000/
http://10.136.76.250:9000/
» Dev mode............... spa
» Pkg quasar............. v2.10.2
» Pkg @quasar/app-vite... v1.1.3
» Browser target......... es2020

App • Opening default browser at http://localhost:9000/

✘ [ERROR] [plugin vite:dep-pre-bundle] No known conditions for "./cid" entry in "multiformats" package

node_modules/vite/dist/node/chunks/dep-689425f3.js:38597:7:
  38597 │   throw new Error(
        ╵         ^

at bail (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:38597:8)
at resolve (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:38654:32)
at resolveExports (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:40982:12)
at resolveDeepImport (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:41000:31)
at tryNodeResolve (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:40773:20)
at Context.resolveId (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:40581:28)
at Object.resolveId (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:39254:55)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async /Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:61583:27
at async /Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:38771:34

This error came from the "onResolve" callback registered here:

node_modules/vite/dist/node/chunks/dep-689425f3.js:38750:18:
  38750 │             build.onResolve({ filter: /^[\w@][^:]/ }, async ({ ...
        ╵                   ~~~~~~~~~

at setup (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:38750:19)
at handlePlugins (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:855:23)
at Object.buildOrServe (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:1149:7)
at /Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:2110:17
at new Promise (<anonymous>)
at Object.build (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:2109:14)
at Object.build (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:1956:51)
at runOptimizeDeps (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:39994:34)
at async runOptimizer (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:50529:38)

The plugin "vite:dep-pre-bundle" was triggered by this import

node_modules/orbit-db/src/orbit-db-address.js:3:24:
  3 │ const { CID } = require('multiformats/cid')
    ╵                         ~~~~~~~~~~~~~~~~~~

17:18:30 [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/vite/dist/node/chunks/dep-689425f3.js:38597:7: ERROR: [plugin: vite:dep-pre-bundle] No known conditions for "./cid" entry in "multiformats" package
at failureErrorWithLog (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:1624:15)
at /Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:1266:28
at runOnEndCallbacks (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:1046:63)
at buildResponseToResult (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:1264:7)
at /Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:1377:14
at /Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:678:9
at handleIncomingPacket (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:775:9)
at Socket.readFromStdout (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:644:7)
at Socket.emit (node:events:513:28)
at addChunk (node:internal/streams/readable:315:12)
Vite Error, /node_modules/.q-cache/vite/spa/deps/orbit-db.js?v=2fcde633 optimized info should be defined
Vite Error, /node_modules/.q-cache/vite/spa/deps/orbit-db.js?v=2fcde633 optimized info should be defined
`

TOC on readme file not working in FF

When clicking the blue TOC button on readme file on FF, the link opens the icon in another tab.

Remove create-vite-pwa link

Title is self explanatory. The repo seems to be dead.

Please update logo.

Vite has new logo. Current one looks more like vue.

Some template to create a component library using Vite Library Mode?

I want to create a library similar to PrimeReact but I have had problems. I would like to receive support . Cracks @patak-dev and @antfu have a repo out there to take reference

Stars count next to the list item

Github Stars count is an important criteria for choosing plugins.
What do you think about placing a label with a Stars count next to each list item?

Add Dockerized: ViteJS+ TailwindCSS + HandlebarsJS

I've constructed frontend stack with docker compose, please add this to list.
Hope this would be usefully to community 💻

https://github.com/dendrofen/docker-vitejs-tailwind-handlebars

Also there is no-docker version for this build:

https://github.com/dendrofen/vitejs-tailwind-handlebars

vite 项目依赖node_modules里面的require不生效怎么处理？？？

如题，有一些依赖包，里面有些是用require写的，但是编译require不生效。

Get on the Awesome list

Given there is a list of all lists, I'd recommend trying to get on it: the Awesome list. There is already a pull request out there to get added to the list, but this list isn't fully compliant.

There are a couple of requirements, a lot of which using the awesome-lint and its GitHub Action can help resolve.

However, some, such as changing the default branch from master to main, must be done by repository administrators.

Otherwise, it looks like a great opportunity overall.

maybe should add a admin-template category

in my web developer cancer, vue is used in back system about 70%. Maybe, we should add a admin-template category to collect the admin template about vite.

add new item question about category plugin

https://www.npmjs.com/package/vite-esbuild-typescript-checker
hello, I can't decide on the category. My plugin works with both vanilla and vue 2-3 and react. Typescript type checking. How to choose correctly? Thanks

Which for building a Vue 3 component library?

As the title says, can someone point me to which template would be best for building a Vue 3 component library. Typescript is not needed, but can be included.

1. TailwindCSS
2. Vitest
3. VitePress for Docs

Or is it better to just start from scratch?

Thanks

Plugin for copying and transforming a file during "dev" sessions

Is there a plugin that I could use to copy and then transform a file at the start of npm run dev sessions? All the plugins that I have found only work when npm run build is executed. I need to generate a manifest file that will be used by the application during development build.

Link in reload react section does not work

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

Link in reload react section does not work

Can I create my own Vite template?

I want to create a Vite template for my organization.

It has some specific dependencies and a default folder management, along with default CSS styling.

Is there a way to create it and share with my coworkers?

TypeError: globalStyle is not a function

throw error when use vite-plugin-global-style:

Add yft-design as an image designer based on vite, vue3, and fabric.js

Image design based on vite + vue3 + fabric.js
Link to the repo https://github.com/dromara/yft-design

Add "plugin-jsx-remove-attributes" for react

Some time ago I made a vite/rollup plugin, to remove "data-testid" (or whatever you specify) from react source code for production builds

Previous art was using babel (slow).

npm: https://www.npmjs.com/package/rollup-plugin-jsx-remove-attributes
git: https://github.com/jacobbogers/rollup-plugin-jsx-remove-attributes#readme

Time to phase out the Vue 2 templates?

An awesome list should not propose stuff that doesn't have the main focus of the maintainers. Since 2.7 will be the last release I think its time to encourage people to start with vue 3.

@nxext/angular-vite link is broken.

@nxext/angular-vite doesn't exist anymore.

Remove/Deprecate/Archive plugins like vite-eslint

Should outdated and not maintained plugins be marked somehow? So the search for a plugin is a bit easier?

Сontributor/Maintainer

Hi, I am an active contributor awesome-vue and would like to offer my help in maintaining the relevance and timely adoption of the PR in this package.

Anyway, let me know what you think about it.

Add vite-plugin-pretty-module-classnames

Description: Adds the filename without the -module suffix to the class names of CSS modules.

Npm: https://www.npmjs.com/package/vite-plugin-pretty-module-classnames

Repo: https://github.com/teplostanski/vite-plugin-pretty-module-classnames

Add ddev-viteserve DDEV Add-on

Adding on an entry for ddev-viteserve, an add-on for DDEV, a docker-based development environment used mostly by PHP developers. This would typically be used in conjunction with a PHP-oriented back end.

Not really an integration, but there isn't a category that fits better. Open to suggestions if you folks want me to move it.

Add badges to links

This is very useful resource, but as it is getting bigger, it is even more difficult to process all the links. I thought it will be useful to add badges to help to choose.

We can choose badge generator like shields.so or githubadges.com
So rather than this

---

Svelte

• SvelteKit - The fastest way to build Svelte apps.
• sttv - Svelte, Tailwind CSS, TypeScript.
• svelte-vite-ssr - Svelte with SSR support.

---

It will look like this:

---

Svelte

• SvelteKit - The fastest way to build Svelte apps.
• sttv - Svelte, Tailwind CSS, TypeScript.
• svelte-vite-ssr - Svelte with SSR support.

---

or

---

Svelte

• - The fastest way to build Svelte apps.
• - Svelte, Tailwind CSS, TypeScript.
• - Svelte with SSR support.

---

badges could be styled differently, like:

Once we agree on style, it should be straightforward to switch with some regex and string replace

recommended react vite antdesign momentjs To dayjs plugin

plz

There is a conflict between plugins(@rollup/plugin-node-resolve, vite-tsconfig-paths)

// vite.config.json

import { resolve } from 'path'
import nodeResolve from '@rollup/plugin-node-resolve'
import react from '@vitejs/plugin-react-swc'
import { defineConfig } from 'vite'
import vitePluginDts from 'vite-plugin-dts'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
    }),
    vitePluginDts({
      insertTypesEntry: true,
    }),
    tsconfigPaths({ root: './' }),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/main.ts'),
    },
    rollupOptions: {
      external: [
        '@emotion/react',
        '@emotion/styled',
        '@types/react',
        '@types/react-dom',
        'react',
        'react-dom',
        'typescript',
      ],
      plugins: [
        nodeResolve({
          resolveOnly: [/^@packages\/.*$/],
        }),
      ],
    },
  },
})

It is a situation where unbuilt code must be imported and used like an external dependency.

Therefore, I should use the 'resolveOnly' option in '@rollup/plugin-node-resolve' because the packages must be included in the build.

However, this option conflicts with 'vite-tsconfig-paths' and the following error occurs:

[vite:load-fallback] Could not load ~/src/@emotion/react/jsx-runtime (imported by ~/index.tsx): ENOENT: no such file or directory, open '~/src/@emotion/react/jsx-runtime'
error during build:
Error: Could not load ~/src/@emotion/react/jsx-runtime (imported by index.tsx): ENOENT: no such file or directory, open '~/src/@emotion/react/jsx-runtime'

here is my tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsxImportSource": "@emotion/react",
    "incremental": true,
    "strictNullChecks": true,
    "noImplicitThis": false,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": "src",
    "typeRoots": ["node_modules/@types", "types"],
    "jsx": "react-jsx"
  },
  "include": ["vite.config.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Are there any other plug-ins that can be replaced?

How would I go about a lesser known library integration?

Hey, comming from vitejs/vite#1404, I was wondering how would I go about adding my plugin for solid-js?

As much as I would like to say this is among the most popular libraries, this isn't quite there yet. I was just wondering if I should follow the pattern of the other libraries like

solid

Plugins for solid

• my plugin

Or if you'd rather have something like "other integrations"?

Just want to be sure I don't miss anything there. CONTRIBUTING.md didn't really outlined that :)

Thanks!

Add electron-vite-solidjs-tailwindcss template

I want to add my Electron + Vite + SolidJS + tailwindcss template

maulik9898/electron-vite-solidjs-tailwindcss

Add vite-plugin-vue-static-sfc

Hi, would love to get my plugin in the list:
https://www.npmjs.com/package/vite-plugin-vue-static-sfc
https://github.com/arikw/vite-plugin-vue-static-sfc
🙏

The repo should be at least 30 days old

When I tried to open a PR I saw this point in the checklist.
The repo should be at least 30 days old.

I'm just curious what the point of this is?

Thanks, in advance!

Add "vite-plugin-type-to-schema" - TS to JSON Schema converter

Hi, please add my plugin)
https://github.com/TheLucifurry/vite-plugin-type-to-schema
This is a simple plugin, that converts types to JSON Schema via path suffix

Broken links

Hi, I found a few broken hyperlinks:

• https://github.com/time4dev/vite-esbuild-typescript-checker (file: README.md, status code: 404)
• https://github.com/vitejs/vite/tree/main/packages/plugin-vue (file: README.md, status code: 404)
• https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx (file: README.md, status code: 404)
• https://github.com/vitejs/vite/tree/main/packages/plugin-react (file: README.md, status code: 404)
• https://github.com/nrwl/nx/tree/master/packages/cra-to-nx (file: README.md, status code: 404)

Add plugin unplugin-detect-duplicated-deps

https://unplugin-detect-duplicated-deps.vercel.app/introduction.html

Add @storybook/builder-vite

Hi, I'd love to add the storybook vite builder to this list if you're open to it. But, I'm not sure what section it would belong in.

Add vite-react-cil

Hello

Can I add my vite-react-cil to awesome-vite?

github address： https://github.com/lgf196/vite-react-cil

Drupal backend integration

Hi,

Can we add Drupal related stuff ?

• https://www.drupal.org/project/vite (Drupal module)
• https://www.npmjs.com/package/vite-plugin-drupal-template-hmr (HMR capabilities on Drupal templating system)

Add @analogjs/vite-plugin-angular as an actual Vite Plugin for Angular

Analog has their own vite plugin for Angular support which has much better integrations with Vite and Vitest then currently mentioned @nxext/angular-vite

Link to the repo - https://github.com/analogjs/analog/tree/main/packages/vite-plugin-angular

If I have a starter template but it has only Chinese doc, can I add it?

Because may Chinese doc could help some Chinese speakings get started faster, so should I add it now or later when I have a translation of English?

Previous pr: #453 ovx

Can we add 'https://github.com/maifeeulasad/react-pipeline' under react group?

Does this project has all the credibility to be included?

https://github.com/maifeeulasad/react-pipeline

This is a deployment-ready boilerplate, using:

• React
• TS
• AntD
• Vite
• Tailwind

This can be a good push for the beginners, who want to run.

Ready to send a PR.

Can I post my project in README.md?

Electron、vue3、vite2 integration 😄

Dead link

Hi,

vite-vue3-tailwind-starter link is dead and should be replaced or removed.

Cheers

Add "vite-petite-vue-starter"

Hi, I want to add my template to the template list.

https://github.com/misitebao/vite-petite-vue-starter

Starter using Vite + Petite-vue for super fast prototyping.

Suggestion: Phaser-Bifrost-Vite-Template

Hey, would like to suggest phaser-bifrost-vite to be added to the templates.

Besides Vite, the template also has a basic example of how to create React UIs within Phaser with React Bifrost

Outdated File

[vite-vanilla-tailwind-v3] is outdated as it was last updated in March 2022

Add Vue Component Template

I upgrade vue-component-template to vite 3