Basic integration ok

src/server/lib/hello.ts

@@ -1,4 +1,4 @@
 export function hello(name: string) {
-  console.log(`hello ${name}`)
-  return { message: `hello ${name}` }
+  console.log(`Hello ${name}!`)
+  return { message: `Hello ${name}!` }
 }

src/server/trpc.ts

@@ -15,6 +15,7 @@ export const t = initTRPC.context<Context>().create()
 
 export const appRouter = t.router({
   hello: t.procedure.input(z.string()).query(({ input }) => {
+    if (input === 'test') throw new Error('Test error')
     return hello(input)
   })
 })

src/web/App.vue

@@ -1,22 +1,29 @@
 <template>
   <v-app>
-    <v-main> {{ message }}</v-main>
+    <v-main>
+      {{ message }}
+      <v-btn @click="fetchHello('Doug')">Doug</v-btn>
+      <v-btn @click="fetchHello('test')">test</v-btn>
+    </v-main>
   </v-app>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { trpc } from './trpc'
 
+import { TRPCClientError } from '@trpc/client'
+
 const message = ref('Hello World!')
 
-onMounted(async () => {
-  console.log('Hello')
+async function fetchHello(name: string) {
   try {
-    const res = await trpc.hello.query('Doug')
-    message.value = res.message
-  } catch (err: any) {
-    console.log(err)
+    message.value = (await trpc.hello.query(name)).message
+  } catch (error: any) {
+    if (error instanceof TRPCClientError) {
+      console.dir(error)
+      message.value = error.message
+    }
+  }
 }
-})
 </script>