# Vite + tRPC
> End-to-end typesafe APIs with tRPC in Nitro using Vite.
```html [index.html]
tRPC Counter
```
```json [package.json]
{
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"@trpc/client": "^11.16.0",
"@trpc/server": "^11.16.0",
"nitro": "latest",
"vite": "latest",
"zod": "^4.3.6"
}
}
```
```json [tsconfig.json]
{
"extends": "nitro/tsconfig",
"compilerOptions": {}
}
```
```ts [vite.config.ts]
import { defineConfig } from "vite";
import { nitro } from "nitro/vite";
export default defineConfig({
plugins: [
nitro({
routes: {
"/trpc/**": "./server/trpc.ts",
},
}),
],
});
```
```ts [server/trpc.ts]
import { initTRPC } from "@trpc/server";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
let counter = 0;
const t = initTRPC.create();
export const appRouter = t.router({
get: t.procedure.query(() => {
return { value: counter };
}),
inc: t.procedure.mutation(() => {
counter++;
return { value: counter };
}),
});
export type AppRouter = typeof appRouter;
export default {
async fetch(request: Request): Promise {
return fetchRequestHandler({
endpoint: "/trpc",
req: request,
router: appRouter,
});
},
};
```
Set up tRPC with Vite and Nitro for end-to-end typesafe APIs without code generation. This example builds a counter with server-side rendering for the initial value and client-side updates.
## Overview
1. Configure Vite with the Nitro plugin and route tRPC requests
2. Create a tRPC router with procedures
3. Create an HTML page with server-side rendering and client interactivity
## 1. Configure Vite
Add the Nitro plugin and configure the `/trpc/**` route to point to your tRPC handler:
```ts [vite.config.ts]
import { defineConfig } from "vite";
import { nitro } from "nitro/vite";
export default defineConfig({
plugins: [
nitro({
routes: {
"/trpc/**": "./server/trpc.ts",
},
}),
],
});
```
The `routes` option maps URL patterns to handler files. All requests to `/trpc/*` are handled by the tRPC router.
## 2. Create the tRPC Router
Define your tRPC router with procedures and export it as a fetch handler:
```ts [server/trpc.ts]
import { initTRPC } from "@trpc/server";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
let counter = 0;
const t = initTRPC.create();
export const appRouter = t.router({
get: t.procedure.query(() => {
return { value: counter };
}),
inc: t.procedure.mutation(() => {
counter++;
return { value: counter };
}),
});
export type AppRouter = typeof appRouter;
export default {
async fetch(request: Request): Promise {
return fetchRequestHandler({
endpoint: "/trpc",
req: request,
router: appRouter,
});
},
};
```
Define procedures using `t.procedure.query()` for read operations and `t.procedure.mutation()` for write operations. Export the `AppRouter` type so clients get full type inference. The default export uses tRPC's fetch adapter to handle incoming requests.
## 3. Create the HTML Page
Create an HTML page with server-side rendering and client-side interactivity:
```html [index.html]
tRPC Counter
```
The `