preface

I was working on a new project when Vite2 came out, so I decided to build it with the latest Vite + Vue3 + TS.

Unfortunately, at the time, Vite was crater-and hot updates weren’t as good as traditional Webpack projects, often requiring a one-line refresh of the browser. So I refactored the project with VUe-CLI before it got too big. But then I saw a lot of new open source projects using Vite, and there was always a feeling that Vite was going to be great in the future, and as time went on, that feeling got stronger and stronger!

Then just is also the most fire, Vite fry of blog, the public number, B station, zhihu what’s in a lot of talk about all this Vite, back, then I use Vite reconstruction result was criticized when reporting (waste time to do things has nothing to do with the business, and use the not mature technology may take unnecessary risks).

Later, the heat of Vite came down a little bit, now open blog, public number, Zhihu and B station… You won’t see as many articles about Vite anymore.

It wasn’t until Patak, a member of Vue’s official team, recently published a post called “The Vite Ecosystem” that I was so excited to read that I felt like I was on The right track and Vite was definitely going to be a trend. This is because in his article I read that many cool open source projects are using Vite, and that quite a few teams and big names are working with the Vite team (fixing bugs, adding features, etc.), which proves that Vite is now accepted by all the big names. With the support of the big men, I believe that it will be able to dispel the doubts in a lot of people.

So I took the time to translate this article and share it with you, so that you can know more about the development of Vite around the world.

Patak.dev /vite/ecosys…

The body of the

One of Vite’s strongest points is its surrounding ecosystem. Vite takes on many responsibilities (common Web patterns, global imports, hot update apis, low-level server rendering, build optimizations), and we provide a common foundation for collaboration so that other maintainers don’t have to reinvent the wheel every time. Several maintainers of popular frameworks have even chosen Vite as their recommended build tool, and they are now involved in Vite development, directly fixing bugs and adding features. Vite exposes a flexible JavaScript API that allows integration with backend frameworks such as Rails and Laravel or other development tools such as Cypress and Storybook. Vite’s plug-in API is compatible with Rollup, enabling Vite to effectively leverage Rollup’s existing plug-in ecosystem.

Vite has definitely exceeded my expectations: it’s now used not only for Vue, but also React, Svelte, Solid, Marko, Astro, Shopify Hydrogen, and integration with Storybook, Laravel, Rails, and more… – especially the rain creek

In this article, we’ll get to know some of the teams and members of the Vite ecosystem, and I thought it would be a good idea to show you just how many people are working together to make Vite work. The Vite ecosystem is big enough so far that I won’t pretend to cover every project, but it’s also the story I see from Vite’s perspective. If you do not see your project in this article, please accept my apologies in advance. And leave a comment in chat.vitejs.dev, where I’m eager to learn more about what you’re creating with Vite.

The following highlights ongoing collaboration between different teams. If you want to learn more about each project, there are links to its home page, GitHub, and community. After the introduction, let’s explore the ecology of Vite:

Standing on the shoulders of giants

vite

  • Liverpoolfc.tv: vitejs. Dev
  • Discord(A popular foreign chat software) :chat.vitejs.dev
  • Twitter: twitter.com/vite_js
  • Npm:www.npmjs.com/package/vit…
  • GitHub：github.com/vitejs/vite
  • Run online: vite.new

After Vite2’s second major release, Yu Yu Creek formed a Vite team to maintain the project. Vite is currently a project that is being worked on closely by a team led by You And Rain Creek, and we are working closely with other teams to ensure that Vite works well with their frameworks and integrations. Over 400 contributors have now contributed code to Vite. And we currently have a very active community, and the program is growing rapidly. Vite is used by over 75,000 projects on GitHub and receives over 1.3 million NPM downloads per month:

rollup

  • Website: rollupjs.org
  • Discord(A popular foreign chat software) :is.gd/rollup_chat
  • Twitter: twitter.com/rollupjs
  • Npm:www.npmjs.com/package/rol…
  • GitHub:github.com/rollup/roll…

Vite can be thought of as a development server + Rollup. One of Rollup’s core maintainers, @Lukastaegert, recommends using Vite as Rollup’s Web development server. Vite’s Rollup compatible plug-in system gives Vite a good start. Rollup maintainers keep in touch with Vite and WMR maintainers as they extend their plug-in apis to ensure that the ecosystem remains compatible.

esbuild

  • Liverpoolfc.tv: esbuild. Making. IO
  • Twitter: twitter.com/evanwallace
  • Npm:www.npmjs.com/package/esb…
  • GitHub:github.com/evanw/esbui…

Esbuild is a packaged build tool written in the Go language that pushes the limits of build tool performance. Vite uses esBuild to translate individual files (removing the TS type and compiling JSX) and uses it as the default compression tool (for JS and CSS files). It is also used as a packaging tool when pre-packaging dependencies during development. @EvanWallace has been doing a fantastic job. Esbuild is improving every day and provides Vite with a fast alternative to TSC, Babel, and Rollup.

