update example

playground/pages/cookie.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const counter = useCookie('counter')
-counter.value = counter.value || Math.round(Math.random() * 1000)
-</script>
-
-<template>
-  <div>
-    <h1> Counter: {{ counter || '-' }}</h1>
-    <button @click="counter = null">
-      reset
-    </button>
-    <button @click="counter--">
-      -
-    </button>
-    <button @click="counter++">
-      +
-    </button>
-  </div>
-</template>

playground/pages/index.vue

@@ -25,11 +25,8 @@ const addTodo = async () => {
     console.log(e)
   }
 }
-// console.log($client)
-const { data: todos, pending, error } = await $client.todo.getTodo.query(2, {
-  // immediate: false,
-  pick: ['completed'],
-})
+
+const { data: todos, pending, error, refresh } = await $client.getTodos.query()
 </script>
 
 <template>
@@ -40,26 +37,20 @@ const { data: todos, pending, error } = await $client.todo.getTodo.query(2, {
     <div v-else-if="error?.data?.code">
       Error: {{ error.data.code }}
     </div>
-    <!-- <div v-if="todos && todos.length > 0">
+    <div v-else>
       <ul>
-        <li v-for="t in todos.slice(0, 10)" :key="t.id">
+        <li v-for="t in todos?.slice(0, 10)" :key="t.id">
           <NuxtLink :class="{ completed: t.completed }" :to="`/todo/${t.id}`">
             Title: {{ t.title }}
           </NuxtLink>
         </li>
-      </ul> -->
-    <button @click="addTodo">
-      Add Todo
-    </button>
-    <!-- <button @click="() => refresh()">
+      </ul>
+      <button @click="addTodo">
+        Add Todo
+      </button>
+      <button @click="() => refresh()">
         Refresh
       </button>
-      <button @click="addHeader">
-        Add header
-      </button> -->
-    <!-- </div> -->
-    <div v-if="todos">
-      {{ JSON.stringify(todos) }}
     </div>
   </div>
 </template>

playground/pages/todo/[id].vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const route = useRoute()
-const { data: todo, pending, error } = await useAsyncQuery(['getTodo', Number(route.params.id)])
+const { $client } = useNuxtApp()
+const { data: todo, pending, error } = await $client.todo.getTodo.query(Number(route.params.id))
 </script>
 
 <template>
@@ -11,8 +12,8 @@ const { data: todo, pending, error } = await useAsyncQuery(['getTodo', Number(ro
     {{ error.data.code }}
   </div>
   <div v-else>
-    ID: {{ todo.id }} <br>
-    Title: {{ todo.title }} <br>
-    Completed: {{ todo.completed }}
+    ID: {{ todo?.id }} <br>
+    Title: {{ todo?.title }} <br>
+    Completed: {{ todo?.completed }}
   </div>
 </template>

playground/plugins/trpc-client.ts

@@ -1,8 +1,9 @@
 import { httpBatchLink } from '@trpc/client'
 import { createTRPCNuxtProxyClient } from 'trpc-nuxt/client'
+import type { AppRouter } from '~~/server/trpc'
 
 export default defineNuxtPlugin(() => {
-  const client = createTRPCNuxtProxyClient({
+  const client = createTRPCNuxtProxyClient<AppRouter>({
     links: [
       httpBatchLink({
         url: 'http://localhost:3000/trpc',