The Vite Ecosystem

One of the strongest points in Vite is the ecosystem around it. Vite took responsibilities from frameworks (common web patterns, glob imports, HMR API, SSR primitives, build optimizations), freeing other maintainers from reinventing the wheel each time by offering a common ground where to collaborate, fostering a lot of explorations in the space. Maintainers from several popular frameworks have chosen Vite as their recommended build tool, and are now deeply involved in Vite core development, participating in discussions and directly working on fixes and features. Vite exposes a flexible JavaScript API, allowing integrations with backend frameworks like Rails and Laravel, or other dev tools like Cypress and Storybook. Vite plugins API is compatible with Rollup, enabling Vite to leverage the Rollup plugins ecosystem. A very active community of plugin maintainers is advancing DX on every front.

Vite really is turning out to be more than I expected: it's now being used with not just Vue, but React, Svelte, Solid, Marko, Astro, Shopify Hydrogen, plus integrations with Storybook, Laravel, Rails etc (some combine it with InertiaJS)... - Evan You

In this post, we'll look at some of the teams and people in the ecosystem. At the risk of not mentioning a project or person that is important to the community, I still think it is a good idea to show how many people are working together to advance Vite forward. The ecosystem is already big enough that I won't pretend to cover every project, and it is also the story visible to me from my field of view centered in Vite core. Apologies in advance in case you don't find yourself in the post. Please share your work with the community, I'm eager to learn more about what you are creating with Vite. I hope this post will reinforce the idea of Vite as a collaborative effort. If you are interested in web tooling, Vite is a great place to get involved and help push DX for everybody forward.

The focus is on highlighting the ongoing collaboration between the different teams. If you want to learn more about each project, there are links to their homepage, GitHub, community, and where possible a direct only playground to tinker with them. Enough introduction, let's take a walk around the Vite Ecosystem.

On the shoulder of giants

After its second massive sprint that resulted in the release of Vite 2, Evan You opened up the maintenance of the project by setting up the Vite Team. There is now a tight-knit team led by Evan pushing the project forward, working closely with other teams in the ecosystem to ensure that Vite works smoothly for their frameworks and integrations. There are now more than 400 contributors to the repo, and a lively community in Discord. The project is growing quickly. It is being used by more than 75k other projects in GitHub, and the vite package has more than 1.3M npm monthly downloads.

Rollup is a fundamental piece. Vite can be thought of as an opinionated Rollup setup coupled with a snappy dev server. One of Rollup core maintainers, @lukastaegert, recommended it as THE web development wrapper for Rollup that has been missing for a long time. Vite's compatibility with the Rollup Plugins ecosystem gave Vite a head start, and we are seeing a lot of adoption coming from Rollup setups. It is awesome to see Rollup maintainers reaching out to Vite and WMR maintainers when extending their plugin API to ensure that the ecosystem remains compatible.

esbuild is a bundler written in Go, pushing the limits of build tool performance. Vite uses esbuild to transpile individual files (to strip typescript types and compile JSX) and as the default minifier (for both JS and CSS files). It is also used as a bundler when pre-bundling dependencies during dev. @evanwallace has been doing a stellar job. esbuild is improving daily, providing Vite with a fast alternative to tsc, babel, and Rollup depending on the task.

Typescript has taken the JS world by storm. Vite supports importing .ts files out-of-the-box. Internally, esbuild is used to strip the types, avoiding costly type checking in the critical path when transpiling sources for the browser. This is important to get the best HMR experience possible. If you are using a modern IDE like VS Code, you'll get most information through IntelliSense as you code. You can also run tsc during build time, or use a plugin like rollup-plugin-typescript2. @fi3ework's vite-plugin-checker is another interesting option allowing you to run TypeScript in a worker thread.

Vite doesn't need babel for most setups, avoiding the need for its heavy AST pipeline. But the React ecosystem heavily relies on babel for HMR and other compile-based solutions like CSS-in-JS libraries. It is currently used in @vitejs/plugin-react and in @vitejs/plugin-legacy to provide support for legacy browsers. The Parcel and Next.js teams are working on porting the most used plugins to SWC, a Rust toolchain. Vite could move from babel to SWC once these efforts mature (early explorations: SWC based @vitejs/plugin-legacy, unplugin-swc, vite-plugin-swc-react).