Typescript

  • Website: typescriptlang.org
  • Discord(A popular foreign chat software) :discord.gg/typescript
  • Twitter: twitter.com/TypeScript
  • Npm:www.npmjs.com/package/typ…
  • GitHub:github.com/microsoft/T…

Typescript has taken the JS world by storm. Vite supports importing. Ts files. Internally, we will use esbuild to remove the TS type, so that we can avoid the complicated type verification when we compile js files. This is important to get the best possible hot update experience. If you’re using a modern IDE like VS Code, you’ll get most of your information through intelligent prompts as you write Code. You can also run the TSC command for type verification during packaging, or use plug-ins like rollup-plugin-typescript2. The viet-plugin-checker for @fi3ework is another interesting project that allows you to run TypeScript in worker threads.

babel

  • Liverpoolfc.tv: Babel. Dev
  • Twitter: twitter.com/babeljs
  • npm:www.npmjs.com/package/@ba…
  • GitHub：github.com/babel/babel

In most cases, Vite doesn’t need Babel, which avoids its heavy abstract syntax tree transformations. But the React ecosystem relies heavily on Babel for hot updates and other compile-based solutions, such as the CSS-in-JS library. It is currently used in @vitejs/ plugin-React and @vitejs/ plugin-Legacy to provide support for older browsers. Parcel and the next.js team are porting SWC, the most commonly used plug-in for Rust toolchain. Vite can move directly from Babel to SWC when the time is right (early exploration: SWC-based @Vitejs/plugin-Legacy, Unplugin-SWC, Viet-plugin-SWC-React).

PostCSS

  • Website: postcss.org
  • Twitter: twitter.com/postcss
  • Npm:www.npmjs.com/package/pos…
  • GitHub:github.com/postcss/pos…

Vite encourages the use of PostCSS and supports it out of the box. Other CSS preprocessors can also be supported by manually adding them to project dependencies. But PostCSS is more in line with Vite’s vision and now allows you to use CSS draft plug-ins like postCSs-Nesting to keep your CSS standards compliant into the future.

To explore other

Snowpack

⚠️ The Logo of Snowpack is white, but when it is placed with a white background, the image will not look obvious. If you are curious, you can manually change the background color of the page to see it

  • Liverpoolfc.tv: snowpack. Dev
  • Discord(A popular foreign chat software) :discord.gg/snowpack
  • Twitter: twitter.com/snowpackjs
  • Npm:www.npmjs.com/package/sno…
  • GitHub:github.com/snowpackjs/…

Snowpack leverages JavaScript’s native modularity to avoid unnecessary work and keep it very fast no matter how big your project is. It helps establish the rightness of development tools using ESModule first. Snowpack and Vite interact with each other and discuss the details of standardizing hot update apis and loading packages in projects where CommonJS and ESModule coexist. Snowpack’s core team members (@FredKschott, @drwpow, @MatthewCP, @N_Moore) are currently working on Astro, a Island-based SSG framework now supported by Vite on the development side. The two communities are working together and the lessons learned at Snowpack will be used to help improve Vite.

WMR

  • Liverpoolfc.tv: WMR. Dev
  • Slack(A foreign similar to nail nail work software) :chat.preactjs.com/
  • npm：www.npmjs.com/package/wmr
  • GitHub:github.com/preactjs/wm…

WMR is a vite-like tool developed by the Preact team. @_developit pioneered the Rollup Plugin API, which allows Rollup plug-ins to be used during development and a rich Rollup ecosystem to be leveraged at build time. The Vite 2 Plugin API adds Vite specific hook functions on top of WMR. Vite and WMR work together to unify URL postfix modifiers and other features.

Web Dev Server

  • Liverpoolfc.tv: modern – web. Dev
  • Slack(A foreign similar to nail nail work software) :Modern – web. Dev/discover/sl…
  • Twitter: twitter.com/modern_web_…
  • GitHub:github.com/modernweb-d…

Web Dev Server takes a more low-level approach that requires manually setting up the Rollup configuration for a production build. It has several built-in tools that can be used in Vite Setup, such as the Web Test Runner, the viet-web-test-runner -plugin that some community members are using.

UI framework

Vue

  • Website: v3.vuejs.org
  • Discord(A popular foreign chat software) :chat.vuejs.org
  • Twitter: twitter.com/vuejs
  • npm：www.npmjs.com/package/vue
  • GitHub:github.com/vuejs/vue-n…
  • Online run: vite.new/vue

Maintained by You As founder and project leader, Vue and two other core members of the Vite core team (@ANTfu and @Sodatea), the Vue team now recommends the Vite-powered Create-Vue as a scaffold tool for new projects. Vue3 is supported by the @vitejs/plugin-vue plug-in, while Vue2 is supported by the vite-plugin-vue2 plug-in. Vite will be widely adopted in the Vue ecosystem, with most projects planning or already implementing support for Vite and in some cases providing it by default asa development build tool (e.g., Nuxt, Vuetify, Quasar). There are also new Vue projects directly based on Vite (VitePress, Iles, Slidev)

