release v0.3.1

chore: bump nuxt to RC 12

README.md

@@ -28,7 +28,7 @@ import { defineNuxtConfig } from 'nuxt'
 export default defineNuxtConfig({
   modules: ['trpc-nuxt'],
   trpc: {
-    baseURL: 'http://localhost:3000', // defaults to http://localhost:3000
+    baseURL: '', // Set empty string (default) to make requests by relative address 
     endpoint: '/trpc', // defaults to /trpc
   },
   typescript: {
@@ -101,7 +101,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()
@@ -120,14 +120,14 @@ trpc-nuxt accepts the following options exposed under `~/server/trpc/index.ts`:
 ```ts
 import * as trpc from '@trpc/server'
 import type { inferAsyncReturnType } from '@trpc/server'
-import type { CompatibilityEvent } from 'h3'
+import type { H3Event } from 'h3'
 import type { OnErrorPayload } from 'trpc-nuxt/api'
 
 export const router = trpc.router<inferAsyncReturnType<typeof createContext>>()
 
 // Optional
 // https://trpc.io/docs/context
-export const createContext = (event: CompatibilityEvent) => {
+export const createContext = (event: H3Event) => {
   // ...
   return {
     /** context data */
@@ -159,7 +159,7 @@ export const onError = (payload: OnErrorPayload<typeof router>) => {
 - [Error Formatting](/recipes/error-formatting.md)
 - [Inference Helpers](/recipes/inference-helpers.md)
 
-Learn more about tRPC.io [here](https://trpc.io/docs).
+Learn more about tRPC.io [here](https://trpc.io/docs/v9).
 
 ## Recommended IDE Setup
 

package.json

@@ -1,8 +1,8 @@
 {
   "name": "trpc-nuxt",
   "type": "module",
-  "version": "0.2.4",
-  "packageManager": "pnpm@7.1.1",
+  "version": "0.3.1",
+  "packageManager": "pnpm@7.5.0",
   "license": "MIT",
   "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
@@ -28,33 +28,31 @@
     "build:playground": "nuxi build playground",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "release": "bumpp --commit --push --tag && pnpm publish",
+    "release": "bumpp --commit --push --tag && npm publish",
     "prepare": "nuxi prepare playground"
   },
   "dependencies": {
-    "@nuxt/kit": "3.0.0-rc.5",
-    "@trpc/client": "^9.26.0",
-    "@trpc/server": "^9.26.0",
-    "@vueuse/core": "^8.9.3",
-    "@vueuse/nuxt": "^8.9.3",
+    "@nuxt/kit": "3.0.0-rc.12",
+    "@trpc/client": "^9.27.4",
+    "@trpc/server": "^9.27.4",
     "dedent": "^0.7.0",
-    "defu": "^6.0.0",
-    "h3": "^0.7.10",
-    "pathe": "^0.3.0",
-    "ufo": "^0.8.5"
+    "defu": "^6.1.0",
+    "h3": "^0.8.5",
+    "ohash": "^0.1.5",
+    "pathe": "^0.3.9",
+    "ufo": "^0.8.6"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.23.1",
     "@antfu/ni": "^0.16.2",
-    "@nuxt/module-builder": "latest",
+    "@nuxt/module-builder": "^0.2.0",
     "@types/dedent": "^0.7.0",
     "bumpp": "^7.2.0",
-    "eslint": "^8.14.0",
-    "nuxt": "3.0.0-rc.4",
-    "ohash": "^0.1.0",
-    "pnpm": "^7.1.1",
+    "eslint": "^8.25.0",
+    "nuxt": "3.0.0-rc.12",
+    "pnpm": "^7.5.0",
     "trpc-nuxt": "workspace:*",
-    "zod": "^3.16.0"
+    "zod": "^3.19.1"
   },
   "eslintConfig": {
     "extends": "@antfu",

playground/nuxt.config.ts

@@ -1,11 +1,10 @@
-import { defineNuxtConfig } from 'nuxt'
 import Module from '../src/module'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   modules: [Module],
   runtimeConfig: {
-    baseURL: 'http://localhost:3000',
+    baseURL: '',
   },
   typescript: {
     strict: true,

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)
 }
 

playground/server/trpc/index.ts

@@ -1,7 +1,7 @@
 import * as trpc from '@trpc/server'
 import type { inferAsyncReturnType } from '@trpc/server'
 import { z } from 'zod'
-import type { CompatibilityEvent } from 'h3'
+import type { H3Event } from 'h3'
 
 const baseURL = 'https://jsonplaceholder.typicode.com'
 
@@ -37,7 +37,7 @@ export const router = trpc.router<Context>()
     },
   })
 
-export async function createContext(event: CompatibilityEvent) {
+export async function createContext(event: H3Event) {
   // Create your context based on the request object
   // Will be available as `ctx` in all your resolvers
 

recipes/authorization.md

@@ -7,11 +7,11 @@ The `createContext`-function is called for each incoming request so here you can
 ```ts
 // ~/server/trpc/index.ts
 import type { inferAsyncReturnType } from '@trpc/server'
-import type { CompatibilityEvent } from 'h3'
+import type { H3Event } from 'h3'
 import { decodeAndVerifyJwtToken } from '~/somewhere/in/your/app/utils'
 
 // The app's context - is generated for each incoming request
-export async function createContext({ req }: CompatibilityEvent) {
+export async function createContext({ req }: H3Event) {
   // Create your context based on the request object
   // Will be available as `ctx` in all your resolvers
 

src/module.ts

@@ -3,7 +3,7 @@ import { join, resolve } from 'pathe'
 import { defu } from 'defu'
 import dedent from 'dedent'
 
-import { addAutoImport, addPlugin, addServerHandler, addTemplate, defineNuxtModule } from '@nuxt/kit'
+import { addImports, addPlugin, addServerHandler, addTemplate, defineNuxtModule } from '@nuxt/kit'
 
 export interface ModuleOptions {
   baseURL: string
@@ -16,7 +16,7 @@ export default defineNuxtModule<ModuleOptions>({
     configKey: 'trpc',
   },
   defaults: {
-    baseURL: 'http://localhost:3000',
+    baseURL: '',
     endpoint: '/trpc',
   },
   async setup(options, nuxt) {
@@ -26,16 +26,13 @@ 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,
       endpoint: options.endpoint,
     })
 
-    addAutoImport([
+    addImports([
       { name: 'useClient', from: join(runtimeDir, 'client') },
       { name: 'useAsyncQuery', from: join(runtimeDir, 'client') },
       { name: 'useClientHeaders', from: join(runtimeDir, 'client') },

src/runtime/api.ts

@@ -8,13 +8,13 @@ import type {
   inferRouterError,
 } from '@trpc/server'
 import { createURL } from 'ufo'
-import type { CompatibilityEvent } from 'h3'
-import { defineEventHandler, isMethod, useBody } from 'h3'
+import type { H3Event } from 'h3'
+import { defineEventHandler, isMethod, readBody } from 'h3'
 import type { TRPCResponse } from '@trpc/server/dist/declarations/src/rpc'
 
 type MaybePromise<T> = T | Promise<T>
 
-export type CreateContextFn<TRouter extends AnyRouter> = (event: CompatibilityEvent) => MaybePromise<inferRouterContext<TRouter>>
+export type CreateContextFn<TRouter extends AnyRouter> = (event: H3Event) => MaybePromise<inferRouterContext<TRouter>>
 
 export interface ResponseMetaFnPayload<TRouter extends AnyRouter> {
   data: TRPCResponse<unknown, inferRouterError<TRouter>>[]
@@ -30,7 +30,7 @@ export interface OnErrorPayload<TRouter extends AnyRouter> {
   error: TRPCError
   type: ProcedureType | 'unknown'
   path: string | undefined
-  req: CompatibilityEvent['req']
+  req: H3Event['req']
   input: unknown
   ctx: undefined | inferRouterContext<TRouter>
 }
@@ -63,7 +63,7 @@ export function createTRPCHandler<Router extends AnyRouter>({
       req: {
         method: req.method!,
         headers: req.headers,
-        body: isMethod(event, 'GET') ? null : await useBody(event),
+        body: isMethod(event, 'GET') ? null : await readBody(event),
         query: $url.searchParams,
       },
       path: $url.pathname.substring(endpoint.length + 1),

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

@@ -1,5 +1,6 @@
 import * as trpc from '@trpc/client'
 import { unref } from 'vue'
+import { FetchError } from 'ohmyfetch'
 import { useClientHeaders } from './client'
 import { defineNuxtPlugin, useRequestHeaders, useRuntimeConfig } from '#app'
 import type { router } from '~/server/trpc'
@@ -10,17 +11,28 @@ export default defineNuxtPlugin((nuxtApp) => {
   const config = useRuntimeConfig().public.trpc
   const headers = useRequestHeaders()
   const otherHeaders = useClientHeaders()
+
+  const baseURL = process.server ? '' : config.baseURL
   const client = trpc.createTRPCClient<AppRouter>({
-    url: `${config.baseURL}${config.endpoint}`,
+    url: `${baseURL}${config.endpoint}`,
     headers: () => {
-      if (nuxtApp.ssrContext) {
-        return {
-          ...unref(otherHeaders),
-          ...headers,
-        }
+      return {
+        ...unref(otherHeaders),
+        ...headers,
       }
-      return {}
     },
+    fetch: (input, options) =>
+      globalThis.$fetch.raw(input.toString(), options)
+        .catch((e) => {
+          if (e instanceof FetchError && e.response)
+            return e.response
+
+          throw e
+        })
+        .then(response => ({
+          ...response,
+          json: () => Promise.resolve(response._data),
+        })),
   })
 
   nuxtApp.provide('client', client)