Vite encourages the use PostCSS, supporting it out-of-the-box. Other CSS Pre-processors are also supported by manually adding them to the project dependencies. But PostCSS is more aligned with Vite's vision, allowing the use of CSSWG drafts like postcss-nesting today, keeping your CSS standards-compliant for the future.

Other explorations

Snowpack leverages JavaScript's native module system to avoid unnecessary work and stay fast no matter how big your project grows. It helped to establish the benefits of an ESM first approach to dev tooling. Snowpack and Vite influenced each other, with discussions to standardize the HMR API and techniques to loading packages in a mixed CJS and ESM world. Snowpack core team members (@FredKSchott, @drwpow, @matthewcp, @n_moore) are now working on astro, an Islands-based SSG framework now powered by Vite. Both communities are collaborating, applying the lessons learned while working on Snowpack to improve Vite core.

WMR is similar in scope and philosophy to Vite, and it is developed by the Preact team. @_developit pioneered with WMR the universal Rollup plugin API, a scheme that allows to use Rollup plugins during dev and build time tapping into the rich Rollup ecosystem. Vite 2 Plugin API is based on WMR's approach, with added Vite-specific hooks. Vite and WMR collaborated to unify URL suffix modifiers and other features.

Web Dev Server takes a more lower-level approach, requiring a manual Rollup setup for the production build. The modern web project encompasses several explorations and includes tools that could be used in a Vite setup, like the Web Test Runner that some community members are using with vite-web-test-runner-plugin.

UI Frameworks

With Evan You as the creator and project lead, and two other Vue core team members (@antfu and @sodatea) in the Vite core team, it isn't a surprise that the Vue team is now recommending using the Vite powered create-vue scaffolding tool for new projects. Support for Vue 3 is achieved with @vitejs/plugin-vue, and Vue 2 using vite-plugin-vue2. Vite will see massive adoption in the Vue ecosystem, with most projects planning or already implementing support for Vite and enabling it by default in some cases (Nuxt, Vuetify, Quasar). There are also new Vue projects that born directly to take advantage of Vite speed and features (VitePress, iles, Slidev)

React is supported in Vite through @vitejs/plugin-react. @alecdotbiz, one of Vite's core maintainers, has been working hard to smooth the experience. We see a lot of usage from the React ecosystem, mainly for prototyping and in libraries examples. React Router Docs, for example, includes Vite environments using StackBlitz Web Containers. Next.js is betting on a Webpack plus SWC future. So there isn't much Vite usage for complex SSR React apps. But there are Next-inspired frameworks based on Vite starting to appear, like rakkas and vitext.

With the Preact team developing WMR, we can expect that they will suggest it as their recommended build tool. They are nonetheless also offering official support for Vite with @preact/preset-vite. @marvinhagemeist, part of Preact core team, in particular, has been close to the Vite community and actively participated in discussions related to security and compatibility between the two ecosystems (both in aligning features and in ensuring plugins works in Vite and WMR).

The Svelte team is one of the most active contributors to Vite. Support for Svelte is achieved with vite-plugin-svelte. SvelteKit is powered by Vite, and we can expect that there will be a push for using Vite in their ecosystem. @Rich_Harris came up with a generic SSR scheme for SvelteKit, that Evan You later ported to Vite resulted in one of its key features. Being able to share SSR primitives was crucial to foster the current innovation in Vite-based SSG and SSR frameworks. @GrygrFlzr, @benmccann, @dominikg, and @bluwyoo are very close to the project and with SvelteKit being one of the more advanced frameworks using Vite, both teams have been heavily collaborating.

The marko team is maintaining @marko/vite as an official plugin for Vite, and they offer Vite-based starters. @dylan_piercey and @RyanCarniato have been close to the project, pushing for features like Zero JS and SSR streaming support.

