Nuxt.js Adapter

Nuxt.js integration.

Server

// server/routes/rpc/[...].ts
import { RPCHandler } from '@orpc/server/fetch'
import { onError } from '@orpc/server'

const handler = new RPCHandler(router, {
  interceptors: [onError(e => console.error(e))],
})

export default defineEventHandler(async (event) => {
  const request = toWebRequest(event)
  const { response } = await handler.handle(request, {
    prefix: '/rpc',
    context: {},
  })

  if (response) return response

  setResponseStatus(event, 404, 'Not Found')
  return 'Not found'
})

// server/routes/rpc/index.ts
export { default } from './[...]'

Client

Set up in a Nuxt Plugin for SSR compatibility:

// app/plugins/orpc.ts
export default defineNuxtPlugin(() => {
  const event = useRequestEvent()

  const link = new RPCLink({
    url: `${typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000'}/rpc`,
    headers: event?.headers,
  })

  const client: RouterClient<typeof router> = createORPCClient(link)

  return { provide: { client } }
})

Optimize SSR

// app/plugins/orpc.client.ts
export default defineNuxtPlugin(() => {
  const link = new RPCLink({
    url: `${window.location.origin}/rpc`,
    headers: () => ({}),
  })

  const client: RouterClient<typeof router> = createORPCClient(link)

  return { provide: { client } }
})

// app/plugins/orpc.server.ts
export default defineNuxtPlugin((nuxt) => {
  const event = useRequestEvent()

  const client = createRouterClient(router, {
    context: { headers: event?.headers },
  })

  return { provide: { client } }
})