React

  • Website: reactjs.org
  • Discord(A popular foreign chat software) :discord.gg/reactiflux
  • Twitter: twitter.com/reactjs
  • Npm:www.npmjs.com/package/rea…
  • GitHub:github.com/facebook/re…
  • Run online: viet. new/react

Vite supports React via the @vitejs/plugin-react plugin. @alecdotbiz(one of Vite’s core maintainers) has been working hard to make the experience more silky. We see many uses in the React ecosystem, mainly for prototyping and library documentation. For example, React Router Docs. Next. Js is a bet on the future of Webpack and SWC. As a result, Vite is not used much for complex SSR React applications. But a few Vite based next-inspired frameworks are starting to appear, such as Rakkas and Vitext.

Preact

  • Website: preactjs.com
  • Slack(A foreign similar to nail nail work software) :chat.preactjs.com
  • Twitter: twitter.com/preactjs
  • Npm:www.npmjs.com/package/pre…
  • GitHub:github.com/preactjs/pr…
  • Run online: vite.new/ Preact

As the Preact team develops WMR, we can expect them to recommend WMR as their recommended build tool. Even so, they developed the @preact/ Preset – Vite plugin to provide official support for Vite. @Marvinhagemeist is a member of the Preact core team. He has been working closely with the Vite community and has been actively involved in discussions related to security and compatibility between the two ecosystems (including tweaks to functionality and making sure plug-ins work in both Vite and WMR).

Svelte

  • Liverpoolfc.tv: svelte. Dev
  • Discord(A popular foreign chat software) :svelte.dev/chat
  • Twitter: twitter.com/sveltejs
  • Npm:www.npmjs.com/package/sve…
  • GitHub:github.com/sveltejs/sv…
  • Run online: vite.new/svelte

The Svelte team is one of Vite’s most active contributors. Support for Svelte is achieved through the viet-plugin-svelte plug-in. SvelteKit is powered by Vite, which we can expect to become ubiquitous in their ecosystem. @rich_Harris came up with a generic SSR solution for SvelteKit, which Yu Creek later ported to Vite. Being able to share SSR schemes has played a critical role in facilitating current innovation in Vite based SSG and SSR frameworks. @Grygrflzr, @Benmccann, @Dominikg, and @Bluwyoo are very concerned about the project, and SvelteKit is one of the more advanced frameworks using Vite, and the two teams have been working closely together.

marko

  • Website: markojs.com
  • Discord(A popular foreign chat software) :discord.gg/marko
  • Twitter: twitter.com/MarkoDevTea…
  • Npm:www.npmjs.com/package/mar…
  • GitHub:github.com/marko-js/ma…

The Marko team developed @Marko/Vite as an official plugin for Vite, and they also developed the Vite-based Starters. @dylan_Piercey and @Ryancarniato are pushing features like Zero JS and SSR Streamin.

Solid

  • Website: solidjs.com
  • Discord(A popular foreign chat software) :Discord.com/invite/soli…
  • Twitter: twitter.com/solid_js
  • Npm:www.npmjs.com/package/sol…
  • GitHub:github.com/solidjs/sol…
  • Online operation: stackblitz.com/edit/solid-…

The Solid team also has an official Vite based plugin: viet-plugin-Solid. Their project template SolidStart also uses Vite. RyanCarniato is very active in the Vite community, check out a Demo he wrote on Vercel Edge Functions in Vite and Solid.

lit

  • Liverpoolfc.tv: lit. Dev
  • Slack(A foreign similar to nail nail work software) :Lit. Dev/slack – invit…
  • Twitter: twitter.com/buildWithLi…
  • npm：www.npmjs.com/package/lit
  • GitHub：github.com/lit/lit
  • Online run: vite.new/lit

The LIT team released a new version of the framework. Vite Monorepo has a starter template, so lit is available in create-Vite. While there is currently no plugin for hot updates enabled in the LIT project, the LIT team is interested in creating one.

App framework

Nuxt

  • Website: v3.nuxtjs.org
  • Discord(A popular foreign chat software) :Discord.com/invite/ps2h…
  • Twitter: twitter.com/nuxt_js
  • Npm:www.npmjs.com/package/nux…
  • GitHub:github.com/nuxt/framew…
  • Online operation: stackblitz.com/fork/github…

The Nuxt team is working closely with the Vite team to ensure that Vite projects are smoothly integrated into Nuxt. They created the NuxT-Vite plug-in that integrates Vite with Nuxt 2. Nuxt 3 will use Vite by default. The Nuxt team took an interesting approach to build tools: abstracting the framework from the build tools they used. Users will be able to choose between Vite and Webpack 5. Nuxt 3 will allow other projects in the Vue ecosystem such as Vue Storefront to benefit from the Vite dividend. It’s worth noting that @ANTfu is responsible for a large part of the innovation in the ecosystem and is currently working on the Nuxt team.