The Solid team is also maintaining an official plugin for Vite, vite-plugin-solid. Their starter templates are also using Vite, they are working in SolidStart, a Vite-powered App Framework. @RyanCarniato has been quite active in the Vite community, checkout for example his demo using Vite and Solid to take advantage of Vercel Edge Functions streaming capabilities.

The lit team released a new version of their framework. There is a starter template in the Vite monorepo, so it is available in create-vite. There isn't a plugin to enable HMR in lit projects, but the lit team was interested in creating one.

App Frameworks

The Nuxt team has worked closely with the Vite team to ensure that Vite works smoothly in Nuxt. They created nuxt-vite that integrates Vite with Nuxt 2. And in its next iteration, Nuxt 3 will use Vite by default. The Nuxt team took an interesting approach regarding build tools, abstracting the framework from the used build tool. Users will be able to choose between both Vite and Webpack 5. Nuxt 3 will allow other projects in the Vue ecosystem, like Vue Storefront to enjoy Vite's DX. As a colorful note, @antfu, responsible for a big chunk of the DX innovation in the ecosystem (as you'll see in this post), is now working in the Nuxt Team.

SvelteKit is an application framework powered by Svelte, pushing forward their ideas of transitional apps for modern web development. The Svelte and Vite teams are fluently collaborating, improving Vite's SSR primitives, the Server API, and quality in general. Vite has improved a lot due to SvelteKit pushing its limits.

The astro team reworked their engine to use Vite and they have become a key player in the ecosystem. Astro is pushing Vite's limits in several areas that no other framework exercised before, and they have been improving core as they explore. Their experience in ESM tooling will be crucial for Vite moving forward.

