trpc-nuxt/packages/docs/content/1.get-started/2.installation.md

navigation.icon

navigation.icon
uil:play-circle

Installation

1. Add tRPC-Nuxt to existing Nuxt project

::code-group

pnpm add @trpc/server@next @trpc/client@next trpc-nuxt@next zod

npm install @trpc/server@next @trpc/client@next trpc-nuxt@next zod

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

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true
  }
}

export default defineNuxtConfig({
  typescript: {
    strict: true
  }
})

::

If strict mode is too much, at least enable strictNullChecks:

::code-group

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strictNullChecks": true
  }
}

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.