update readme

README.md

@@ -16,12 +16,15 @@ import { defineNuxtConfig } from 'nuxt'
 
 export default defineNuxtConfig({
   modules: ['trpc-nuxt'],
+  typescript: {
+    strict: true // set this to true to infer input/output types
+  }
 })
 ```
 
 ## Usage
 
-Expose your tRPC [routes](https://trpc.io/docs/router) and [context](https://trpc.io/docs/context) under `~/server/trpc/index.ts`:
+Expose your tRPC [routes](https://trpc.io/docs/router) under `~/server/trpc/index.ts`:
 
 ```ts
 // ~/server/trpc/index.ts
@@ -41,22 +44,6 @@ export const router = trpc
       }
     },
   })
-
-// Optional
-export const createContext = (event: CompatibilityEvent) => {
-  // ...
-  return {
-    /** context data */
-  }
-}
-
-// Optional
-export const responseMeta = () => {
-  // ...
-  return {
-    // { headers: ... }
-  }
-}
 ```
 
 Use the client like so:

playground/app.vue

@@ -1,18 +1,28 @@
 <script setup lang="ts">
 const client = useClient()
-const { data, error } = await useAsyncData('getUser', () => client.query('getUser', {
-  username: 'asd',
-}), {
+const { data, refresh } = await useAsyncData('getUser', () => client.query('getUsers'), {
   server: true,
 })
 
-watchEffect(() => {
-  console.log(process.server, error.value)
-})
+const addUser = async (username: string) => {
+  try {
+    await client.mutation('createUser', {
+      username,
+    })
+    refresh()
+    console.log('user added')
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
 </script>
 
 <template>
   <div>
-    {{ error }}
+    {{ data }}
   </div>
+  <button @click="addUser('marksx')">
+    add
+  </button>
 </template>

playground/nuxt.config.ts

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

playground/plugins/trpc.ts

@@ -0,0 +1,17 @@
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  // if (process.server) {
+  //   nuxtApp.hooks.hook('app:rendered', () => {
+  //     nuxtApp.ssrContext['']
+  //   })
+  // }
+
+  // if (process.client) {
+  //   nuxtApp.hooks.hook('app:created', () => {
+  //     console.log('app:created')
+  //   })
+  // }
+  if (nuxtApp.ssrContext)
+    console.log('hello', nuxtApp.ssrContext)
+})

playground/server/trpc/index.ts

@@ -1,21 +1,45 @@
 // ~/server/trpc/index.ts
 import { z } from 'zod'
 import * as trpc from '@trpc/server'
+import type { inferAsyncReturnType } from '@trpc/server'
 
 const fakeUsers = [
-  { id: 1, username: 'jcena', name: 'John Cena' },
-  { id: 2, username: 'dbatista', name: 'Dave Batista' },
-  { id: 3, username: 'jbiden', name: 'Joe Biden' },
+  { id: 1, username: 'jcena' },
+  { id: 2, username: 'dbatista' },
+  { id: 3, username: 'jbiden' },
 ]
 
 export const router = trpc
-  .router()
+  .router<inferAsyncReturnType<typeof createContext>>()
+  .query('getUsers', {
+    resolve() {
+      return fakeUsers
+    },
+  })
   .query('getUser', {
     // validate input with Zod
     input: z.object({
       username: z.string().min(5),
     }),
     resolve(req) {
-      return fakeUsers.find(i => i.username === req.input.username)
+      return fakeUsers.find(i => i.username === req.input.username) ?? null
     },
   })
+  .mutation('createUser', {
+    input: z.object({ username: z.string().min(5) }),
+    resolve(req) {
+      const newUser = {
+        id: fakeUsers.length + 1,
+        username: req.input.username,
+      }
+      fakeUsers.push(newUser)
+      return newUser
+    },
+  })
+
+export const createContext = () => {
+  // ...
+  return {
+    /** context data */
+  }
+}

src/module.ts

@@ -3,20 +3,26 @@ import { dirname, join } from 'pathe'
 import { addServerHandler, defineNuxtModule } from '@nuxt/kit'
 import fs from 'fs-extra'
 
-export interface ModuleOptions {}
+export interface ModuleOptions {
+  baseURL: string
+  trpcURL: string
+}
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
     name: 'trpc-nuxt',
     configKey: 'trpc',
   },
-  defaults: {},
-  async setup(_options, nuxt) {
+  defaults: {
+    baseURL: 'http://localhost:3000',
+    trpcURL: '/api/trpc',
+  },
+  async setup(options, nuxt) {
     const clientPath = join(nuxt.options.buildDir, 'trpc-client.ts')
     const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
 
     addServerHandler({
-      route: '/trpc/*',
+      route: `${options.trpcURL}/*`,
       handler: handlerPath,
     })
 
@@ -33,7 +39,7 @@ export default defineNuxtModule<ModuleOptions>({
       import type { router } from '~/server/trpc'
 
       const client = trpc.createTRPCClient<typeof router>({
-        url: process.browser ? '/trpc' : 'http://localhost:3000/trpc',
+        url: '${options.baseURL}${options.trpcURL}',
       })
     
       const useClient = () => client
@@ -47,7 +53,10 @@ export default defineNuxtModule<ModuleOptions>({
       import { createTRPCHandler } from 'trpc-nuxt/api'
       import * as functions from '~/server/trpc'
 
-      export default createTRPCHandler(functions)
+      export default createTRPCHandler({
+        router: functions.router,
+        ...functions
+      })
     `)
   },
 })

src/runtime/api.ts

@@ -48,7 +48,7 @@ export function createTRPCHandler<Router extends AnyRouter>({
   responseMeta?: ResponseMetaFn<Router>
   onError?: OnErrorFn<Router>
 }) {
-  const url = '/trpc'
+  const url = '/api/trpc'
 
   return defineEventHandler(async (event) => {
     const {