# Vite + tRPC
> 使用 Vite 在 Nitro 中通过 tRPC 实现端到端类型安全的 API。
```text [.gitignore]
node_modules
dist
```
```html [index.html]
tRPC Counter
```
```json [package.json]
{
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"@trpc/client": "^11.9.0",
"@trpc/server": "^11.9.0",
"nitro": "latest",
"vite": "beta",
"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,
});
},
};
```
使用 Vite 和 Nitro 设置 tRPC，实现端到端的类型安全 API，无需代码生成。此示例构建了一个计数器，初始值通过服务器端渲染，客户端进行更新。
## 概览
#### 配置 Vite，添加 Nitro 插件并路由 tRPC 请求
#### 创建带有过程的 tRPC 路由器
#### 创建带服务器端渲染及客户端交互的 HTML 页面
## 1. 配置 Vite
添加 Nitro 插件并配置 `/trpc/**` 路由指向你的 tRPC 处理程序：
```ts [vite.config.ts]
import { defineConfig } from "vite";
import { nitro } from "nitro/vite";
export default defineConfig({
plugins: [
nitro({
routes: {
"/trpc/**": "./server/trpc.ts",
},
}),
],
});
```
`routes` 选项将 URL 模式映射到处理程序文件。所有对 `/trpc/*` 的请求均由 tRPC 路由器处理。
## 2. 创建 tRPC 路由器
定义带过程的 tRPC 路由器并将其导出为 fetch 处理函数：
```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,
});
},
};
```
使用 `t.procedure.query()` 定义读取操作，使用 `t.procedure.mutation()` 定义写入操作。导出 `AppRouter` 类型，客户端可获得完整的类型推断。默认导出使用 tRPC 的 fetch 适配器来处理传入请求。
## 3. 创建 HTML 页面
创建具有服务器端渲染和客户端交互功能的 HTML 页面：
```html [index.html]
tRPC Counter
```
`