# What is the Nitro Vite plugin? **Author:** Ben Sabic --- The Nitro Vite plugin (`nitro/vite`) adds backend capabilities to a [Vite](https://vite.dev/) app, including server-side rendering (SSR), file-based API routes, and server middleware, and builds a portable server you can deploy anywhere. It ships with Nitro, the universal server toolkit that also powers [Nuxt](https://nuxt.com/), so you install a single package and register a single plugin in your Vite config. Projects on Vercel that use the plugin are detected automatically, and their server routes become [Vercel Functions](https://vercel.com/docs/functions) running on [Fluid compute](https://vercel.com/fluid) by default, with no extra build configuration. By the end, you'll understand how the plugin constructs both your client and server during a single Vite build, what it introduces to a frontend-only Vite application, and the typical behaviour of a project using it after deployment to Vercel. You'll also learn how the first-party plugin differs from similar alternatives, how it integrates with TanStack Start, and in which scenarios it is the ideal choice for your project. ## How the Nitro Vite plugin works The plugin runs Nitro's server engine as part of your Vite build, instead of as a separate process. It hooks into Vite's Environment API, which lets a single `vite build` compile several targets in sequence. Vite first builds your client and SSR environments, then the plugin builds the Nitro server bundle that ties them together. During development, your server and client share a single Vite dev server, so server code receives hot module replacement (HMR) alongside your frontend. In production, the build runs through Rolldown, the bundler behind Vite 8. Nitro emits an optimized, portable server to the `.output/` directory. The same build runs on any supported platform using Nitro's presets, so you aren't locked into a single host. To enable this, install the `nitro` package and add the plugin to your Vite config: `import { defineConfig } from 'vite'; import { nitro } from 'nitro/vite'; export default defineConfig({ plugins: [nitro()], });` That single plugin registration is enough for Nitro to discover your server routes and produce a deployable build. ## What the plugin adds to a Vite app The plugin gives a frontend-only Vite project the server features it would otherwise require a separate backend to provide. The main additions are: - **Server-side rendering**: Render the complete page on the server, then hydrate on the client, so agents and first-time visitors get content right away. Setup depends on your UI framework; Nitro supports React, Vue, Preact, Solid, and plain HTML. - **File-based API routes**: Place a file in the `api/` or `routes/` directory to create an endpoint. Dynamic segments use brackets like `[id]`, and per-method files like `users.post.ts` map to specific HTTP methods. - **Server middleware and route rules**: Run logic before a request reaches a handler, and configure caching, headers, and revalidation per route. - **Deploy-anywhere builds**: Ship the same codebase to different hosts through Nitro presets, with no host-specific rewrites. The simplest API route returns a response from a single handler: `import { defineHandler } from 'nitro/h3'; export default defineHandler(() => 'Hello from the server!');` Saved as `api/hello.ts`, this file creates a `GET /api/hello` endpoint. ## How apps that use the plugin run on Vercel On Vercel, a Vite + Nitro app deploys with zero configuration. Vercel detects the framework, fills in the build command and output directory, and turns your server routes into Vercel Functions. Those functions run on Fluid compute by default, so they scale to zero when idle, scale up with traffic, and bill only for the CPU time they actively use. Beyond hosting the server, the plugin connects to several Vercel features: - **Incremental Static Regeneration (ISR)**: In `nitro.config.ts`, add an `isr` route rule to cache pages and refresh them on a schedule or on demand. - **Environment variables**: Prefix a variable with `NITRO_` to expose it to server code through `useRuntimeConfig()`. Separately, Vercel injects its own system environment variables, which your server code can read directly. - **Observability**: Inspect function invocations in the [Vercel dashboard](https://vercel.com/d?to=%2F%5Bteam%5D%2F~%2Fobservability). Because detection is automatic, deploying usually means pushing to Git or running the Vercel CLI, with no framework preset to set by hand. ## Using the plugin with TanStack Start on Vercel TanStack Start uses the Nitro Vite plugin as its build tool. It's a full-stack framework built on TanStack Router for React and Solid, with support for full-document SSR, streaming, and server functions, and it relies on Nitro to compile your app for the server. On Vercel, that server output runs as Vercel Functions, so a TanStack Start app scales the same way as any other Vite + Nitro project. In a TanStack Start project, add the `nitro()` plugin to your Vite config alongside the TanStack Start and React plugins: `import { tanstackStart } from '@tanstack/react-start/plugin/vite'; import { defineConfig } from 'vite'; import viteReact from '@vitejs/plugin-react'; import { nitro } from 'nitro/vite'; export default defineConfig({ plugins: [tanstackStart(), nitro(), viteReact()], });` Vercel detects both TanStack Start and Nitro automatically, so you can deploy from Git or the [Vercel CLI](https://vercel.com/docs/cli) without setting a build command or output directory, and your server functions run on Fluid compute by default. If you're updating an older project, TanStack Start now uses the first-party `nitro/vite` plugin in place of the earlier `@tanstack/nitro-v2-vite-plugin`. For step-by-step setup, including environment variables and framework detection in a monorepo, see [Deploy a TanStack Start app to Vercel](https://vercel.com/kb/guide/deploy-a-tanstack-start-app-to-vercel). ## Which Nitro Vite plugin should you use? Use the first-party plugin that ships inside Nitro v3, imported as `nitro/vite` from the `nitro` package. The name can be confusing because a few similarly named plugins also exist, including `@analogjs/vite-plugin-nitro` (from AnalogJS) and `@tanstack/nitro-v2-vite-plugin` which wrap earlier Nitro versions. Newer framework guidance points to `nitro/vite` instead. ## When to use the Nitro Vite plugin Use the plugin when working with a Vite app or starting one, especially if you need server features without switching to a heavier framework. It's ideal for adding SSR or API routes on top of React, Vue, Solid, or Preact, or for maintaining a single codebase that can deploy across multiple platforms. It's a weaker fit if an opinionated framework already covers your needs. If you want built-in routing, data fetching, and conventions out of the box, Next.js or Nuxt may serve you better. Nuxt itself runs on Nitro underneath. ## Related resources and next steps - Follow [Vite + Nitro on Vercel](https://vercel.com/docs/frameworks/full-stack/vite-with-nitro) to add the plugin and deploy a project. - See [Deploy a TanStack Start app to Vercel](https://vercel.com/kb/guide/deploy-a-tanstack-start-app-to-vercel) for a framework that builds on the plugin. - Migrate your TanStack Start app from [Cloudflare](https://vercel.com/kb/guide/migrate-a-tanstack-start-app-from-cloudflare-to-vercel) or [Netlify](https://vercel.com/kb/guide/migrate-a-tanstack-start-app-from-netlify-to-vercel) to Vercel. - Learn how [Vercel Functions](https://vercel.com/docs/functions) and [Fluid compute](https://vercel.com/docs/fluid-compute) run your server code. --- [View full KB sitemap](/kb/sitemap.md)