← Blog

Astro vs Vite: Framework vs Build Tool

Astro and Vite work at different layers of the same stack. Vite is a build tool: it runs the development server and bundles code for production. Astro is a framework for building websites, and it runs on Vite. Every Astro project uses Vite underneath, so for most websites the question isn’t which one to pick. It’s whether you need a site framework on top of Vite or just Vite on its own.

We build Astro sites through our Astro web development service, and this site runs on Astro, so weigh that. This post also says plainly when plain Vite is the better choice. Every fact below was checked against each project’s own documentation in October 2026.

Short answer: for a multi-page site such as a marketing site, blog or documentation, use Astro, and you get Vite with it. For a single-page app such as a dashboard or an internal tool, plain Vite with a UI library like React or Vue is often all you need.

Astro and Vite at a Glance

As of October 2026, from each project’s documentation and repository:

ViteAstro
What it isBuild tool and development serverFramework for content-driven websites
What it gives youFast local development, hot reloading, production bundlesPages, routing, layouts, content collections, image handling
RoutingNone of its ownFile-based: each file in src/pages becomes a page
Typical outputA JavaScript app, usually a single pageStatic HTML pages, plus on-demand routes with an adapter
JavaScript sent to the browserYour whole appNone by default; per component when you ask
Config filevite.config.jsastro.config.mjs, with a vite option inside it
Current versionVite 8 (8.3.1)Astro 7, built on Vite 8
LicenceMITMIT
StewardshipVoidZero, part of Cloudflare since June 2026The Astro Technology Company, part of Cloudflare since January 2026

What Vite Does

Vite’s documentation describes it as “a build tool that aims to provide a faster and leaner development experience for modern web projects” (source). It has two parts:

  • A development server. It serves your code to the browser as native ES modules and updates the page as you edit, without a full reload (hot module replacement).
  • A build command. It bundles the code for production. Since Vite 8, that bundler is Rolldown.

Vite starts projects from templates for vanilla JavaScript, Vue, React, Preact, Lit, Svelte, Solid and Qwik. What it doesn’t provide is a website structure. There are no pages, routing, layouts or content model built in. You add those yourself, or you use a framework that adds them.

What Astro Adds on Top

Astro supplies the website structure Vite leaves out:

  • File-based routing. Each file in src/pages becomes a URL.
  • Components. .astro files look like HTML with a block of JavaScript at the top. You can also use React, Vue, Svelte, Solid or Preact components on the same page.
  • Content collections. Markdown and other content is checked against a schema at build time, so a missing field fails the build instead of shipping.
  • Islands. Pages send no JavaScript by default. A component that needs to run in the browser gets a directive such as client:load or client:visible. Our guide to Astro islands architecture explains how this works.
  • On-demand routes. With a server adapter, a route marked export const prerender = false renders per request, so forms and API endpoints can live in the same project.

Our post on what the Astro framework is covers the model in more detail.

Does Astro Use Vite?

Yes. Astro switched to Vite in version 0.21, released in October 2021, with the Astro team “replacing Snowpack with Vite going forward” (source). Every Astro release since then has been built on it.

In practice, astro dev starts a Vite development server and astro build runs a Vite build. You rarely notice, because Astro sets Vite up for you. When you do need to change something, the Astro config has a vite option to “pass additional configuration options to Vite” (source). Vite and Rollup plugins go in the same place, and Astro’s documentation has a recipe for installing a Vite or Rollup plugin.

So you don’t install or configure Vite separately in an Astro project. It’s already there.

Which Vite Version Your Astro Site Runs

Each Astro major version is tied to a Vite major version. Astro 7, released on June 22, 2026, moved to Vite 8. With that, Rolldown “replaces both esbuild and Rollup with a single, unified bundler” (source). Earlier Vite versions used esbuild during development and Rollup for production builds.

This site is an example of the step before. designodin.com runs Astro 6.3.5 on Vite 7.3.3, in server output mode on Cloudflare. Moving it to Astro 7 also means moving it to Vite 8.

That matters if a project has custom Vite settings or plugins. Astro’s upgrade guide says “Astro v7.0 upgrades to Vite 8 as the development server and production bundler”, and it advises checking Vite’s own migration guide if you use Vite-specific plugins, configuration or APIs (source). A site with no custom Vite setup usually has less to check.

