install trpc

nuxt.config.ts

@@ -1,6 +1,9 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
+  build: {
+    transpile: ["trpc-nuxt"],
+  },
   css: ["~/assets/css/main.css"],
   image: {
     domains: ["www.themealdb.com"],

package.json

@@ -15,8 +15,11 @@
   "dependencies": {
     "@nuxt/eslint": "^0.3.10",
     "@nuxt/image": "^1.6.0",
+    "@trpc/client": "^10.45.2",
+    "@trpc/server": "^10.45.2",
     "nuxt": "^3.11.2",
     "nuxt-icon": "^0.6.10",
+    "trpc-nuxt": "^0.10.22",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",
     "zod": "^3.23.8"

pages/index.vue

@@ -1,9 +1,17 @@
+<script setup lang="ts">
+const { $client } = useNuxtApp();
+
+const { data } = await $client.hello.useQuery({ text: "chef" });
+</script>
+
 <template>
   <div class="hero min-h-full bg-base-200">
     <div class="hero-content flex-col lg:flex-row-reverse">
       <NuxtImg src="/chef.svg" class="max-w-sm rounded-lg shadow-2xl" />
       <div>
         <h1 class="text-5xl font-bold prose">Eat Something New</h1>
+
+        <p class="py-6 prose">{{ data?.greeting }}</p>
         <p class="py-6 prose">Generate a random recipe.</p>
         <NuxtLink to="/random" class="btn btn-primary">
           Random Recipe Now

plugins/client.ts

@@ -0,0 +1,22 @@
+import { createTRPCNuxtClient, httpBatchLink } from "trpc-nuxt/client";
+import type { AppRouter } from "~/server/trpc/routers";
+
+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,
+    },
+  };
+});

server/api/trpc/[trpc].ts

@@ -0,0 +1,9 @@
+import { createNuxtApiHandler } from "trpc-nuxt";
+import { appRouter } from "~/server/trpc/routers";
+import { createContext } from "~/server/trpc/context";
+
+// export API handler
+export default createNuxtApiHandler({
+  router: appRouter,
+  createContext,
+});

server/trpc/context.ts

@@ -0,0 +1,9 @@
+import type { inferAsyncReturnType } from "@trpc/server";
+
+/**
+ * Creates context for an incoming request
+ * @link https://trpc.io/docs/context
+ */
+export const createContext = () => ({});
+
+export type Context = inferAsyncReturnType<typeof createContext>;

server/trpc/routers/index.ts

@@ -0,0 +1,19 @@
+import { z } from "zod";
+import { publicProcedure, router } from "../trpc";
+
+export const appRouter = router({
+  hello: publicProcedure
+    .input(
+      z.object({
+        text: z.string().nullish(),
+      }),
+    )
+    .query(({ input }) => {
+      return {
+        greeting: `hello ${input?.text ?? "world"}`,
+      };
+    }),
+});
+
+// export type definition of API
+export type AppRouter = typeof appRouter;

server/trpc/trpc.ts

@@ -0,0 +1,11 @@
+import { initTRPC } from "@trpc/server";
+import type { Context } from "~/server/trpc/context";
+
+const t = initTRPC.context<Context>().create();
+
+/**
+ * Unprotected procedure
+ **/
+export const publicProcedure = t.procedure;
+export const router = t.router;
+export const middleware = t.middleware;