fix: server storage and incorrect imports

playground/pages/index.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 const client = useClient()
-const headers = useClientHeader({ authorization: 'asdada' })
+const headers = useClientHeaders()
 const { data: todos, pending, error, refresh } = await useAsyncQuery(['getTodos'])
 
-console.log(headers.value)
-
 const addHeader = () => {
   // headers.value.cookie = 'counter=69'
   console.log(headers.value)

src/module.ts

@@ -38,7 +38,7 @@ export default defineNuxtModule<ModuleOptions>({
       imports.push(
         { name: 'useClient', from: join(runtimeDir, 'client') },
         { name: 'useAsyncQuery', from: join(runtimeDir, 'client') },
-        { name: 'useClientHeader', from: join(runtimeDir, 'client') },
+        { name: 'useClientHeaders', from: join(runtimeDir, 'client') },
       )
     })
 

src/runtime/plugin.ts

@@ -1,4 +1,5 @@
 import * as trpc from '@trpc/client'
+import { useClientHeaders } from './client'
 import { defineNuxtPlugin, useRequestHeaders, useRuntimeConfig } from '#app'
 import type { router } from '~/server/trpc'
 
@@ -7,17 +8,12 @@ declare type AppRouter = typeof router
 export default defineNuxtPlugin((nuxtApp) => {
   const config = useRuntimeConfig().public.trpc
   const headers = useRequestHeaders()
+  const otherHeaders = useClientHeaders()
   const client = trpc.createTRPCClient<AppRouter>({
     url: `${config.baseURL}${config.trpcURL}`,
     headers: () => {
-      let otherHeaders = {}
-      if (!process.server) {
-        const key = 'trpc-nuxt-header'
-        otherHeaders = JSON.parse(localStorage.getItem(key) || JSON.stringify({}))
-      }
-
       return {
-        ...otherHeaders,
+        ...unref(otherHeaders),
         ...headers,
       }
     },