mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-14 20:19:33 +01:00
90 lines
1.5 KiB
Markdown
90 lines
1.5 KiB
Markdown
---
|
|
navigation.icon: uil:play-circle
|
|
---
|
|
|
|
# Installation
|
|
|
|
## 1. Add tRPC-Nuxt to existing Nuxt project
|
|
|
|
::code-group
|
|
|
|
```bash [pnpm]
|
|
pnpm add @trpc/server@next @trpc/client@next trpc-nuxt@next zod
|
|
```
|
|
|
|
```bash [npm]
|
|
npm install @trpc/server@next @trpc/client@next trpc-nuxt@next zod
|
|
```
|
|
|
|
```bash [yarn]
|
|
yarn add @trpc/server@next @trpc/client@next trpc-nuxt@next zod
|
|
```
|
|
|
|
::
|
|
|
|
#### Why @trpc/server?
|
|
|
|
For implementing tRPC endpoints and routers.
|
|
|
|
#### Why @trpc/client?
|
|
|
|
For making typesafe API calls from your client.
|
|
|
|
#### Why zod?
|
|
|
|
Most examples use [Zod](https://github.com/colinhacks/zod) for input validation and tRPC.io highly recommends it, though it isn't required.
|
|
|
|
## 2. Enable strict mode
|
|
|
|
If you want to use Zod for input validation, make sure you have enabled strict mode:
|
|
|
|
::code-group
|
|
|
|
```json [tsconfig.json]
|
|
{
|
|
"extends": "./.nuxt/tsconfig.json",
|
|
"compilerOptions": {
|
|
"strict": true
|
|
}
|
|
}
|
|
```
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
typescript: {
|
|
strict: true
|
|
}
|
|
})
|
|
```
|
|
|
|
::
|
|
|
|
If strict mode is too much, at least enable `strictNullChecks`:
|
|
|
|
::code-group
|
|
|
|
```json [tsconfig.json]
|
|
{
|
|
"extends": "./.nuxt/tsconfig.json",
|
|
"compilerOptions": {
|
|
"strictNullChecks": true
|
|
}
|
|
}
|
|
```
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
typescript: {
|
|
tsConfig: {
|
|
strictNullChecks: true
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
::
|
|
|
|
## Next Steps
|
|
|
|
Now that you've installed the required dependencies, you are ready to start building your application.
|