SvelteKit

  • Liverpoolfc.tv: kit. Svelte. Dev
  • Discord(A popular foreign chat software) :svelte.dev/chat
  • Twitter: twitter.com/sveltejs
  • npm:www.npmjs.com/package/@sv…
  • GitHub:github.com/sveltejs/ki…
  • Running online: Node. new/sveltekit

SvelteKit is an App framework powered by Svelte that drives their idea of Transitional Apps for modern Web development. The Svelte and Vite teams are working seamlessly together to improve Vite’s SSR, server API, and overall quality. Vite has been greatly improved due to the continuous optimization of SvelteKit.

Astro

⚠️ Translator’s note: The top half of the Logo is white, so the image will not look obvious when placed with a white background. If you are curious, you can manually change the background color of the page to see it

  • Liverpoolfc.tv: astro. Build
  • Discord(A popular foreign chat software) :astro.build/chat
  • Twitter: twitter.com/astrodotbui…
  • Npm:www.npmjs.com/package/ast…
  • GitHub:github.com/withastro/a…
  • Online operation: stackblitz.com/fork/astro

The Astro team is using Vite to rebuild their engine and they have become a key part of the Vite ecosystem. Astro is pushing Vite in multiple areas that no other framework has tried before, and they are improving as they explore. Their experience with ESM tools will be critical to Vite moving forward.

iles

  • Website: iles-docs.net lify. App
  • Discord(A popular foreign chat software) :discord.gg/PkbxgzPhJv
  • Twitter: twitter.com/ilesjs
  • Npm:www.npmjs.com/package/ile…
  • GitHub:github.com/ElMassimo/i…
  • Online: stackblitz.com/fork/iles?f…

Iles is a framework created by @Maximomussini and inspired by Astro and VitePress. Iles is a great example of Vite support (Iles podcast). Maximo has been an active community member, and he’s also been pushing for adoption of Vite in the Rails community.

VitePress

  • Website: vitepress.vuejs.org
  • Npm:www.npmjs.com/package/vit…
  • GitHub:www.npmjs.com/package/vit…

VitePress is a new interpretation of VuePress, a static site generator powered by Vue3 and Vite. There are already many projects using VitePress: Vite website, Vue blog, VueUse, Pinia, Viet-Ruby, Viet-plugin-pwa, Slidev, Windi, Laravel-Vite… VuePress supports Vite through the @vuepress/ Bundler-Vite plugin.

Slinkity

⚠️ Translator’s note: The bottom half of the Logo is white, which makes the image look less obvious when placed with a white background. If you are curious, you can manually change the background color of the page to see it

  • Liverpoolfc.tv: slinkity. Dev
  • Discord(A popular foreign chat software) :discord.gg/GBkBy9u
  • Twitter: twitter.com/slinkitydot…
  • Npm:www.npmjs.com/package/sli…
  • GitHub:github.com/slinkity/sl…
  • Online: stackblitz.com/edit/node-v…

@bholmesDev et al are working on Slinkity, an SSG framework that combines Eleventy and Vite. Inspired by @Snugug’s early work on frameworks like Vite-plugin-Eleventy and Astro, Slinkity opened the vite ecosystem to 110 users. It allows Eleventy projects to take advantage of Vite’s UI framework support, fast HMR, and Vite’s rich plug-in ecosystem.

Hydrogen

  • Liverpoolfc.tv: hydrogen. Shopify. Dev
  • Discord(A popular foreign chat software) :discord.gg/ppSbThrFaS
  • Twitter: twitter.com/shopifydevs
  • npm:www.npmjs.com/package/@sh…
  • GitHub:github.com/Shopify/hyd…
  • Online run: hydrogen. New

Shopify has chosen Vite in its new React Store Front framework Hydrogen. The Hydrogen team is working with the React team to support React Server Components and Server rendering with Suspense in Vite. @jplhomer is very active in the Vite community. He collaborated to improve the core of Vite and Vite support for React.

rakkas

  • Website: rakkasjs.org
  • Twitter: twitter.com/cyco130
  • Npm:www.npmjs.com/package/rak…
  • GitHub:github.com/rakkasjs/ra…
  • Online operation: stackblitz.com/edit/rakkas…

Rakkas is a React SSR framework powered by Vite, inspired by next.js and SvelteKit. The author @Cyco130 has been active in the Vite community, working with others to improve SSR in Vite.

vite-plugin-ssr

  • Website: vite-plugin-ssr.com
  • Discord(A popular foreign chat software) :Discord.com/invite/qTq9…
  • Twitter: twitter.com/brillout
  • Npm:www.npmjs.com/package/vit…
  • GitHub:github.com/brillout/vi…

