tRPC-Nuxt
End-to-end typesafe APIs with tRPC.io in Nuxt applications.
The client above is not importing any code from the server, only its type declarations.
Install
npm i trpc-nuxt
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
modules: ['trpc-nuxt'],
trpc: {
baseURL: 'http://localhost:3000', // defaults to http://localhost:3000
trpcURL: '/api/trpc', // defaults to /api/trpc
},
typescript: {
strict: true // set this to true to make input/output types work
}
})
Usage
Expose your tRPC routes under ~/server/trpc/index.ts:
// ~/server/trpc/index.ts
import type { inferAsyncReturnType } from '@trpc/server'
import * as trpc from '@trpc/server'
import { z } from 'zod' // yup/superstruct/zod/myzod/custom
export const router = trpc.router()
// queries and mutations...
.query('getUsers', {
async resolve(req) {
// use your ORM of choice
return await UserModel.all()
},
})
.mutation('createUser', {
// validate input with Zod
input: z.object({ name: z.string().min(5) }),
async resolve(req) {
// use your ORM of choice
return await UserModel.create({
data: req.input,
})
},
})
Use the client like so:
const client = useClient() // auto-imported
const users = await client.query('getUsers')
const newUser = await client.mutation('createUser', {
name: 'wagmi'
})
useAsyncQuery
A thin wrapper around useAsyncData and client.query().
The first argument is a [path, input]-tuple - if the input is optional, you can omit the, input-part.
You'll notice that you get autocompletion on the path and automatic typesafety on the input.
const {
data,
pending,
error,
refresh
} = await useAsyncQuery(['getUser', { id: 69 }], {
// pass useAsyncData options here
lazy: false
})
Options
trpc-nuxt accepts the following options exposed under ~/server/trpc/index.ts:
import * as trpc from '@trpc/server'
import type { inferAsyncReturnType } from '@trpc/server'
import type { CompatibilityEvent } 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) => {
// ...
return {
/** context data */
}
}
// Optional
// https://trpc.io/docs/caching#using-responsemeta--to-cache-responses
export const responseMeta = () => {
// ...
return {
// { headers: ... }
}
}
// Optional
// https://trpc.io/docs/error-handling#handling-errors
export const onError = (payload: OnErrorPayload<typeof router>) => {
// Do whatever here like send to bug reporting and stuff
}
Recipes
Learn more about tRPC.io here.
Recommended IDE Setup
License
MIT
If the object input is set to be required using zod, 
245 Dec 27, 2022
15 Dec 3, 2022
19 Dec 17, 2022
5 May 24, 2022
208 Dec 27, 2022
128 Jan 7, 2023
25 Dec 15, 2022
26 Dec 27, 2022
211 Dec 28, 2022
49 Dec 30, 2022
10 Dec 24, 2022
50 Dec 26, 2022
194 Jul 5, 2022
5 May 30, 2022
38 Oct 18, 2022