release v0.2.7

Fix useClientHeaders

README.md

@@ -103,7 +103,7 @@ const {
 
 ## useClientHeaders
 
-A composable that lets you add additional properties to pass to the tRPC Client. It uses `useStorage` from [@vueuse/core](https://vueuse.org/core/usestorage).
+A composable that lets you add additional properties to pass to the tRPC Client. It uses `useState` from [nuxt 3](https://v3.nuxtjs.org/api/composables/use-state).
 
 ```ts
 const headers = useClientHeaders()

package.json

@@ -1,7 +1,7 @@
 {
   "name": "trpc-nuxt",
   "type": "module",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "packageManager": "pnpm@7.5.0",
   "license": "MIT",
   "main": "./dist/module.cjs",
@@ -35,8 +35,6 @@
     "@nuxt/kit": "3.0.0-rc.8",
     "@trpc/client": "^9.27.1",
     "@trpc/server": "^9.27.1",
-    "@vueuse/core": "^9.1.0",
-    "@vueuse/nuxt": "^9.1.0",
     "dedent": "^0.7.0",
     "defu": "^6.0.0",
     "h3": "^0.7.10",

playground/pages/index.vue

@@ -4,7 +4,7 @@ const headers = useClientHeaders()
 const { data: todos, pending, error, refresh } = await useAsyncQuery(['getTodos'])
 
 const addHeader = () => {
-  // headers.value.cookie = 'counter=69'
+  headers.value.authorization = 'Bearer abcdefghijklmnop'
   console.log(headers.value)
 }
 

pnpm-lock.yaml

@@ -11,8 +11,6 @@ importers:
       '@trpc/client': ^9.27.1
       '@trpc/server': ^9.27.1
       '@types/dedent': ^0.7.0
-      '@vueuse/core': ^9.1.0
-      '@vueuse/nuxt': ^9.1.0
       bumpp: ^7.2.0
       dedent: ^0.7.0
       defu: ^6.0.0
@@ -29,8 +27,6 @@ importers:
       '@nuxt/kit': 3.0.0-rc.8
       '@trpc/client': 9.27.1_@trpc+server@9.27.1
       '@trpc/server': 9.27.1
-      '@vueuse/core': 9.1.0
-      '@vueuse/nuxt': 9.1.0
       dedent: 0.7.0
       defu: 6.0.0
       h3: 0.7.10
@@ -1039,10 +1035,6 @@ packages:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: true
 
-  /@types/web-bluetooth/0.0.15:
-    resolution: {integrity: sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA==}
-    dev: false
-
   /@typescript-eslint/eslint-plugin/5.30.6_rywvbqnelbznwddhxv2glfjuay:
     resolution: {integrity: sha512-J4zYMIhgrx4MgnZrSDD7sEnQp7FmhKNOaqaOpaoQ/SfdMfRB/0yvK74hTnvH+VQxndZynqs5/Hn4t+2/j9bADg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1321,18 +1313,6 @@ packages:
     resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}
     dev: true
 
-  /@vueuse/core/9.1.0:
-    resolution: {integrity: sha512-BIroqvXEqt826aE9r3K5cox1zobuPuAzdYJ36kouC2TVhlXvFKIILgFVWrpp9HZPwB3aLzasmG3K87q7TSyXZg==}
-    dependencies:
-      '@types/web-bluetooth': 0.0.15
-      '@vueuse/metadata': 9.1.0
-      '@vueuse/shared': 9.1.0
-      vue-demi: 0.13.7
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: false
-
   /@vueuse/head/0.7.9_vue@3.2.37:
     resolution: {integrity: sha512-5wnRiH2XIUSLLXJDLDDTcpvAg5QXgTIVZl46AU7to/T91KHsdBLHSE4WhRO7kP0jbkAhlxnx64E29cQtwBrMjg==}
     peerDependencies:
@@ -1341,37 +1321,6 @@ packages:
       vue: 3.2.37
     dev: true
 
-  /@vueuse/metadata/9.1.0:
-    resolution: {integrity: sha512-8OEhlog1iaAGTD3LICZ8oBGQdYeMwByvXetOtAOZCJOzyCRSwqwdggTsmVZZ1rkgYIEqgUBk942AsAPwM21s6A==}
-    dev: false
-
-  /@vueuse/nuxt/9.1.0:
-    resolution: {integrity: sha512-ejWjv8IPo2sSCQ81lY5TtzszWvnqRUYsBTrK0XOJGMDIeUHc6/gQbwezyb9OY3yJvIvQ3sGBbLo1iW04Rk7ZhA==}
-    dependencies:
-      '@nuxt/kit': 3.0.0-rc.8
-      '@vueuse/core': 9.1.0
-      '@vueuse/metadata': 9.1.0
-      local-pkg: 0.4.2
-      vue-demi: 0.13.7
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - esbuild
-      - rollup
-      - supports-color
-      - vite
-      - vue
-      - webpack
-    dev: false
-
-  /@vueuse/shared/9.1.0:
-    resolution: {integrity: sha512-pB/3njQu4tfJJ78ajELNda0yMG6lKfpToQW7Soe09CprF1k3QuyoNi1tBNvo75wBDJWD+LOnr+c4B5HZ39jY/Q==}
-    dependencies:
-      vue-demi: 0.13.7
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: false
-
   /abbrev/1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
     dev: true
@@ -6689,19 +6638,6 @@ packages:
       ufo: 0.8.5
     dev: true
 
-  /vue-demi/0.13.7:
-    resolution: {integrity: sha512-hbhlvpx1gFW3TB5HxJ0mNxyA9Jh5iQt409taOs6zkhpvfJ7YzLs1rsLufJmDsjH5PI1cOyfikY1fE/meyHfU5A==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dev: false
-
   /vue-eslint-parser/8.3.0_eslint@8.19.0:
     resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}

src/module.ts

@@ -26,9 +26,6 @@ export default defineNuxtModule<ModuleOptions>({
     const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
     const trpcOptionsPath = join(nuxt.options.srcDir, 'server/trpc')
 
-    // Add vueuse
-    nuxt.options.modules.push('@vueuse/nuxt')
-
     // Final resolved configuration
     const finalConfig = nuxt.options.runtimeConfig.public.trpc = defu(nuxt.options.runtimeConfig.public.trpc, {
       baseURL: options.baseURL,

src/runtime/client.ts

@@ -9,7 +9,6 @@ import type { ProcedureRecord, inferHandlerInput, inferProcedureInput, inferProc
 import type { TRPCClient, TRPCClientErrorLike } from '@trpc/client'
 import { objectHash } from 'ohash'
 import type { Ref } from 'vue'
-import { useStorage } from '@vueuse/core'
 import { useAsyncData, useNuxtApp, useState } from '#app'
 import type { router } from '~/server/trpc'
 
@@ -79,5 +78,5 @@ export function useClient(): TRPCClient<AppRouter> {
 }
 
 export function useClientHeaders(initialValue: MaybeRef<Record<string, any>> = {}): Ref<Record<string, any>> {
-  return useStorage('trpc-nuxt-header', initialValue)
+  return useState('trpc-nuxt-header', () => initialValue)
 }

src/runtime/plugin.ts

@@ -13,13 +13,10 @@ export default defineNuxtPlugin((nuxtApp) => {
   const client = trpc.createTRPCClient<AppRouter>({
     url: `${config.baseURL}${config.endpoint}`,
     headers: () => {
-      if (nuxtApp.ssrContext) {
+      return {
-        return {
+        ...unref(otherHeaders),
-          ...unref(otherHeaders),
+        ...headers,
-          ...headers,
-        }
       }
-      return {}
     },
   })