Vite-plugin-ssr is another micro-SSR framework developed by @Brillout. He is very active in the Vite SSR field. He often helps others solve problems and fixes bugs for Vite, as well as giving some ideas. Vite-plugin-ssr is designed to be a toolkit for SSR framework authors, providing a smoother experience than Vite’s underlying SSR. There are frameworks like Vitext, a React framework developed by @Aslemammadam, that are based on vite-plugin-SSR. @Brillout also works on other related projects such as Telefunc and Vike.

vite-ssr

  • Liverpoolfc.tv: github.com/frandiox/vi…
  • Discord(A popular foreign chat software) :discord.gg/PkbxgzPhJv
  • Npm:www.npmjs.com/package/vit…
  • GitHub:github.com/frandiox/vi…

Vite-ssr was created by @Frandiox as a simple and powerful SSR solution for Vite in Node.js. This is another way to expose Vite’s SSR API as an advanced solution. He is also the creator of VitEdge, a full-stack Vite framework running on Cloudflare Workers.

integration

vite-ruby

  • Website: vite-ruby.net lify. App
  • Discord(A popular foreign chat software) :discord.gg/pC5sG7Gqh7
  • Npm:www.npmjs.com/package/vit…
  • GitHub:github.com/ElMassimo/v…

@Maximomussini created the first backend integration project: Viet-Ruby, which made Vite a successful entry into the Ruby community. Follow this link to learn more about the story behind Viet-Ruby. The Rails channel in Vite Land has started to come alive, and this project has inspired others to integrate Vite into their projects.

laravel-vite

  • Liverpoolfc.tv: laravel – vite. Innocenzi. Dev
  • Discord(A popular foreign chat software) :discord.gg/Td4us2BSaX
  • Npm:www.npmjs.com/package/lar…
  • GitHub:github.com/innocenzi/l…

Laravel-vite was created by @enzoinnocenzi to combine Vite and Laravel ecology. It follows in the footsteps of Viet-Ruby, and Enzo’s work has been a key factor in promoting Vite’s adoption in the Laravel community.

fastify-vite

  • Liverpoolfc.tv: fastify – vite. Dev
  • Discord(A popular foreign chat software) :discord.gg/9gcAHEzKaX
  • Npm:www.npmjs.com/package/fas…
  • GitHub:github.com/fastify/fas…

Fastify-vite is a mini-version of mature SSR frameworks like Nuxt and Next. @anotherGalvez builds Fastify-Vite as a solution to Fastify-First. There is a lot of synergy between the Fastify and Vite communities. Fastify-vite is driving both projects.

CSS framework

Tailwind CSS

  • Website: tailwindcss.com
  • Discord(A popular foreign chat software) :tailwindcss.com/discord
  • Twitter: twitter.com/tailwindcss
  • Npm:www.npmjs.com/package/tai…
  • GitHub:github.com/tailwindlab…

Tailwind Labs was one of the first teams to realize Vite’s potential, providing official integration examples for Vite early on and starting to sponsor Vite. They also released just-in-time Mode, a JIT engine for Tailwind V2.1 + that provides a great experience when paired with Vite HMR. With frameworks like the Hydrogen pushing Vite and Tailwind CSS combinations, Tailwind users are in for a new wave of Vite.

Windi CSS

  • Website: windicss.org
  • Discord(A popular foreign chat software) :chat.windicss.org
  • Twitter: twitter.com/windi_css
  • Npm:www.npmjs.com/package/win…
  • GitHub:github.com/windicss/wi…

WindiCSS was created by @satireven, a Tailwind based JIT engine that @ANTfu used to create the Vite-plugin-WindicSS, which has certain advantages in terms of loading and HMR speed etc. Now the project has grown into an active community. WindiCSS is now used for document pages such as Nuxt 3 and Slidev.

UnoCSS

  • Liverpoolfc.tv: unocss. Antfu. Me
  • npm:www.npmjs.com/package/@un…
  • GitHub:github.com/antfu/unocs…

After using WindiCSS for a while, @antfu created UnoCSS, a toolkit for atomizing CSS engines. Again, it shows how much room we have to improve our atomized CSS. UnoCSS can be 200 times faster than Windi CSS and two orders of magnitude faster than the fastest engines. You can read Reimagining Atomic CSS and Talking About Pure CSS ICONS. UnoCSS was created by @antfu who started the project as a solution for Vite, but it can now be used for other packagers as well. UnoCSS will power the next generation of WindiCSS engines.

The plug-in

Awesome Vite Plugins

  • Liverpoolfc.tv: github.com/vitejs/awes…
  • GitHub:github.com/vitejs/awes…

There are a lot of great Vite plug-ins in Awesome Vite. But since new projects, templates, and plug-ins are submitted to Awesome Vite’s repository every day, @scrum_ is responsible for maintaining it. There are tons of plug-ins, and the number is growing every day. Here are some examples:

  • Viet-plugin-pages: file system-based routing support
  • Viet-plugin-mpa: Vite supports multi-page applications out of the box
  • Viet-plugin-federation: supports modules such as Webpack
  • Viet-plugin-node: Use Vite as the node development server
  • Viet-plugin-comlink: WebWorker with comlink
  • Vite-plugin-rsw: support for WASM-pack
  • Viet-plugin-elm: Compile the ELM application/document/element in the project
  • Viet-plugin-qrcode: display a qrcode, scan can be on the phone debugging
  • Viet-plugin-full-reload: Automatically reloads the page when a file is modified
  • Viet-plugin-compress: compresses the bundle and assets in the project
  • Vite-plugin-checker: Run TypeScript, VLS, VUE-tsc, ESLint in worker threads
  • Viet-plugin-inspect: Checks the intermediate state of the plug-in

