docs: update usage

This commit is contained in:
wobsoriano
2022-11-12 20:15:52 -08:00
parent 0f9653d1a4
commit 297c3d52f4
2 changed files with 5 additions and 27 deletions

View File

@@ -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

View File

@@ -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>
```