What is the Nitro Vite plugin?

The Nitro Vite plugin (nitro/vite) adds backend capabilities to a Vite 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, 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 running on Fluid compute 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.

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.

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.

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.

Because detection is automatic, deploying usually means pushing to Git or running the Vercel CLI, with no framework preset to set by hand.

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 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.

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.

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.

• Follow Vite + Nitro on Vercel to add the plugin and deploy a project.
• See Deploy a TanStack Start app to Vercel for a framework that builds on the plugin.
• Migrate your TanStack Start app from Cloudflare or Netlify to Vercel.
• Learn how Vercel Functions and Fluid compute run your server code.