awesome-rollup

  • Liverpoolfc.tv: github.com/rollup/awes…
  • GitHub:github.com/rollup/awes…

Rollup’s core plug-ins are maintained by the Rollup team, and there is a list of community plug-ins in Awesome Rollup. Most of Vite’s plug-in apis are compatible with Rollup. We are also maintaining a plug-in compatibility list for Vite and Rollup. As the Rollup ecosystem gets closer to Vite, hopefully we’ll see a “Works in Vite” badge in the Rollup plug-in documentation in the future. Some examples of compatible plug-ins:

  • Rollup/plugin-YAMl: Convert YAML files to ES6 modules
  • Rollup-plugin-typescript2: Run TS (including compile-time error reporting)
  • Rollup-plugin-critical: generates critical CSS

unplugin

  • Liverpoolfc.tv: github.com/unjs/unplug…
  • Npm:www.npmjs.com/package/unp…
  • GitHub:github.com/unjs/unplug…

Unplugin is another open source project from @ANTfu, a unified plug-in system for Vite, Rollup, Webpack, and possibly other packaging tools in the future. @antfu has been using this library to migrate his plugins so that a large portion of the plugins he writes for Vite can be used in other build tools. The project is part of UnJS Umbrella, a library that the Nuxt team extracted from Nuxt’s build tools. A few examples:

  • Unplugin-icons: Thousands of ICONS can be introduced on demand
  • Unplugin-vue-components: Automatically import VUE components
  • Unplugin-auto-import: Automatically introduces some TS apis

vite-plugin-pwa

  • Website: vite-plugin-pwa.net lify. App
  • Npm:www.npmjs.com/package/vit…
  • GitHub:github.com/antfu/vite-…

Viet-plugin-pwa is a zero-configuration PWA plug-in for Vite that enables offline support via Workbox. @antfu and @Userquin have built a perfect and seamless experience for each framework.

Starters

Replit

  • Website: replit.com
  • Discord(A popular foreign chat software) :discord.util.repl.co/join
  • Twitter: twitter.com/replit

Replit was one of the first companies to take advantage of Vite to provide a better user experience, switching to the React Starter Template. The @amasad tweet compared the React Starter Template to create-React-app, and was later mentioned in numerous blog posts and speeches to illustrate the difference in loading speeds; “Vite was up and running before CRA even started.”

Glitch

  • Website: glitch.com
  • Twitter: twitter.com/glitchdevs

Glitch adopted Vite for their Starter project. They use Vite to do the heavy lifting. “It’s been a pleasure to work with,” says KeithKurson. “It gives all of us beginners a similar build pattern, and the Rollup plug-in will be a huge added value for programmers.”

StackBlitz

  • Website: stackblitz.com
  • Discord(A popular foreign chat software) :Discordapp.com/invite/stac…
  • Twitter: twitter.com/stackblitz
  • GitHub:github.com/stackblitz/…

⚠️ This is the StackBlitz that runs online as shown in the previous project link

StackBlitz made Vite a first-class citizen in their browser IDE. They worked hard to make Vite compatible with WebContainers (including esbuild support). They also work with teams in the Vite ecosystem to ensure that the most popular Vite frameworks, such as SvelteKit, Hydrogen, Astro, etc., run smoothly. They also added Vite Starters: Vite. New and Vite. New /{template} and included Vite in their showcase page, and they’re now Vite’s biggest sponsor!

Vitesse

  • Liverpoolfc.tv: github.com/antfu/vites…
  • Twitter: twitter.com/antfu7
  • Npm:www.npmjs.com/package/vit…
  • GitHub:github.com/antfu/vites…

Vitesse is a good example of a Vite Starter. This is a template project based on Vue3. @ANTfu has been using this starter to showcase some of the best plug-ins in the Vite ecosystem. It also has the following features: File Based Routing, Auto imports, PWA, Windi CSS, SSG, Critical CSS, etc… This is also a good example of testing with Cypress.

WebExtension Vite Starter

  • Liverpoolfc.tv: github.com/antfu/vites…
  • Twitter: twitter.com/antfu7
  • Npm:www.npmjs.com/package/vit…
  • GitHub:github.com/antfu/vites…

WebExtension is a Startup template based on Vitesse. It is intended to demonstrate the use of Vite outside of typical Web applications. This is an example of using Vite in other environments so that you can get Vite’s hot update capabilities and plug-ins.

