fix: client auto-imports

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useClient, useClientHeaders, useAsyncQuery } from '#imports'
 const client = useClient()
 const headers = useClientHeaders()
 const { data: todos, pending, error, refresh } = await useAsyncQuery(['getTodos'])

playground/pages/todo/[id].vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useRoute, useAsyncQuery } from '#imports'
 const route = useRoute()
 const { data: todo, pending, error } = await useAsyncQuery(['getTodo', Number(route.params.id)])
 </script>
@@ -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>