mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-14 20:19:33 +01:00
docs: update usage
This commit is contained in:
@@ -5,8 +5,6 @@ description: tRPC-Nuxt provides first class integration with tRPC.
|
||||
|
||||
# Installation
|
||||
|
||||
## 1. Add to existing Nuxt project
|
||||
|
||||
::code-group
|
||||
|
||||
```bash [pnpm]
|
||||
@@ -35,16 +33,6 @@ For making typesafe API calls from your client.
|
||||
|
||||
Most examples use [Zod](https://github.com/colinhacks/zod) for input validation and tRPC.io highly recommends it, though it isn't required.
|
||||
|
||||
## 2. Install module
|
||||
|
||||
This will transpile `trpc-nuxt` and exclude `trpc-nuxt/client` from optimized dependencies by Vite.
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['trpc-nuxt/module']
|
||||
})
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
## Next Steps
|
||||
|
||||
@@ -88,15 +88,14 @@ If you need to split your router into several subrouters, you can implement them
|
||||
|
||||
## 2. Create tRPC client plugin
|
||||
|
||||
Create a set of strongly-typed composables using your API's type signature.
|
||||
Create a strongly-typed plugin using your API's type signature.
|
||||
|
||||
```ts [plugins/client.ts]
|
||||
import { httpBatchLink } from '@trpc/client'
|
||||
import { createTRPCNuxtProxyClient } from 'trpc-nuxt/client'
|
||||
import { httpBatchLink, createTRPCProxyClient } from '@trpc/client'
|
||||
import type { AppRouter } from '@/server/trpc/routers'
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
const client = createTRPCNuxtProxyClient<AppRouter>({
|
||||
const client = createTRPCProxyClient<AppRouter>({
|
||||
links: [
|
||||
httpBatchLink({
|
||||
/**
|
||||
@@ -122,19 +121,10 @@ export default defineNuxtPlugin(() => {
|
||||
<script setup lang="ts">
|
||||
const { $client } = useNuxtApp()
|
||||
|
||||
// query and mutate uses useAsyncData under the hood
|
||||
const { data, pending, error } = await $client.hello.query({ text: 'client' })
|
||||
const data = await $client.hello.query({ text: 'client' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="pending">
|
||||
Loading...
|
||||
</div>
|
||||
<div v-else-if="error?.data?.code">
|
||||
Error: {{ error.data.code }}
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>{{ hello.data?.greeting }}</p>
|
||||
</div>
|
||||
<p>{{data?.greeting }}</p>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user