Simple Usage

1. Create a tRPC router

Initialize your tRPC backend using the initTRPC function and create your first router.

server/trpc/trpc.ts
/** * This is your entry point to setup the root configuration for tRPC on the server. * - `initTRPC` should only be used once per app. * - We export only the functionality that we use so we can enforce which base procedures should be used * * Learn how to create protected base procedures and other things below: * @see https://trpc.io/docs/v10/router * @see https://trpc.io/docs/v10/procedures */import { initTRPC } from '@trpc/server'const t = initTRPC.create()/** * Unprotected procedure **/export const publicProcedure = t.procedure;export const router = t.router;export const middleware = t.middleware;
server/api/trpc/[trpc].ts
/** * This is the API-handler of your app that contains all your API routes. * On a bigger app, you will probably want to split this file up into multiple files. */import { createNuxtApiHandler } from 'trpc-nuxt'import { publicProcedure, router } from '~/server/trpc/trpc'import { z } from 'zod'export const appRouter = router({  hello: publicProcedure    // This is the input schema of your procedure    .input(      z.object({        text: z.string().nullish(),      }),    )    .query(({ input }) => {      // This is what you're returning to your client      return {        greeting: `hello ${input?.text ?? 'world'}`,      }    }),})// export only the type definition of the API// None of the actual implementation is exposed to the clientexport type AppRouter = typeof appRouter;// export API handlerexport default createNuxtApiHandler({  router: appRouter,  createContext: () => ({}),})

2. Create tRPC client plugin

Create a strongly-typed plugin using your API's type signature.

plugins/client.ts
import { createTRPCNuxtClient, httpBatchLink } from 'trpc-nuxt/client'import type { AppRouter } from '~/server/api/trpc/[trpc]'export default defineNuxtPlugin(() => {  /**   * createTRPCNuxtClient adds a `useQuery` composable   * built on top of `useAsyncData`.   */  const client = createTRPCNuxtClient<AppRouter>({    links: [      httpBatchLink({        url: '/api/trpc',      }),    ],  })  return {    provide: {      client,    },  }})

3. Make an API request

pages/index.vue
<script setup lang="ts">const { $client } = useNuxtApp()const hello = await $client.hello.useQuery({ text: 'client' })</script><template>  <div>    <p>{{ hello.data?.greeting }}</p>  </div></template>
Table of Contents