Information Density: Vite – Signal Evidence & AI Readability

[IMG: Vite icon]
Cloudflare supports Vite's missionAre you an LLM? View /llms.txt for optimized Markdown documentation, or /llms-full.txt for full documentation bundleBy
[IMG: VoidZero]
[H1] The Build Tool for the Web
Vite is a blazing fast frontend build tool powering the next generation of web applications. Get Started View on GitHub npmYarnpnpmBunDenobash$ npm create vite@latestbash$ yarn create vitebash$ pnpm create vitebash$ bun create vitebash$ deno init --npm vite
[H6] Trusted by the world's best software teams
[IMG: openai]
[IMG: shopify]
[IMG: stripe]
[IMG: linear]
[IMG: clickup]
[IMG: wiz]
[H2] Redefining developer experience
Vite makes web development enjoyable again
[H5] Instant Server Start
On demand source file serving over native ESM, with blazing fast dependency pre-bundling.
[IMG: Terminal]
[H5] Lightning Fast HMR
Instantly reflect changes as you save, no matter how big your app is.
[IMG: lightning fast hot module replacement]
[H5] Rich Features Out of the Box
TypeScript, JSX, CSS, Workers, WebAssembly... and more just a plugin away.
[H5] Optimized Build
Advanced tree-shaking, built-in minification, fine-grained chunking control powered by Rolldown.
[IMG: optimized build]
[H2] A shared foundation to build upon
[H5] Flexible Plugin System
Vite plugins extends Rollup's well-designed plugin interface with a few extra Vite-specific options.
[H5] Fully Typed API
Designed to be built on top of.
[IMG: typed api]
[H5] First class SSR Support
It's never been easier to setup custom SSR (Server-Side Rendering), or build your own SSR framework.
[IMG: SSR Support]
[H5] Continuous ecosystem integration
Our CI continuously tests Vite changes against downstream projects, allowing us to improve Vite with stability and confidence.
[IMG: continuous ecosystem integration]
[H2] Powering your favorite frameworks and tools
[IMG: Frameworks powered by Vite]
[IMG: Frameworks powered by Vite]
[H3] Loved by the community
Don't take our word for it - listen to what Vite community members have to say.
[H2] 80k+
Github Stars
[H2] 80m+
Weekly NPM downloadsI'm loving what Vite enables. We've found building SolidStart that it is less a metaframework but a system of symbiotic Vite plugins. While built with SolidJS in mind, they should scale from our simplest template to opinionated starter. We're building an ecosystem on Vite.
[IMG: Ryan Carniato]
Ryan Carniato@RyanCarniatoVite is basically the united nations of JavaScript at this point. I'll be there as a representative of Sveltelandia
[IMG: Rich Harris]
Rich Harris@Rich_HarrisEach and every time I use Vite, I feel a true sense of pure and unbridled joy.
[IMG: David East]
David East@_davideastIt's also a great platform to build a framework on since it provides a pluggable dev environment.Community is amazing too.
[IMG: Mark Dalgleish]
Mark Dalgleish@markdalgleishEvery time I suspect I've hit the bounds of what Vite can do, I end up being wrong.
[IMG: Jason Miller]
Jason Miller@_developitVite has been a game changer for the industry.
[IMG: David Cramer]
David Cramer@zeegI am so excited to see so many great frameworks teaming up on top of vite. So many will benefit. ❤️ to the vite team.
[IMG: Dion Almaer]
Dion Almaer@dalmaerVite is gonna eat the (JavaScript) world.
[IMG: Christoph Nakazawa]
Christoph Nakazawa@cpojerWow, wow, wow, wow, wow, wow, Vite is..... Vite is.... Wow ???
[IMG: Nikolaj]
Nikolaj@lopugit
[H3] Free & open source
Vite is MIT Licensed and will always be free and open source. This is made possible by our contributors and these companies:Become a Sponsor
[IMG: Brought to you by VoidZero]