When Plain Vite Is the Better Pick

  • The project is a single-page app. A dashboard, a calculator or an editor runs as one page in the browser, and its JavaScript is the product.
  • It sits behind a login. An internal tool or admin panel doesn’t need search engines to read its pages.
  • Your team already works in one UI library. Start from Vite’s React, Vue or Svelte template and add a router library if the app needs more than one view.

For these projects, a website framework adds structure you won’t use. Plain Vite gives you the fast development server and production build, and nothing else.

When Astro Is the Better Pick

  • It’s a multi-page website, such as a marketing site, blog or documentation, where most pages are content.
  • Search traffic matters. Pages ship as HTML, with JavaScript only where a component needs it.
  • Most of the site is static, with a few interactive parts such as a menu, a form or a pricing calculator.
  • Some routes need a server, such as form handling or an API, alongside the static pages.

If that describes your project, our Astro web development service builds sites like this, and how we work as an Astro agency shows the setup in detail.

Vite+ and Astro

Vite+ is a newer tool from the team behind Vite. Its documentation calls it “the unified toolchain and entry point for web development” (source). It combines Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown and Vite Task in one package, run through a single vp command: vp dev, vp check, vp test, vp build and so on.

Vite+ replaces separate tools for development, linting, formatting, testing and building. It doesn’t replace a website framework. It adds no pages, routing or content model, so it’s no substitute for Astro. A Vite+ GitHub issue about framework projects also notes that frameworks like Astro and Nuxt “wrap the Vite config and discourage using a separate one” (source). In an Astro project, Vite settings belong in the Astro config.

One Company Behind Both

Both projects are now part of Cloudflare. The Astro Technology Company joined Cloudflare in January 2026. VoidZero, the company that develops Vite, joined in June 2026, and stated that “Vite, Vitest, Rolldown, Oxc, and Vite+ will remain open-source and MIT-licensed” (source). Astro is also MIT-licensed.

Neither tool requires Cloudflare hosting. Astro deploys to many hosts, as our guides to Astro deployment options and Astro hosting options show.

Other Names in the Same Conversation

  • Rolldown: the bundler inside Vite 8, which replaced esbuild and Rollup.
  • esbuild and Rollup: the tools Vite used before version 8, esbuild for development transforms and Rollup for production builds.
  • Oxc: a set of JavaScript tools from VoidZero. Oxlint and Oxfmt in Vite+ come from it.
  • Vitest: a test runner built on Vite, so tests use the same configuration as the app.
  • TypeScript: typed JavaScript. Vite and Astro both handle .ts files without extra setup.
  • Node.js: the runtime both tools need on the machine that builds the site. Vite 8 requires Node.js 20.19+ or 22.12+.
  • Tailwind CSS: a styling framework often used with Astro. It handles styling, not structure. See our guide to Astro and Tailwind CSS.

If you were searching “Astro vs Vite” while choosing how to build a site, these posts cover the decisions that usually come next:

FAQ

Is Vite a framework?

No. Vite is a build tool and development server. It runs your code during development and bundles it for production, but it has no routing, pages or content model of its own. Frameworks such as Astro are built on top of it.

Does Astro use Vite?

Yes. Astro has run on Vite since version 0.21 in 2021. astro dev and astro build use Vite underneath, and you can pass extra Vite settings through the vite option in the Astro config.

Which Vite version does Astro 7 use?

Astro 7 uses Vite 8, which bundles with Rolldown. Astro 6 uses Vite 7. If your project has custom Vite plugins or settings, check them against Vite’s migration guide when you upgrade.

Can I build a website with only Vite?

Yes, for a single-page app. For a multi-page website you’d have to add routing, page generation and content handling yourself. A framework such as Astro provides those, with Vite already inside.

Can I use Vite plugins in Astro?

Yes. Vite and Rollup plugins go in the vite.plugins array of the Astro config. Astro’s documentation has a recipe for installing one.

Is Vite+ a replacement for Astro?

No. Vite+ brings development, linting, formatting, testing and building together under one command. It doesn’t add pages or routing, so it doesn’t do Astro’s job.

Are Astro and Vite free?

Yes. Both are open source under the MIT licence. The costs of a site come from development time and hosting, not from either tool.

Planning an Astro site, or deciding whether a plain Vite app is enough? Tell us what you're building. Astro web development