complete usage docs

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

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

packages/docs/content/1.get-started/3.usage.md

@@ -1,9 +1,8 @@
 ---
-title: Server
+description: tRPC-Nuxt provides first class integration with tRPC.
-description: '@nuxtjs/supabase is a Nuxt module for first class integration with Supabase.'
 ---
 
-# 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<AppRouter>({
+    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]
+<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' })
+</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>
+</template>
+```

packages/docs/content/1.get-started/4.client.md

@@ -1,6 +0,0 @@
----
-title: Client
-description: '@nuxtjs/supabase is a Nuxt module for first class integration with Supabase.'
----
-
-hello client