@MaximoMussini created iles, a framework that lets you create islands of interactivity with Vue powered by Vite. Inspired by Astro and VitePress, iles is a good example of the kind of [explorations that Vite is enabling](iles podcast. Maximo has been an active community member, also pushing for Vite's adoption in the Rails community.

VitePress is a fresh take on VuePress, taking the opportunity to see rethink what a Vue-powered static site generator can look like using Vue 3 and Vite. Evan You developed VitePress in tandem with Vite, a great use case to test and inform Vite design. VitePress has seen a lot of adoption for documentation: Vite, Vue Blog, VueUse, Pinia, vite-ruby, vite-plugin-pwa, Slidev, windi, laravel-vite are just some examples. VuePress also implemented support for Vite with @vuepress/bundler-vite.

@bholmesdev et al are working on Slinkity, an islands SSG framework that glues Eleventy and Vite together. Inspired by @Snugug's early work in vite-plugin-eleventy and frameworks like Astro, Slinkity is opening the doors to 11ty users to the Vite ecosystem. It allows Eleventy projects to leverage Vite's UI frameworks support, fast HMR, and Vite's rich plugin ecosystem.

Shopify chose Vite for its new React Store Front framework Hydrogen. The Hydrogen team is working with the React team to support React Server Components and streaming server-side rendering with suspense in Vite. @jplhomer has been very active in Vite's community. He has collaborated to improve Vite core and Vite's React support.

rakkas is React SSR Framework powered by Vite, inspired by Next.js and SvelteKit. @cyco130, the author, has been active in the Vite community working with others to improve SSR in Vite.

vite-plugin-ssr is another minimal SSR framework, developed by @brillout. He has been very active in the Vite SSR space, helping others and contributing fixes and ideas to Vite core. vite-plugin-ssr aims to be a toolkit for SSR frameworks authors, offering a more streamlined experience over Vite's low-level SSR primitives. There are frameworks like and vitext, a React framework developed by @asleMammadam that are built on top of it. @brillout is also working on other related projects like telefunc and Vike.

@frandiox created vite-ssr, as a simple yet powerful SSR solution for Vite in Node.js. It is another take in exposing Vite's SSR API as a high-level solution. He is also the creator of vitedge, an edge-side rendering and fullstack Vite framework running on Cloudflare Workers

Integrations

@MaximoMussini created one of the first polished backend integrations with vite-ruby, and allowed Vite to enter the Ruby community. Check out the motivation section in the docs for a bit of the history of the project's inception. The #rails channel in Vite Land has seen a lot of activity, and this project inspired others to integrate Vite in their projects.

@enzoinnocenzi created laravel-vite to bring Vite and Laravel ecosystems together. Following the footsteps of vite-ruby, Enzo's work has been a key factor to foster Vite's adoption in the Laravel community.

fastify-vite is a minimal and fast alternative to full-blown SSR frameworks like Nuxt and Next. @anothergalvez built fastify-vite as a fastify-first solution instead of a framework-first. There is a lot of synergy between the fastify and Vite communities. fastify-vite is pushing the adoption of both projects forward.

CSS Frameworks

Tailwind Labs was one of the first teams to recognize Vite's potential, providing official integration examples for Vite very early and starting to sponsor the project. In response to the innovation in DX in the ecosystem, they released Just-in-Time Mode, an on-demand engine for Tailwind v2.1+ that provides a great experience when paired with Vite HMR. With frameworks like Hydrogen pushing the Vite plus Tailwind CSS combo, there will be a new wave of adoption of Vite from Tailwind users.

@satireven created WindiCSS, a fast on-demand engine for Tailwind, and @antfu used it to create vite-plugin-windicss, that offered unprecedented DX in loading and HMR speed. A lively community has now developed around the project. WindiCSS is now being used to power docs pages like Nuxt 3, and projects like Slidev.

After his experience with Windi, @antfu created UnoCSS, an instant on-demand Atomic CSS engine toolkit. It once again showed how much space for improvement there is ahead of us. UnoCSS can be 200x faster than Windi CSS, beating by two orders of magnitude the fastest engine. You can read about the inception story here Reimagine Atomic CSS and Icons in Pure CSS. Anthony started this project as a Vite-only solution, but it is now available for other bundlers too. UnoCSS will power the next generation WindiCSS engine.

Plugins

A list of Vite plugins can be found in Awesome Vite. There has been a lot of activity in the Repo due to new projects, templates, and plugins submissions, @Scrum_ has been doing a great job curating the list. There are tons of plugins, and the ecosystem is growing every day. Here are some examples to give you an idea of the features you have at your fingertips. Check out Plugins section of Awesome Vite to explore the complete list

vite-plugin-pages

File system based routing support

vite-plugin-mpa

Out-of-the-Box MPA support for Vite

vite-plugin-federation

Support Webpack like Module Federation

vite-plugin-node

Use Vite as a node dev server

vite-plugin-comlink

WebWorkers with comlink

vite-plugin-rsw

Support for wasm-pack

vite-plugin-elm

Compile an Elm app/document/element on your project

vite-plugin-qrcode

Show QR code on server start to debug in mobile

vite-plugin-full-reload

Automatically page reload when files are modified

vite-plugin-compress

Compress your bundle and assets from Vite

vite-plugin-checker

TypeScript, VLS, vue-tsc, ESLint in worker thread

vite-plugin-inspect

Inspect the intermediate state of plugins

The Rollup ecosystem maintains core plugins in the Rollup org, and there is a list of community plugins at Awesome Rollup. Vite Plugin API is mostly compatible with Rollup. We are also maintaining a list of Vite Rollup plugins compatibility. Since the Rollup ecosystem is getting closer to Vite, I hope we start seeing "Works in Vite" badges in Rollup plugins docs in the future. Some examples of compatible plugins:

@rollup/plugin-yaml

Converts YAML files to ES6 modules

rollup-plugin-typescript2

Run typescript with compiler errors

rollup-plugin-critical

Generate critical CSS

unplugin is another @antfu project, a unified plugin system for Vite, Rollup, Webpack, and possibly other bundlers in the future. Anthony has been migrating his plugins to use this library opens a big part of the DX innovation he brought to Vite to other build tools. This project is part of the unjs umbrella, a collection of bundler-agnostic libraries from the Nuxt team that they are extracting from their efforts to abstract Nuxt from the used build tool. Some examples include:

unplugin-icons

Thousands of icons as components on-demand

unplugin-vue-components

On-demand components auto importing for Vue

unplugin-auto-import

Auto import APIs on-demand with TS support

As a great example of the kind of plugins available when you use Vite, vite-plugin-pwa is a zero-config PWA framework-agnostic plugin for Vite that enables offline support via Workbox. @antfu and @userquin have built a polished and seamless experience for every framework.

Starters

Replit was one of the first companies to take advantage of Vite to give a better experience to their users, by switching their React Starter Template to Vite. @amasad's tweet comparing this template to the CRA version was later used in many blog posts and talks to illustrate the difference in load speed; "Vite ran before the container could even boot CRA files."

glitch adopted Vite for their Starter Projects. They used Vite to do the heavy lifting. keithkurson said: "It's been so delightful to work with, and making it so that all of our starters have similar build patterns and Rollup plugins is going to be a huge value add for programmers on glitch"

StackBlitz has made Vite a first class cityzen in their browser IDE. They worked to make Vite compatible with WebContainers (which included supporting esbuild). They have also worked with teams in the ecosystem to ensure that the most popular Vite frameworks work smoothly: SvelteKit, Hydrogen, Astro, and others. Due to how close the environment is to local, Vite Core has been suggesting the use of Stackblitz for minimal reproductions in bug reports. They also added Vite starters: vite.new, and vite.new/{template}, and included Vite in their new dashboard, and are now the largest sponsor to Vite.

Vitesse is a good example of a Vite Starter. It is a Vue 3 template that @antfu has been using this starter to showcase some of the best plugins in the ecosystem and it is packed with features: File based routing, auto imports, PWA, Windi CSS, SSG, critical CSS, to name a few. It is also a good example of a testing setup using Cypress.

Based on Vitesse, WebExtension Vite Starter is a Vite-powered WebExtension starter template. I wanted to include it to showcase the usage of Vite outside of a typical web app. This is one example of many efforts to use Vite in other envs, to be able to get Vite's fast HMR, features, and plugins.

The Vite community is maintaining templates for different combinations of frameworks and tools. There is a huge list of options in the Awesome Vite Templates section. If you would like to test them online, for a template like https://github.com/{user}/{repo} you can head to https://stackblitz.com/github/{user}/{repo} and start playing with it. If you prefer to run them locally, a tool like degit will let you get a fresh copy of a template using degit user/repo.

Testing

@larsthorup is developing mocha-vite-puppeteer, that allows running Mocha frontend tests with Vite and Puppeteer. It lets you run your tests as fast as Vite bundles your code.

@sodatea is building vite-jest, which aims to provide first-class Vite integration for Jest. It is still a work-in-progress, due to blockers in Jest. You can track progress in the First Class Jest Integration issue, and help move these efforts forward by joining the #testing channel in Vite Land.

Cypress has been integrating Vite in their products, and they have been quite active in the community. They are making their new Cypress Component Testing be a good match for Vite's dev server. They are also re-building their App UI using Vitesse. Check out @_jessicasachs's VueConf US 2021 talk to learn more about why Cypress and Vite go well together.

vite-web-test-runner-plugin A @web/test-runner plugin to test Vite-powered projects. This plugin automatically connects to the Vite project in the current directory, loads the project configuration, and uses your already-configured Vite build pipeline to build each test file.

Other tools

@eirikobo, @sasan_farrokh, and ianvanschooten created storybook-builder-vite, which lets you use Vite to build your Storybook. Michael Shilman wrote a blog post explaining in detail how this works and highlighting the benefits of the new builder: dramatically improved build speed, compatibility with your Vite project settings, and access to Vite's plugin ecosystem.

Tauri is a framework to desktop build applications with a web frontend. They added official starter templates for Vite using vite-plugin-tauri, a plugin maintained by @Amr__Bashir, a core Tauri team member. Vite + Tauri could be a great combo for native apps development. A quote from the Tauri team: "Vite has a special place in Tauri's heart".

troisjs combines ThreeJS, Vue 3, and Vite to build a react-three-fiber like library for Vue. The demos are incredible. @Rich_Harris recently unveiled Svelte Cubed that offers the declarative 3D component-based scenes for Svelte. Vite's HMR is a perfect match to design 3D scenes, in fact some of the react-three-fiber examples are using Vite now.

Another project from @antfu, Slidev is a Markdown-based Slides Generator powered by Vite, Vue 3, and Windi CSS. It is packed with features and the DX is precious, with Vite's HMR changes are reflected instantly in the slides. This is one of the best examples of the new wave of tools that Vite is making possible.

@fwouts's Viteshot allows you to generate screenshots of UI components within seconds. He is also working on React Preview (soon to be rebranded as Preview JS), which provides instant previews of components and Storybook stories in Visual Studio Code.

Backlight is a Design System platform from <div>RIOTS. They are using Vite to build their apps, VitePress for docs, and they are also working on browser-vite, a fork of Vite which aims at being used in the browser (served by service worker).

Get involved!

If you reached this point, you are surely interested in Vite's ecosystem. You should join Vite Land if you aren't already there. Head to the #contributing channel and say hi, share your ideas and work with others.

Final note

I could continue with 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 needed to put the limit at one point to be able to publish this post, as I said, the ecosystem is already too big to try to explore it all in a single post.

There are also many individuals that I haven't had the chance to mention. Vite core team members and the triage team, doing an amazing job with the influx of issues. Long-term contributors that have been fixing issues and extending Vite features. The translation teams. Community members that are helping others to get started. And the list goes on. I want some of them to be part of this post, so here goes a final list of unordered names that didn't yet appear in the post: @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 Vite Core and the Vite ecosystem. Let's keep building together!

Last updated on 2021-11-30

Connect with me on Twitter @patak_dev or in Discord @patak.

If you want to help making my OS work sustainable, consider sponsoring me on GitHub Sponsors.

Continue reading

vite build
A walkthrough of the Vite codebase to understand how Vite bundles and optimize your code for production

Vite 2
A VitePress powered post about Vite 2 and the importance of the instant feedback loop that it enables

Vite Rollup Plugins
A list of official Rollup plugins compatibility for Vite

Photo by Emma Gossett on Unsplash

The Vite Ecosystem ​

On the shoulder of giants ​

# vite

# rollup

# esbuild

# Typescript

# babel

# PostCSS

Other explorations ​

# Snowpack

# WMR

# Web Dev Server

UI Frameworks ​

# Vue

# React

# Preact

# Svelte

# marko

# Solid

# lit

App Frameworks ​

# Nuxt

# SvelteKit

# Astro

# iles

# VitePress

# Slinkity

# Hydrogen

# rakkas

# vite-plugin-ssr

# vite-ssr

Integrations ​

# vite-ruby

# laravel-vite

# fastify-vite

CSS Frameworks ​

# Tailwind CSS

# Windi CSS

# UnoCSS

Plugins ​

# Awesome Vite Plugins

# awesome-rollup

# unplugin

# vite-plugin-pwa

Starters ​

# Replit

# Glitch

# StackBlitz

# Vitesse

# WebExtension Vite Starter

# Awesome Vite Templates

Testing ​

# mocha-vite-puppeteer

# vite-jest

# Cypress

# Web Test Runner

Other tools ​

# Storybook

# Tauri

# TroisJS

# Slidev

# Viteshot

# Backlight

Get involved! ​

Final note ​

The Vite Ecosystem

On the shoulder of giants

vite

rollup

esbuild

Typescript

babel

PostCSS

Other explorations

Snowpack

WMR

Web Dev Server

UI Frameworks

Vue

React

Preact

Svelte

marko

Solid

lit

App Frameworks

Nuxt

SvelteKit

Astro

iles

VitePress

Slinkity

Hydrogen

rakkas

vite-plugin-ssr

vite-ssr

Integrations

vite-ruby

laravel-vite

fastify-vite

CSS Frameworks

Tailwind CSS

Windi CSS

UnoCSS

Plugins

Awesome Vite Plugins

awesome-rollup

unplugin

vite-plugin-pwa

Starters

Replit

Glitch

StackBlitz

Vitesse

WebExtension Vite Starter

Awesome Vite Templates

Testing

mocha-vite-puppeteer

vite-jest

Cypress

Web Test Runner

Other tools

Storybook

Tauri

TroisJS

Slidev

Viteshot

Backlight

Get involved!

Final note