Are you an LLM? You can read better optimized documentation at /guide.md for this page in Markdown format
[H1] Getting Started ​
[H2] Overview ​
Vite (French word for "quick", pronounced /viːt/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).A build command that bundles your code with Rolldown, pre-configured to output highly optimized static assets for production.Vite is opinionated and comes with sensible defaults out of the box. Read about what's possible in the Features Guide. Support for frameworks or integration with other tools is possible through Plugins. The Config Section explains how to adapt Vite to your project if needed.Vite is also highly extensible via its Plugin API and JavaScript API with full typing support.You can learn more about the rationale behind the project in the Why Vite section.Learn Vite through interactive tutorials on Scrimba
[H2] Browser Support ​
During development, Vite assumes that a modern browser is used. This means the browser supports most of the latest JavaScript and CSS features. For that reason, Vite sets esnext as the transform target. This prevents syntax lowering, letting Vite serve modules as close as possible to the original source code. Vite injects some runtime code to make the development server work. This code uses features included in Baseline Newly Available at the time of each major release (2026-01-01 for this major).For production builds, Vite by default targets Baseline Widely Available browsers. These are browsers that were released at least 2.5 years ago. The target can be lowered via configuration. Additionally, legacy browsers can be supported via the official @vitejs/plugin-legacy. See the Building for Production section for more details.
[H2] Trying Vite Online ​
You can try Vite online on StackBlitz. It runs the Vite-based build setup directly in the browser, so it is almost identical to the local setup but doesn't require installing anything on your machine. You can navigate to vite.new/{template} to select which framework to use.The supported template presets are:JavaScriptTypeScriptvanillavanilla-tsvuevue-tsreactreact-tspreactpreact-tslitlit-tssveltesvelte-tssolidsolid-tsqwikqwik-ts
[H2] Scaffolding Your First Vite Project ​
npmYarnpnpmBunDenobash$ npm create vite@latestbash$ yarn create vitebash$ pnpm create vitebash$ bun create vitebash$ deno init --npm viteThen follow the prompts!Watch an interactive lesson on ScrimbaCompatibility NoteVite requires Node.js version 20.19+, 22.12+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.Using create vite with command line optionsYou can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + Vue project, run:npmYarnpnpmBunDenobash# npm 7+, extra double-dash is needed:
$ npm create vite@latest my-vue-app -- --template vuebash$ yarn create vite my-vue-app --template vuebash$ pnpm create vite my-vue-app --template vuebash$ bun create vite my-vue-app --template vuebash$ deno init --npm vite my-vue-app --template vueSee create-vite for more details on each supported template: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts.You can use . for the project name to scaffold in the current directory.To create a project without interactive prompts, you can use the --no-interactive flag.
[H2] Community Templates ​
create-vite is a tool to quickly start a project from a basic template for popular frameworks. Check out Awesome Vite for community maintained templates that include other tools or target different frameworks.For a template at https://github.com/user/project, you can try it out online using https://github.stackblitz.com/user/project (adding .stackblitz after github to the URL of the project).You can also use a tool like tiged to scaffold your project with one of the templates. Assuming the project is on GitHub and uses main as the default branch, you can create a local copy using:bashnpx tiged user/project my-project
cd my-project
npm install
npm run dev
[H2] Manual Installation ​
In your project, you can install the vite CLI using:npmYarnpnpmBunDenobash$ npm install -D vitebash$ yarn add -D vitebash$ pnpm add -D vitebash$ bun add -D vitebash$ deno add -D npm:viteAnd create an index.html file like this:html<p>Hello Vite!</p>Then run the appropriate CLI command in your terminal:npmYarnpnpmBunDenobash$ npx vitebash$ yarn vitebash$ pnpm vitebash$ bunx vitebash$ deno run -A npm:viteThe index.html will be served on http://localhost:5173.
[H2] index.html and Project Root ​
One thing you may have noticed is that in a Vite project, index.html is front-and-central instead of being tucked away inside public. This is intentional: during development Vite is a server, and index.html is the entry point to your application.Vite treats index.html as source code and part of the module graph. It resolves <script type="module" src="..."> that references your JavaScript source code. Even inline <script type="module"> and CSS referenced via <link href> also enjoy Vite-specific features. In addition, URLs inside index.html are automatically rebased so there's no need for special %PUBLIC_URL% placeholders.Similar to static http servers, Vite has the concept of a "root directory" which your files are served from. You will see it referenced as <root> throughout the rest of the docs. Absolute URLs in your source code will be resolved using the project root as base, so you can write code as if you are working with a normal static file server (except way more powerful!). Vite is also capable of handling dependencies that resolve to out-of-root file system locations, which makes it usable even in a monorepo-based setup.Vite also supports multi-page apps with multiple .html entry points.
[H4] Specifying Alternative Root ​
Running vite starts the dev server using the current working directory as root. You can specify an alternative root with vite serve some/sub/dir. Note that Vite will also resolve its config file (i.e. vite.config.js) inside the project root, so you'll need to move it if the root is changed.
[H2] Command Line Interface ​
In a project where Vite is installed, you can use the vite binary in your npm scripts, or run it directly with npx vite. Here are the default npm scripts in a scaffolded Vite project:package.jsonjson{
"scripts": {
"dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
"build": "vite build", // build for production
"preview": "vite preview" // locally preview production build
}
}You can specify additional CLI options like --port or --open. For a full list of CLI options, run npx vite --help in your project.Learn more about the Command Line Interface
[H2] Using Unreleased Commits ​
If you can't wait for a new release to test the latest features, you can install a specific commit of Vite with https://pkg.pr.new:npmYarnpnpmBunbash$ npm install -D https://pkg.pr.new/vite@SHAbash$ yarn add -D https://pkg.pr.new/vite@SHAbash$ pnpm add -D https://pkg.pr.new/vite@SHAbash$ bun add -D https://pkg.pr.new/vite@SHAReplace SHA with any of Vite's commit SHAs. Note that only commits within the last month will work, as older commit releases are purged.Alternatively, you can also clone the vite repo to your local machine and then build and link it yourself (pnpm is required):bashgit clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link # use your preferred package manager for this stepThen go to your Vite based project and run pnpm link vite (or the package manager that you used to link vite globally). Now restart the development server to ride on the bleeding edge!To learn more about how and when Vite does releases, check out the Releases documentation.Dependencies using ViteTo replace the Vite version used by dependencies transitively, you should use npm overrides or pnpm overrides.
[H2] Community ​
If you have questions or need help, reach out to the community at Discord and GitHub Discussions.