Awesome Vite Templates

  • Liverpoolfc.tv: github.com/vitejs/awes…
  • GitHub:github.com/vitejs/awes…

The Vite community is now maintaining the template project for different frameworks and tool combinations. Awesome Vite Templates has a lot to choose from. If you prefer to run them locally, a tool like Degit lets you use degit user/repo.

test

mocha-vite-puppeteer

  • Website: https://larsthorup/mocha-vite-puppeteer#readme
  • Npm:www.npmjs.com/package/moc…
  • GitHub:github.com/larsthorup/…

Mocha-vite-puppeteer was developed by @larsthorup and allows mocha front-end tests to be run using Vite and Puppeteer. It can run tests as fast as Vite.

vite-jest

  • Liverpoolfc.tv: github.com/sodatea/vit…
  • Npm:www.npmjs.com/package/vit…
  • GitHub:github.com/sodatea/vit…

The viet-Jest project is being developed by @Sodatea, who aims to provide first-class Vite integration for JEST. It is still under development due to the blocker in Jest. You can click on the issue to see the details, and you can help advance these efforts by joining the # Testing channel in Vite Land.

Cypress

  • Liverpoolfc.tv: cypress. IO
  • Discord(A popular foreign chat software) :on.cypress.io/chat
  • Twitter: twitter.com/Cypress_io
  • Npm:www.npmjs.com/package/cyp…
  • GitHub:github.com/cypress-io/…

Cypress has been integrating Vite into their products, and they are very active in the community. They are pairing their Cypress component testing with the Vite development server. They also used Vitesse to refactor their UI. Check out @_jessicasachs ‘VueConf US 2021 talk to learn more about why Cypress and Vite work so well together.

Web Test Runner

  • Liverpoolfc.tv: github.com/material-sv…
  • Npm:www.npmjs.com/package/vit…
  • GitHub:github.com/material-sv…

The viet-web-test-runner plugin is a plug-in for @web/test-runner that tests vite-driven projects. This plugin will automatically connect to the Vite project in the current directory, load the project configuration, and build each test file using the Vite build pipeline you have configured.

Other tools

Storybook

  • Liverpoolfc.tv: github.com/eirslett/st…
  • Discord(A popular foreign chat software) :discord.gg/storybook
  • Twitter: twitter.com/storybookjs
  • Npm:www.npmjs.com/package/sto…
  • GitHub:github.com/eirslett/st…

Created by @Eirikobo, @Sasan_Farrokh, and Ianvanschooten, StoryBook-Build-Vite allows you to build your storybook using Vite. Michael Shilman wrote a blog post explaining the principles in detail and highlighting the benefits of Storybook-Builder-Vite: significantly faster builds, compatibility with Vite configurations, and access to the Vite plugin ecosystem.

Tauri

  • Liverpoolfc.tv: tauri. Studio
  • Discord(A popular foreign chat software) :Discord.com/invite/taur…
  • Twitter: twitter.com/TauriApps
  • npm:www.npmjs.com/package/@ta…
  • GitHub:github.com/tauri-apps/…

⚠️ It’s a little like Electron, but it doesn’t pack Chromium and Node.js like Electron. It solves the two big problems of Electron. The back-end and operating system integration piece is implemented using RUST.

Tauri is a framework for building desktop applications using front-end technology. They added the official entry template to Vite with the use of vite-plugin-Tauri, a plugin maintained by tauri core team member @amr__bashir. Vite + Tauri is probably the perfect combination for native application development. A quote from the Tauri team: “Vite has a special place in Tauri’s heart”.

TroisJS

  • Liverpoolfc.tv: troisjs. Making. IO
  • Twitter: twitter.com/soju22
  • Npm:www.npmjs.com/package/tro…
  • GitHub:github.com/troisjs/tro…
  • Online operation: stackblitz.com/edit/troisj…

Troisjs combines ThreeJS, Vue 3, and Vite to build a library similar to React-three-Fiber for Vue. You can check out this very cool Demo by clicking on this link. Svelte Cubed @Rich_Harris recently launched Svelte Cubed, which provides declarative scenarios for Svelte based on 3D components. Vite’s hot update is perfect for designing 3D scenes, and in fact some examples of React-Three-Fiber are now using Vite.

Slidev

  • Liverpoolfc.tv: sli. Dev
  • Discord(A popular foreign chat software) :chat.sli.dev
  • Twitter: twitter.com/Slidevjs
  • Npm:www.npmjs.com/package/sli…
  • GitHub:github.com/slidevjs/sl…
  • Running online: si.dev /new

Another project from @ANTfu, Slidev is a Markdown-based slide generator supported by Vite, Vue3, and WindiCSS. It’s feature-rich, and Vite’s hot update mechanism ensures that code changes are immediately mapped to slides. This is one of the best examples of the new wave of tools that Vite has made possible.

Viteshot

  • Website: viteshot.com
  • Twitter: twitter.com/fwouts
  • GitHub:github.com/zenclabs/vi…

