Simple Usage

/** * 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;

/** * 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'}`,      }    }),  login: publicProcedure    // using zod schema to validate and infer input values    .input(      z.object({        name: z.string(),      })    )    .mutation(({ input }) => {      // Here some login stuff would happen      return {        user: {          name: input.name,          role: "ADMIN",        },      };    }),})// 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: () => ({}),})

import type { DehydratedState, VueQueryPluginOptions } from "@tanstack/vue-query"import { VueQueryPlugin, QueryClient, hydrate, dehydrate } from "@tanstack/vue-query"// Nuxt 3 app aliasesimport { useState } from "#app"export default defineNuxtPlugin((nuxt) => {  const vueQueryState = useState<DehydratedState | null>("vue-query")  // Modify your Vue Query global settings here  const queryClient = new QueryClient({    defaultOptions: { queries: { staleTime: 5000 } },  });  const options: VueQueryPluginOptions = { queryClient }  nuxt.vueApp.use(VueQueryPlugin, options)  if (process.server) {    nuxt.hooks.hook("app:rendered", () => {      vueQueryState.value = dehydrate(queryClient)    });  }  if (process.client) {    nuxt.hooks.hook("app:created", () => {      hydrate(queryClient, vueQueryState.value)    });  }})

import { createTRPCNuxtClient, httpBatchLink } from "trpc-nuxt/client-vue-query"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,    },  }})