fix: unresolvable runtime config

playground/pages/index.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-const client = useClient()
+const { $client } = useNuxtApp()
 const { data: todos, pending, error, refresh } = await useAsyncQuery(['getTodos'])
 
 const addTodo = async () => {
   const title = Math.random().toString(36).slice(2, 7)
 
   try {
-    const result = await client.mutation('addTodo', {
+    const result = await $client.mutation('addTodo', {
       id: Date.now(),
       userId: 69,
       title,

playground/server/trpc/index.ts

@@ -42,8 +42,8 @@ export async function createContext(event: CompatibilityEvent) {
   // Will be available as `ctx` in all your resolvers
 
   // This is just an example of something you'd might want to do in your ctx fn
-  // const x = useCookies(event)
-  console.log('Headers', event.req.headers)
+  const x = useCookies(event)
+  console.log(x)
 
   return {
 

src/runtime/plugin.ts

@@ -3,15 +3,15 @@ import * as trpc from '@trpc/client'
 import { defineNuxtPlugin, useRequestHeaders, useRuntimeConfig } from '#app'
 import type { router } from '~/server/trpc'
 
-type AppRouter = typeof router
-
-const config = useRuntimeConfig().public.trpc
-const client = trpc.createTRPCClient<AppRouter>({
-  url: `${config.baseURL}${config.trpcURL}`,
-  headers: useRequestHeaders(),
-})
+declare type AppRouter = typeof router
 
 export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig().public.trpc
+  const client = trpc.createTRPCClient<AppRouter>({
+    url: `${config.baseURL}${config.trpcURL}`,
+    headers: useRequestHeaders(),
+  })
+
   return {
     provide: {
       client,