diff --git a/packages/docs/content/1.get-started/1.introduction.md b/packages/docs/content/1.get-started/1.introduction.md index efd7ab4..10f6ac5 100644 --- a/packages/docs/content/1.get-started/1.introduction.md +++ b/packages/docs/content/1.get-started/1.introduction.md @@ -1,5 +1,4 @@ --- -navigation.icon: uil:info-circle titleTemplate: '%s' description: tRPC-Nuxt provides first class integration with tRPC. --- diff --git a/packages/docs/content/1.get-started/2.installation.md b/packages/docs/content/1.get-started/2.installation.md index e62a88d..8490f08 100644 --- a/packages/docs/content/1.get-started/2.installation.md +++ b/packages/docs/content/1.get-started/2.installation.md @@ -1,5 +1,5 @@ --- -navigation.icon: uil:play-circle +description: tRPC-Nuxt provides first class integration with tRPC. --- # Installation diff --git a/packages/docs/content/1.get-started/3.server.md b/packages/docs/content/1.get-started/3.usage.md similarity index 56% rename from packages/docs/content/1.get-started/3.server.md rename to packages/docs/content/1.get-started/3.usage.md index 9d49c10..b31c70f 100644 --- a/packages/docs/content/1.get-started/3.server.md +++ b/packages/docs/content/1.get-started/3.usage.md @@ -1,9 +1,8 @@ --- -title: Server -description: '@nuxtjs/supabase is a Nuxt module for first class integration with Supabase.' +description: tRPC-Nuxt provides first class integration with tRPC. --- -# Server +# Usage ## Recommended file structure @@ -81,3 +80,60 @@ export default createNuxtApiHandler({ ``` :: + +::alert{type=info} +If you need to split your router into several subrouters, you can implement them in the `server/trpc/routers` directory and import and [merge them](https://trpc.io/docs/v10/merging-routers) to a single root `appRouter`. +:: + +## 2. Create tRPC client plugin + +Create a set of strongly-typed composables using your API's type signature. + +```ts [plugins/client.ts] +import { httpBatchLink } from '@trpc/client' +import { createTRPCNuxtProxyClient } from 'trpc-nuxt/client' +import type { AppRouter } from '~~/server/trpc/routers' + +export default defineNuxtPlugin(() => { + const client = createTRPCNuxtProxyClient({ + links: [ + httpBatchLink({ + /** + * If you want to use SSR, you need to use the server's full URL + * @link https://trpc.io/docs/ssr + **/ + url: 'http://localhost:3000/api/trpc', + }), + ], + }) + + return { + provide: { + client, + }, + } +}) +``` + +## 3. Make API requests + +```vue [pages/index.vue] + + + +``` diff --git a/packages/docs/content/1.get-started/4.client.md b/packages/docs/content/1.get-started/4.client.md deleted file mode 100644 index e5c004f..0000000 --- a/packages/docs/content/1.get-started/4.client.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Client -description: '@nuxtjs/supabase is a Nuxt module for first class integration with Supabase.' ---- - -hello client