Viteshot was created by @fwouts to generate screen shots of UI components in a matter of seconds. He is also working on React Preview (to be renamed Preview JS in the future), which provides real-time previews of components and storybooks in VSCode.

Backlight

⚠️ Translator’s note: A small part of the right side of the Logo is white. It will not look obvious when placed with a white background. If you are curious, you can manually change the background color of the page to see it

  • Liverpoolfc.tv: backlight. Dev
  • Discord(A popular foreign chat software) :discord.gg/XkQxSU9
  • Twitter: twitter.com/backlight_d…
  • GitHub:github.com/divriots/br…

Backlight is a design system platform from the

RIOTS. They are building their applications in Vite, writing documents in VitePress, and they are working on Browser-Vite, a branch of Vite that can use Vite in the browser (starting the service with the service worker).

Get involved!

If you’ve sat through the above, you’ve probably developed some interest in the ecology of Vite. If you haven’t joined Vite Land yet, do so now! Contributing channel to #contributing channel, share your idea with us, and then cooperate with us!

The final declaration

I could go on and on about Vite, for example: Vanilla Extract has an official integration for Vite, Craft CMS integration, Storyblok is using Vite in lib mode for their build setups, Vercel Added Zero Configuration deploys for Vite. But I have to stop at something, because if I keep writing, the article will get too long and no one will want to read it. As I said, Vite’s current ecosystem is too large to cover all of it in one article.

There are a lot of people I haven’t mentioned: Vite core team members and other teams who have done a great job dealing with a lot of problems. Always fixing bugs and adding features. And our translation team, who helped more people get into Vite. And there are countless examples. I hope to include some of them in this article, so here’s a list (in no particular order) : @shinigami, @underfin, @egoist, @linus_borg, @Posva, @Kiaking85, @meteorlxy, @ygj6, @onenail, @niputi_, @Choysen, @Csr632, Nihalgonsalves, @CAwa-93, @daychongyang, @Remorses, @YdcJeff, @iheyunfei, @Danielcroe, @pi0, @threepointone, @Khalwat, @Hannoeru, @Wheatjs, @Artursignell, @Jgalbraith64, @Pcalloc, @QC-L, @Shenqingchuan, @Naokie, @Jay -es, @AlexJoverm, @puruvjDev and all other contributors to the Vite core team and Vite ecosystem. Let us continue to build a better tomorrow together!

conclusion

How’s that？ After reading this article, do you know Vite again? I thought Vite was only popular in the Vue community, but this article is a direct refresher.

Another thing that makes me wonder is this @ANTfu. I saw him in vUe-related projects many times before, and I thought he was quite strong. He contributed so many projects to Vue, after reading this article… This big guy fighting too strong! How many projects are being maintained at once! And every project looks great.

By the way, I would also like to introduce this big guy: Antfu is short for Anthony Fu, whose surname is Fu. I used to think that his surname was Fu (Fuerkang’s Fu), until I saw his Chinese name on a donation website. It has been too long for me to remember his full name, but I still remember his Chinese surname: Fu, if anyone knows his Chinese name please post it in the comments section.

⚠️ Some of you may know someone with the surname Fu. Are Fu and Fu the same surname? Is Fu the traditional version of Fu? If you’re curious, you can click on zhihu’s article, “Are Fu and Fu the same Surname?” See what everyone’s saying

This article is about Vite, not Anthony Fu, but hopefully it will ease your doubts about whether you should use Vite in your new project. Feel free to use it! So many big guy’s projects are in use, other people’s projects are not more complex than our projects, and not only Vue that a few people in the maintenance, there are so many big guy are helping, afraid of what!

This article was first published on the public account: Front-end learning is not moving

Past wonderful articles

  • UI: Do you have any fancy component libraries I can refer to?
  • Mobile Layout Interview Questions: A Thorough review of your CSS Skills
  • Styled Components using the React Super-styled CSS-In-JS library in Vue Projects: Styled components
  • Create your own visual data map without relying on any library
  • Vue second wave of REF syntax proposals coming will it be standard this time?
  • Writing a Simple Vue with your own Hands!
  • Product Manager: The opening animation of Hongmeng is very cool. Please give us a whole page.
  • Product Manager: Can you Get the Numbers to Roll?
  • Vue3 will not support IE11. Efforts will be put into Vue2.7.
  • Vue’s fun new feature: JS variables in CSS
  • What? Can pull effect be achieved with H5 tag alone?
  • Microsoft launches comment section on GitHub
  • An Interview Question that failed me in a Second Interview
  • Double 11 small black box is cool? Let’s use CSS variables to improve!
  • Don’t underestimate the nine grid a question can let the candidate’s true colors!
  • “A series of confusing behaviors after setting a prototype object as a Proxy”
  • Vue super Fun New feature: DOM Portal
  • Is It Finally Vue’s Turn to inspire React?
  • Vue3 is a pit on IOS
  • You Yuxi: The Design Process of Vue3