fix: client auto-imports

.nuxtrc

@@ -0,0 +1,2 @@
+imports.autoImport=false
+typescript.includeWorkspace=true

package.json

@@ -21,10 +21,11 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepublishOnly": "pnpm build",
     "build": "nuxt-module-build",
-    "play": "pnpm build && nuxi dev playground",
-    "build:playground": "nuxi build playground",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:preview": "nuxi preview playground",
+    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "release": "bumpp --commit --push --tag && npm publish",
@@ -52,7 +53,6 @@
     "bumpp": "^8.2.1",
     "eslint": "^8.25.0",
     "nuxt": "3.0.0",
-    "trpc-nuxt": "workspace:*",
     "zod": "^3.20.2"
   },
   "eslintConfig": {

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>

pnpm-lock.yaml

@@ -18,7 +18,6 @@ importers:
       nuxt: 3.0.0
       ohash: ^1.0.0
       pathe: ^1.0.0
-      trpc-nuxt: workspace:*
       ufo: ^1.0.1
       zod: ^3.20.2
     dependencies:
@@ -38,7 +37,6 @@ importers:
       bumpp: 8.2.1
       eslint: 8.26.0
       nuxt: 3.0.0_eslint@8.26.0
-      trpc-nuxt: 'link:'
       zod: 3.20.2
 
   playground:

src/module.ts

@@ -27,7 +27,7 @@ export default defineNuxtModule<ModuleOptions>({
     const logger = useLogger(metaName)
 
     const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
-    nuxt.options.build.transpile.push(runtimeDir, '#build/trpc-handler')
+    nuxt.options.build.transpile.push(runtimeDir)
 
     const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
     const trpcOptionsPath = join(nuxt.options.srcDir, 'server/trpc')
@@ -49,7 +49,7 @@ export default defineNuxtModule<ModuleOptions>({
       write: true,
       getContents() {
         return dedent`
-          import { createTRPCHandler } from 'trpc-nuxt/api'
+          import { createTRPCHandler } from ${JSON.stringify(join(runtimeDir, 'api'))}
           import * as functions from '${trpcOptionsPath}'
     
           export default createTRPCHandler({