---
title: Simple Usage
description: tRPC-Nuxt provides first class integration with tRPC.
---

# Simple Usage

## 1. Create a tRPC router

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

::code-group

```ts [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;
```

```ts [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 client
export type AppRouter = typeof appRouter;

// export API handler
export default createNuxtApiHandler({
  router: appRouter,
  createContext: () => ({}),
})
```

::

## 2. Create tRPC client plugin

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

```ts [plugins/client.ts]
import { httpBatchLink } from '@trpc/client'
import { createTRPCNuxtClient } from 'trpc-nuxt/client'
import type { AppRouter } from '~/server/trpc/routers'
import { FetchError } from 'ofetch'

export default defineNuxtPlugin(() => {
  /**
   * createTRPCNuxtClient adds a `useQuery` composable
   * built on top of `useAsyncData`.
   */
  const client = createTRPCNuxtClient<AppRouter>({
    links: [
      httpBatchLink({
        url: '/api/trpc',
        
        
        /**
         * Replace regular `fetch` with a `$fetch` from nuxt
         *
         * During server-side rendering, calling $fetch to fetch your internal API routes
         * will directly call the relevant function (emulating the request),
         * saving an additional API call.
         *
         * @see https://nuxt.com/docs/api/utils/dollarfetch
         */
        fetch: (input, options) =>
          globalThis.$fetch.raw(input.toString(), options)
            .catch((e) => {
              if (e instanceof FetchError && e.response)
                return e.response

              throw e
            })
            .then(response => ({
              ...response,
              json: () => Promise.resolve(response._data),
            })),
            
      }),
    ],
  })

  return {
    provide: {
      client,
    },
  }
})
```

## 3. Make an API request

```vue [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>
```