Are you an LLM? You can read better optimized documentation at /config.md for this page in Markdown format
[H1] Configuring Vite ​
When running vite from the command line, Vite will automatically try to resolve a config file named vite.config.js inside project root (other JS and TS extensions are also supported).The most basic config file looks like this:vite.config.jsjsexport default {
// config options
}Note Vite supports using ES modules syntax in the config file even if the project is not using native Node ESM, e.g. "type": "module" in package.json. In this case, the config file is auto pre-processed before load.You can also explicitly specify a config file to use with the --config CLI option (resolved relative to cwd):bashvite --config my-config.jsWatch an interactive lesson on ScrimbaCONFIG LOADINGBy default, Vite uses Rolldown to bundle the config into a temporary file and load it. This may cause issues when importing TypeScript files in a monorepo. If you encounter any issues with this approach, you can specify --configLoader runner to use the module runner instead, which will not create a temporary config and will transform any files on the fly. Note that module runner doesn't support CJS in config files, but external CJS packages should work as usual.Alternatively, if you're using an environment that supports TypeScript (e.g. node --experimental-strip-types), or if you're only writing plain JavaScript, you can specify --configLoader native to use the environment's native runtime to load the config file. Note that updates to modules imported by the config file are not detected and hence would not auto-restart the Vite server.
[H2] Config Intellisense ​
Since Vite ships with TypeScript typings, you can leverage your IDE's intellisense with jsdoc type hints:js/** @type {import('vite').UserConfig} */
export default {
// ...
}Alternatively, you can use the defineConfig helper which should provide intellisense without the need for jsdoc annotations:jsimport { defineConfig } from 'vite'
export default defineConfig({
// ...
})Vite also supports TypeScript config files. You can use vite.config.ts with the defineConfig helper function above, or with the satisfies operator:tsimport type { UserConfig } from 'vite'
export default {
// ...
} satisfies UserConfig
[H2] Conditional Config ​
If the config needs to conditionally determine options based on the command (serve or build), the mode being used, if it's an SSR build (isSsrBuild), or is previewing the build (isPreview), it can export a function instead:jsexport default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
if (command === 'serve') {
return {
// dev specific config
}
} else {
// command === 'build'
return {
// build specific config
}
}
})It is important to note that in Vite's API the command value is serve during dev (in the cli vite, vite dev, and vite serve are aliases), and build when building for production (vite build).isSsrBuild and isPreview are additional optional flags to differentiate the kind of build and serve commands respectively. Some tools that load the Vite config may not support these flags and will pass undefined instead. Hence, it's recommended to use explicit comparison against true and false.
[H2] Async Config ​
If the config needs to call async functions, it can export an

Are you an LLM? You can read better optimized documentation at /plugins.md for this page in Markdown format
[H1] Plugins ​
NOTEVite aims to provide out-of-the-box support for common web development patterns. Before searching for a Vite or Compatible Rollup plugin, check out the Features Guide. A lot of the cases where a plugin would be needed in a Rollup project are already covered in Vite.Check out Using Plugins for information on how to use plugins.
[H2] Official Plugins ​
[H3] @vitejs/plugin-vue ​
Provides Vue 3 Single File Components support.
[H3] @vitejs/plugin-vue-jsx ​
Provides Vue 3 JSX support (via dedicated Babel transform).
[H3] @vitejs/plugin-react ​
Provides React Fast Refresh support via Oxc Transformer.
[H3] @vitejs/plugin-react-swc ​
Replaces Oxc with SWC during development for SWC plugin usage. During production builds, SWC+Oxc Transformer are used when using plugins. For big projects that require custom plugins, cold start and Hot Module Replacement (HMR) can be significantly faster, if the plugin is also available for SWC.
[H3] @vitejs/plugin-rsc ​
Vite supports React Server Components (RSC) through the plugin. It utilizes the Environment API to provide low-level primitives that React frameworks can use to integrate RSC features. You can try a minimal standalone RSC application with:bashnpm create vite@latest -- --template rscRead the plugin documentation to learn more.
[H3] @vitejs/plugin-legacy ​
Provides legacy browsers support for the production build.
[H2] Community Plugins ​
Check out Vite Plugin Registry for the list of plugins published to npm.
[H2] Rolldown Builtin Plugins ​
Vite uses Rolldown under the hood and it provides a few builtin plugins for common use cases.Read the Rolldown Builtin Plugins section for more information.
[H2] Rolldown / Rollup Plugins ​
Vite plugins are an extension of Rollup's plugin interface. Check out the Rollup Plugin Compatibility section for more information.