logo of awesome-vite repository

Awesome Vite.js

A curated list of awesome things related to Vite.js

Awesome

> **This awesome list is for Vite 1.x which is discontinued. We no longer accept new entries to this list. See [Vite 2.0's list](./README.md) instead.** ## Resources ### Official Resources - [GitHub Repo](https://github.com/vitejs/vite) - [Release Notes](https://github.com/vitejs/vite/blob/master/CHANGELOG.md) - [Vue 3 Docs](https://v3.vuejs.org/) - [Awesome Vue](https://github.com/vuejs/awesome-vue) ### Tutorials - [How to get started with Vue.js 3 Vite](https://youtu.be/rcwaATlq7Ns) - Video tutorial by Erik (May 2020). - [Writing a Vite plugin](https://medium.com/@axwdev/writing-a-vite-plugin-for-vue-3-5bcc1c0915e0) - Article by Andrew Walker (Jul 2020). - [Vite with TypeScript + Preact](https://fettblog.eu/typescript-vite-preact/) - Article by Stefan Baumgartner (Jul 2020). ## Get Started ### [Create Vite App](https://github.com/vitejs/create-vite-app) ### Templates #### Vue 3 - [vite-tailwind-starter](https://github.com/posva/vite-tailwind-starter) - Starter template with Tailwind CSS for fast prototyping. - [vite-component-test-starter](https://github.com/JessicaSachs/vite-component-test-starter) - Starter template with Vue Test Utils. - [vite-typescript-starter](https://github.com/ktsn/vite-typescript-starter) - Starter template with TypeScript. - [vite-vue-i18n-starter](https://github.com/intlify/vite-vue-i18n-starter) - Starter template with `vue-i18n`. - [vite-vueuse-starter](https://github.com/antfu/vite-vueuse-starter) - Starter template with VueUse and TypeScript. - [Vitesse](https://github.com/antfu/vitesse) - Opinionated Vite starter template. - [Tailwind CSS Preset](https://github.com/use-preset/tailwindcss) - A preset adding Tailwind CSS to a Vite application. - [V-Dashboard](https://github.com/sorxrob/v-dashboard) - Dashboard starter template built with Vue 3 and Tailwind CSS. - [VueCrudX](https://github.com/ais-one/vue-crud-x) - Sample CRUD, ECharts & Leaflet example application using web components. - [kirby-vue3-starterkit](https://github.com/johannschopplich/kirby-vue3-starterkit) - SPA starterkit with Vue 3 and Kirby. - [vite-electron-quick](https://github.com/MangoTsing/vite-electron-quick) - Starter template with Vue 3, TypeScript and Electron. - [vite-ts-tailwind-starter](https://github.com/Uninen/vite-ts-tailwind-starter) - Starter template with Vue 3, TypeScript, Tailwind CSS, and Cypress.io e2e tests. - [vue-vben-admin-2.0](https://github.com/anncwb/vue-vben-admin) - Starter template with Vue 3, TypeScript, Tailwind CSS, Ant Design Vue2. - [electron-vue-next](https://github.com/ci010/electron-vue-next) - Starter template using Vue 3 in Vite and latest Electron with fluent VS Code debug and GitHub release process out-of-box. - [vite-components-playground](https://xxholly32.github.io/vite-components-playground/) - A common Vue 3 components playground. - [vite-electron-builder](https://github.com/cawa-93/vite-electron-builder/) - Template for Electron apps using Vite for both back and front-end, with automatic releases and updates. #### React - [vite-react-tailwind-starter](https://github.com/sorxrob/vite-react-tailwind-starter) - Starter template with React and Tailwind CSS. ## Plugins ### Routing - [vite-plugin-voie](https://github.com/vamplate/vite-plugin-voie) - File system-based routing plugin. ### Loaders - [vite-plugin-svg](https://github.com/visualfanatic/vite-plugin-svg) - Use SVG files as Vue components. - [vite-plugin-vuedoc](https://github.com/JasKang/vite-plugin-vuedoc) - A markdown & vue preview plugin. - [vite-plugin-rust](https://github.com/gliheng/vite-plugin-rust) - Load rust-compiled WebAssembly packages. - [vite-plugin-md](https://github.com/antfu/vite-plugin-md) - Markdown as Vue components / Vue components in Markdown. - [vite-plugin-toml](https://github.com/sapphi-red/vite-plugin-toml) - Load toml files. ### SSR - [zipe](https://github.com/pikax/zipe) - Server-side renderer. - [vite-ssr](https://github.com/frandiox/vite-ssr) - Small library to handle SSR in Vite. - [vitedge](https://github.com/frandiox/vitedge) - Edge-side renderer with fullstack utilities. ### Testing - [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) - A mock plugin for vite. - [vite-plugin-mockit](https://github.com/xuxihai123/vite-plugin-mockit) - A simple mock plugin for Vite, with Koa's style. - [vite-test](https://github.com/zigomir/vite-test) - Use vite to test your vue app in real browser and/or puppeteer. - [vite-plugin-faker](https://github.com/vue-toys/vite-plugin-faker) - Use TypeScript compiler to generate mock data. ### Integrations - [vite-plugin-vue-i18n](https://github.com/intlify/vite-plugin-vue-i18n) - `vue-i18n` custom block integration. - [vite-plugin-purge-icons](https://github.com/antfu/purge-icons/tree/main/packages/vite-plugin-purge-icons) - Bundles icons on demand by PurgeIcons. - [vite-plugin-pwa](https://github.com/antfu/vite-plugin-pwa) - Zero-config PWA for Vite. ### Resolvers - [vite-tsconfig-paths](https://github.com/aleclarson/vite-tsconfig-paths) - Support for TypeScript's path mapping. ### Transformers - [vite-transform-globby-import](https://github.com/luxueyan/vite-transform-globby-import) - Simple globby-import transform. - [vite-plugin-html](https://github.com/anncwb/vite-plugin-html) - A plugin for vite to Minimize index.html and use lodash.template template syntax in `index.html`. ### Helpers - [vite-plugin-components](https://github.com/antfu/vite-plugin-components) - On-demand components auto-importing. - [@baleada/vite-serve-as-vue](https://baleada.netlify.app/docs/vite-serve-as-vue) - Dev server plugin to serve any files as hot-reloadable Vue components. - [@baleada/vite-serve-virtual](https://baleada.netlify.app/docs/vite-serve-virtual) - Dev server plugin to serve virtual files of any type. - [vite-plugin-legacy](https://github.com/alloc/vite-plugin-legacy) - Generate an identical bundle for legacy browsers. ### Plugins for frameworks other than Vue 3 #### for Vue 2 - [vite-plugin-vue2](https://github.com/underfin/vite-plugin-vue2) - Vue2 integration. #### for React - [vite-plugin-react](https://github.com/vitejs/vite-plugin-react) - (official) React fast-refresh plugin for. - [vite-plugin-react-page](https://github.com/vitejs/vite-plugin-react-pages) - (official) React application framework powered by Vite. - [vite-plugin-mdx](https://github.com/vitejs/vite-plugin-react-pages/tree/master/packages/vite-plugin-mdx) - MDX fast-refresh support. #### for Svelte - [svite](https://github.com/dominikg/svite) - Svelte integration. - [vite-plugin-svelte](https://github.com/intrnl/vite-plugin-svelte) - Svelte integration. ## Projects Using Vite.js ### Open Source - [VitePress](https://github.com/vuejs/vitepress) (official) - [TroisJS](https://github.com/troisjs/trois) - Three.js integration with Vite and Vue 3. ### Apps/Websites - [Icônes](https://github.com/antfu/icones) - Icon explorer with instant search. - [Awesome CN Café](https://github.com/antfu/awesome-cn-cafe-web) - Web application for Awesome CN Café. - [Todo Example](https://github.com/beary/vite-example) - Todo app with routing and state management. - [Tailwind Pre-Processor](https://github.com/xiaoluoboding/tailwind-pre-processor) - An implementation of Tailwind CSS using Less / Stylus / Sass / SCSS. - [npmview](https://github.com/pd4d10/npmview) - A web application to view npm package files. - [Layoutit Grid](https://github.com/Leniolabs/layoutit-grid) - Interactive CSS Grid layout generator. - [TypGame](https://github.com/rupamkairi/TypGame) - Test your typing performance. ### Commercial Products > TODO ### Enterprise Usage > TODO