{"generatedAt":1667202156150,"generateTime":569,"contents":[{"_path":"/get-started/installation","_dir":"get-started","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Installation","description":"tRPC-Nuxt provides first class integration with tRPC.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"installation"},"children":[{"type":"text","value":"Installation"}]},{"type":"element","tag":"h2","props":{"id":"1-add-to-existing-nuxt-project"},"children":[{"type":"text","value":"1. Add to existing Nuxt project"}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"pnpm add @trpc/server@next @trpc/client@next trpc-nuxt@beta zod\n","filename":"pnpm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"pnpm add @trpc/server@next @trpc/client@next trpc-nuxt@beta zod\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"npm install @trpc/server@next @trpc/client@next trpc-nuxt@beta zod\n","filename":"npm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install @trpc/server@next @trpc/client@next trpc-nuxt@beta zod\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"yarn add @trpc/server@next @trpc/client@next trpc-nuxt@beta zod\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add @trpc/server@next @trpc/client@next trpc-nuxt@beta zod\n"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"why-trpcserver"},"children":[{"type":"text","value":"Why @trpc/server?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For implementing tRPC endpoints and routers."}]},{"type":"element","tag":"h4","props":{"id":"why-trpcclient"},"children":[{"type":"text","value":"Why @trpc/client?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For making typesafe API calls from your client."}]},{"type":"element","tag":"h4","props":{"id":"why-zod"},"children":[{"type":"text","value":"Why zod?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most examples use "},{"type":"element","tag":"a","props":{"href":"https://github.com/colinhacks/zod","rel":["nofollow"]},"children":[{"type":"text","value":"Zod"}]},{"type":"text","value":" for input validation and tRPC.io highly recommends it, though it isn't required."}]},{"type":"element","tag":"h2","props":{"id":"2-install-module"},"children":[{"type":"text","value":"2. Install module"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will transpile "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"trpc-nuxt"}]},{"type":"text","value":" and exclude "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"trpc-nuxt/client"}]},{"type":"text","value":" from optimized dependencies by Vite."}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n modules: ['trpc-nuxt/module']\n})\n","filename":"nuxt.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineNuxtConfig({\n modules: ['trpc-nuxt/module']\n})\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"3-enable-strict-mode"},"children":[{"type":"text","value":"3. Enable strict mode"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you want to use Zod for input validation, make sure you have enabled strict mode:"}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"{\n \"extends\": \"./.nuxt/tsconfig.json\",\n \"compilerOptions\": {\n \"strict\": true\n }\n}\n","filename":"tsconfig.json","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n \"extends\": \"./.nuxt/tsconfig.json\",\n \"compilerOptions\": {\n \"strict\": true\n }\n}\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n typescript: {\n strict: true\n }\n})\n","filename":"nuxt.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineNuxtConfig({\n typescript: {\n strict: true\n }\n})\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If strict mode is too much, at least enable "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"strictNullChecks"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"{\n \"extends\": \"./.nuxt/tsconfig.json\",\n \"compilerOptions\": {\n \"strictNullChecks\": true\n }\n}\n","filename":"tsconfig.json","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n \"extends\": \"./.nuxt/tsconfig.json\",\n \"compilerOptions\": {\n \"strictNullChecks\": true\n }\n}\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n typescript: {\n tsConfig: {\n strictNullChecks: true\n }\n }\n})\n","filename":"nuxt.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineNuxtConfig({\n typescript: {\n tsConfig: {\n strictNullChecks: true\n }\n }\n})\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"next-steps"},"children":[{"type":"text","value":"Next Steps"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now that you've installed the required dependencies, you are ready to start building your application."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"installation"},"children":[{"type":"text","value":"Installation"}]},{"type":"element","tag":"h2","props":{"id":"1-add-to-existing-nuxt-project"},"children":[{"type":"text","value":"1. Add to existing Nuxt project"}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"pnpm add @trpc/server@next @trpc/client@next trpc-nuxt@beta zod\n","filename":"pnpm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":"pnpm add @trpc/server@next @trpc/client@next trpc-nuxt@beta zod"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"npm install @trpc/server@next @trpc/client@next trpc-nuxt@beta zod\n","filename":"npm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":"npm install @trpc/server@next @trpc/client@next trpc-nuxt@beta zod"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"yarn add @trpc/server@next @trpc/client@next trpc-nuxt@beta zod\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":"yarn add @trpc/server@next @trpc/client@next trpc-nuxt@beta zod"}]}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"why-trpcserver"},"children":[{"type":"text","value":"Why @trpc/server?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For implementing tRPC endpoints and routers."}]},{"type":"element","tag":"h4","props":{"id":"why-trpcclient"},"children":[{"type":"text","value":"Why @trpc/client?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For making typesafe API calls from your client."}]},{"type":"element","tag":"h4","props":{"id":"why-zod"},"children":[{"type":"text","value":"Why zod?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most examples use "},{"type":"element","tag":"a","props":{"href":"https://github.com/colinhacks/zod","rel":["nofollow"]},"children":[{"type":"text","value":"Zod"}]},{"type":"text","value":" for input validation and tRPC.io highly recommends it, though it isn't required."}]},{"type":"element","tag":"h2","props":{"id":"2-install-module"},"children":[{"type":"text","value":"2. Install module"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will transpile "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"trpc-nuxt"}]},{"type":"text","value":" and exclude "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"trpc-nuxt/client"}]},{"type":"text","value":" from optimized dependencies by Vite."}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n modules: ['trpc-nuxt/module']\n})\n","filename":"nuxt.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-06947b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06947b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-579b3d"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-398ee4"},"children":[{"type":"text","value":"modules"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-3374e2"},"children":[{"type":"text","value":"'trpc-nuxt/module'"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"3-enable-strict-mode"},"children":[{"type":"text","value":"3. Enable strict mode"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you want to use Zod for input validation, make sure you have enabled strict mode:"}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"{\n \"extends\": \"./.nuxt/tsconfig.json\",\n \"compilerOptions\": {\n \"strict\": true\n }\n}\n","filename":"tsconfig.json","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-398ee4"},"children":[{"type":"text","value":"\"extends\""}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3374e2"},"children":[{"type":"text","value":"\"./.nuxt/tsconfig.json\""}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-398ee4"},"children":[{"type":"text","value":"\"compilerOptions\""}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-398ee4"},"children":[{"type":"text","value":"\"strict\""}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-82d51f"},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n typescript: {\n strict: true\n }\n})\n","filename":"nuxt.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-06947b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06947b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-579b3d"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-398ee4"},"children":[{"type":"text","value":"typescript"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-398ee4"},"children":[{"type":"text","value":"strict"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-82d51f"},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":"})"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If strict mode is too much, at least enable "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"strictNullChecks"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"{\n \"extends\": \"./.nuxt/tsconfig.json\",\n \"compilerOptions\": {\n \"strictNullChecks\": true\n }\n}\n","filename":"tsconfig.json","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-398ee4"},"children":[{"type":"text","value":"\"extends\""}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3374e2"},"children":[{"type":"text","value":"\"./.nuxt/tsconfig.json\""}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-398ee4"},"children":[{"type":"text","value":"\"compilerOptions\""}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-398ee4"},"children":[{"type":"text","value":"\"strictNullChecks\""}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-82d51f"},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n typescript: {\n tsConfig: {\n strictNullChecks: true\n }\n }\n})\n","filename":"nuxt.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-06947b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06947b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-579b3d"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-398ee4"},"children":[{"type":"text","value":"typescript"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-398ee4"},"children":[{"type":"text","value":"tsConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-398ee4"},"children":[{"type":"text","value":"strictNullChecks"}]},{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-82d51f"},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b9c2"},"children":[{"type":"text","value":"})"}]}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"next-steps"},"children":[{"type":"text","value":"Next Steps"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now that you've installed the required dependencies, you are ready to start building your application."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-82d51f{color:#D19A66}.ct-3374e2{color:#98C379}.ct-398ee4{color:#E06C75}.ct-579b3d{color:#61AFEF}.ct-06947b{color:#C678DD}.ct-87b9c2{color:#ABB2BF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"1-add-to-existing-nuxt-project","depth":2,"text":"1. Add to existing Nuxt project"},{"id":"2-install-module","depth":2,"text":"2. Install module"},{"id":"3-enable-strict-mode","depth":2,"text":"3. Enable strict mode"},{"id":"next-steps","depth":2,"text":"Next Steps"}]}},"_type":"markdown","_id":"content:1.get-started:1.installation.md","_source":"content","_file":"1.get-started/1.installation.md","_extension":"md"},{"_path":"/get-started/usage","_dir":"get-started","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Usage","description":"tRPC-Nuxt provides first class integration with tRPC.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"h2","props":{"id":"recommended-file-structure"},"children":[{"type":"text","value":"Recommended file structure"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Recommended but not enforced file structure. This is what you get when starting from "},{"type":"element","tag":"a","props":{"href":"../main/example-apps"},"children":[{"type":"text","value":"the examples"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":".\n├── server\n│ ├── api\n│ │ └── trpc\n│ │ └── [trpc].ts # <-- tRPC HTTP handler\n│ │ └── [..]\n│ ├── trpc\n│ │ ├── routers\n│ │ │ ├── index.ts # <-- main app router\n│ │ │ ├── todo.ts # <-- sub routers\n│ │ │ └── [..]\n│ │ ├── context.ts # <-- create app context\n│ │ └── trpc.ts # <-- procedure helpers\n├── plugins\n│ ├── client.ts # <-- tRPC Client as a plugin\n└── [..]\n","language":"graphql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".\n├── server\n│ ├── api\n│ │ └── trpc\n│ │ └── [trpc].ts # <-- tRPC HTTP handler\n│ │ └── [..]\n│ ├── trpc\n│ │ ├── routers\n│ │ │ ├── index.ts # <-- main app router\n│ │ │ ├── todo.ts # <-- sub routers\n│ │ │ └── [..]\n│ │ ├── context.ts # <-- create app context\n│ │ └── trpc.ts # <-- procedure helpers\n├── plugins\n│ ├── client.ts # <-- tRPC Client as a plugin\n└── [..]\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"1-create-a-trpc-router"},"children":[{"type":"text","value":"1. Create a tRPC router"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Initialize your tRPC backend using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"initTRPC"}]},{"type":"text","value":" function and create your first router."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"import { initTRPC } from '@trpc/server'\n\n// Avoid exporting the entire t-object since it's not very\n// descriptive and can be confusing to newcomers used to t\n// meaning translation in i18n libraries.\nconst t = initTRPC.create()\n\n// Base router and procedure helpers\nexport const router = t.router\nexport const publicProcedure = t.procedure\n","filename":"server/trpc/trpc.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { initTRPC } from '@trpc/server'\n\n// Avoid exporting the entire t-object since it's not very\n// descriptive and can be confusing to newcomers used to t\n// meaning translation in i18n libraries.\nconst t = initTRPC.create()\n\n// Base router and procedure helpers\nexport const router = t.router\nexport const publicProcedure = t.procedure\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"import { z } from 'zod'\nimport { publicProcedure, router } from '../trpc'\n\nexport const appRouter = router({\n hello: publicProcedure\n .input(\n z.object({\n text: z.string().nullish(),\n }),\n )\n .query(({ input }) => {\n return {\n greeting: `hello ${input?.text ?? 'world'}`,\n }\n }),\n})\n\n// export type definition of API\nexport type AppRouter = typeof appRouter\n","filename":"server/trpc/routers/index.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { z } from 'zod'\nimport { publicProcedure, router } from '../trpc'\n\nexport const appRouter = router({\n hello: publicProcedure\n .input(\n z.object({\n text: z.string().nullish(),\n }),\n )\n .query(({ input }) => {\n return {\n greeting: `hello ${input?.text ?? 'world'}`,\n }\n }),\n})\n\n// export type definition of API\nexport type AppRouter = typeof appRouter\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"import { createNuxtApiHandler } from 'trpc-nuxt'\nimport { appRouter } from '@/server/trpc/routers'\n\n// export API handler\nexport default createNuxtApiHandler({\n router: appRouter,\n createContext: () => ({}),\n})\n","filename":"server/api/trpc/[trpc].ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { createNuxtApiHandler } from 'trpc-nuxt'\nimport { appRouter } from '@/server/trpc/routers'\n\n// export API handler\nexport default createNuxtApiHandler({\n router: appRouter,\n createContext: () => ({}),\n})\n"}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to split your router into several subrouters, you can implement them in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"server/trpc/routers"}]},{"type":"text","value":" directory and import and "},{"type":"element","tag":"a","props":{"href":"https://trpc.io/docs/v10/merging-routers","rel":["nofollow"]},"children":[{"type":"text","value":"merge them"}]},{"type":"text","value":" to a single root "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"appRouter"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"2-create-trpc-client-plugin"},"children":[{"type":"text","value":"2. Create tRPC client plugin"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create a set of strongly-typed composables using your API's type signature."}]},{"type":"element","tag":"code","props":{"code":"import { httpBatchLink } from '@trpc/client'\nimport { createTRPCNuxtProxyClient } from 'trpc-nuxt/client'\nimport type { AppRouter } from '@/server/trpc/routers'\n\nexport default defineNuxtPlugin(() => {\n const client = createTRPCNuxtProxyClient({\n links: [\n httpBatchLink({\n /**\n * If you want to use SSR, you need to use the server's full URL\n * @link https://trpc.io/docs/ssr\n **/\n url: 'http://localhost:3000/api/trpc',\n }),\n ],\n })\n\n return {\n provide: {\n client,\n },\n }\n})\n","filename":"plugins/client.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { httpBatchLink } from '@trpc/client'\nimport { createTRPCNuxtProxyClient } from 'trpc-nuxt/client'\nimport type { AppRouter } from '@/server/trpc/routers'\n\nexport default defineNuxtPlugin(() => {\n const client = createTRPCNuxtProxyClient({\n links: [\n httpBatchLink({\n /**\n * If you want to use SSR, you need to use the server's full URL\n * @link https://trpc.io/docs/ssr\n **/\n url: 'http://localhost:3000/api/trpc',\n }),\n ],\n })\n\n return {\n provide: {\n client,\n },\n }\n})\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"3-make-api-requests"},"children":[{"type":"text","value":"3. Make API requests"}]},{"type":"element","tag":"code","props":{"code":"\n\n\n","filename":"pages/index.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"h2","props":{"id":"recommended-file-structure"},"children":[{"type":"text","value":"Recommended file structure"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Recommended but not enforced file structure. This is what you get when starting from "},{"type":"element","tag":"a","props":{"href":"../main/example-apps"},"children":[{"type":"text","value":"the examples"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":".\n├── server\n│ ├── api\n│ │ └── trpc\n│ │ └── [trpc].ts # <-- tRPC HTTP handler\n│ │ └── [..]\n│ ├── trpc\n│ │ ├── routers\n│ │ │ ├── index.ts # <-- main app router\n│ │ │ ├── todo.ts # <-- sub routers\n│ │ │ └── [..]\n│ │ ├── context.ts # <-- create app context\n│ │ └── trpc.ts # <-- procedure helpers\n├── plugins\n│ ├── client.ts # <-- tRPC Client as a plugin\n└── [..]\n","language":"graphql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":".\n├── server\n│ ├── api\n│ │ └── trpc\n│ │ └── [trpc].ts # <-- tRPC HTTP handler\n│ │ └── [..]\n│ ├── trpc\n│ │ ├── routers\n│ │ │ ├── index.ts # <-- main app router\n│ │ │ ├── todo.ts # <-- sub routers\n│ │ │ └── [..]\n│ │ ├── context.ts # <-- create app context\n│ │ └── trpc.ts # <-- procedure helpers\n├── plugins\n│ ├── client.ts # <-- tRPC Client as a plugin\n└── [..]"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"1-create-a-trpc-router"},"children":[{"type":"text","value":"1. Create a tRPC router"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Initialize your tRPC backend using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"initTRPC"}]},{"type":"text","value":" function and create your first router."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"import { initTRPC } from '@trpc/server'\n\n// Avoid exporting the entire t-object since it's not very\n// descriptive and can be confusing to newcomers used to t\n// meaning translation in i18n libraries.\nconst t = initTRPC.create()\n\n// Base router and procedure helpers\nexport const router = t.router\nexport const publicProcedure = t.procedure\n","filename":"server/trpc/trpc.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"initTRPC"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'@trpc/server'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"// Avoid exporting the entire t-object since it's not very"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"// descriptive and can be confusing to newcomers used to t"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"// meaning translation in i18n libraries."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"initTRPC"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"// Base router and procedure helpers"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"router"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"router"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"publicProcedure"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"procedure"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"import { z } from 'zod'\nimport { publicProcedure, router } from '../trpc'\n\nexport const appRouter = router({\n hello: publicProcedure\n .input(\n z.object({\n text: z.string().nullish(),\n }),\n )\n .query(({ input }) => {\n return {\n greeting: `hello ${input?.text ?? 'world'}`,\n }\n }),\n})\n\n// export type definition of API\nexport type AppRouter = typeof appRouter\n","filename":"server/trpc/routers/index.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"z"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'zod'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"publicProcedure"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"router"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'../trpc'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"appRouter"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"router"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"hello"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"publicProcedure"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"z"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"object"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"z"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"nullish"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"(({ "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"greeting"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"`hello "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"??"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'world'"}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"// export type definition of API"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"AppRouter"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"typeof"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"appRouter"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"import { createNuxtApiHandler } from 'trpc-nuxt'\nimport { appRouter } from '@/server/trpc/routers'\n\n// export API handler\nexport default createNuxtApiHandler({\n router: appRouter,\n createContext: () => ({}),\n})\n","filename":"server/api/trpc/[trpc].ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"createNuxtApiHandler"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'trpc-nuxt'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"appRouter"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'@/server/trpc/routers'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"// export API handler"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"createNuxtApiHandler"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"router"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"appRouter"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"createContext"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": () "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" ({}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"})"}]}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to split your router into several subrouters, you can implement them in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"server/trpc/routers"}]},{"type":"text","value":" directory and import and "},{"type":"element","tag":"a","props":{"href":"https://trpc.io/docs/v10/merging-routers","rel":["nofollow"]},"children":[{"type":"text","value":"merge them"}]},{"type":"text","value":" to a single root "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"appRouter"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"2-create-trpc-client-plugin"},"children":[{"type":"text","value":"2. Create tRPC client plugin"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create a set of strongly-typed composables using your API's type signature."}]},{"type":"element","tag":"code","props":{"code":"import { httpBatchLink } from '@trpc/client'\nimport { createTRPCNuxtProxyClient } from 'trpc-nuxt/client'\nimport type { AppRouter } from '@/server/trpc/routers'\n\nexport default defineNuxtPlugin(() => {\n const client = createTRPCNuxtProxyClient({\n links: [\n httpBatchLink({\n /**\n * If you want to use SSR, you need to use the server's full URL\n * @link https://trpc.io/docs/ssr\n **/\n url: 'http://localhost:3000/api/trpc',\n }),\n ],\n })\n\n return {\n provide: {\n client,\n },\n }\n})\n","filename":"plugins/client.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"httpBatchLink"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'@trpc/client'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"createTRPCNuxtProxyClient"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'trpc-nuxt/client'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"AppRouter"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'@/server/trpc/routers'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"defineNuxtPlugin"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"createTRPCNuxtProxyClient"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"AppRouter"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"links"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"httpBatchLink"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"/**"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":" * If you want to use SSR, you need to use the server's full URL"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":" * "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"@link"}]},{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":" https://trpc.io/docs/ssr"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":" **/"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'http://localhost:3000/api/trpc'"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" ],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"provide"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"3-make-api-requests"},"children":[{"type":"text","value":"3. Make API requests"}]},{"type":"element","tag":"code","props":{"code":"\n\n\n","filename":"pages/index.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"$client"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"useNuxtApp"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"// query and mutate uses useAsyncData under the hood"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"pending"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"$client"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"hello"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"({ "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'client'"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"v-if"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"pending"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"Loading"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"v-else-if"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"code"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"Error:"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" {{ "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"code"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"v-else"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">{{ "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"hello"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"greeting"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-f79d7d{color:#D19A66}.ct-e18fd1{color:#61AFEF}.ct-c3a574{color:#56B6C2}.ct-d213e2{color:#E5C07B}.ct-5fb678{color:#7F848E}.ct-a930e7{color:#98C379}.ct-ca0e09{color:#E06C75}.ct-8358df{color:#ABB2BF}.ct-d69d00{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"recommended-file-structure","depth":2,"text":"Recommended file structure"},{"id":"1-create-a-trpc-router","depth":2,"text":"1. Create a tRPC router"},{"id":"2-create-trpc-client-plugin","depth":2,"text":"2. Create tRPC client plugin"},{"id":"3-make-api-requests","depth":2,"text":"3. Make API requests"}]}},"_type":"markdown","_id":"content:1.get-started:2.usage.md","_source":"content","_file":"1.get-started/2.usage.md","_extension":"md"},{"_path":"/examples/basic","_dir":"examples","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Basic","description":"tRPC-Nuxt provides first class integration with tRPC.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"basic-example"},"children":[{"type":"text","value":"Basic Example"}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"basic-example"},"children":[{"type":"text","value":"Basic Example"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:2.examples:1.basic.md","_source":"content","_file":"2.examples/1.basic.md","_extension":"md"},{"_path":"/examples/multiple-routers","_dir":"examples","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Multiple Routers","description":"tRPC-Nuxt provides first class integration with tRPC.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"multi-routers"},"children":[{"type":"text","value":"Multi Routers"}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"multi-routers"},"children":[{"type":"text","value":"Multi Routers"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:2.examples:2.multiple-routers.md","_source":"content","_file":"2.examples/2.multiple-routers.md","_extension":"md"},{"_path":"/","_dir":"","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"tRPC Nuxt","description":"A supa simple wrapper arousnd supabase-js to enable usage and integration within Nuxt.","excerpt":{"type":"root","children":[{"type":"element","tag":"block-hero","props":{":cta":"[\"Get Started\",\"/get-started/installation\"]",":secondary":"[\"Star on GitHub ->\",\"https://github.com/wobsoriano/trpc-nuxt\"]","snippet":"npm install trpc-nuxt@next"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"tRPC "},{"type":"element","tag":"span","props":{"class":"text-primary-500"},"children":[{"type":"text","value":"Nuxt"}]}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"End-to-end typesafe APIs in Nuxt applications."}]}]},{"type":"element","tag":"template","props":{"v-slot:extra":""},"children":[{"type":"element","tag":"list","props":{},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Automatic typesafety"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Snappy DX"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Autocompletion"}]}]}]}]}]}]},"navigation":false,"layout":"page","body":{"type":"root","children":[{"type":"element","tag":"block-hero","props":{":cta":"[\"Get Started\",\"/get-started/installation\"]",":secondary":"[\"Star on GitHub ->\",\"https://github.com/wobsoriano/trpc-nuxt\"]","snippet":"npm install trpc-nuxt@next"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"tRPC "},{"type":"element","tag":"span","props":{"class":"text-primary-500"},"children":[{"type":"text","value":"Nuxt"}]}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"End-to-end typesafe APIs in Nuxt applications."}]}]},{"type":"element","tag":"template","props":{"v-slot:extra":""},"children":[{"type":"element","tag":"list","props":{},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Automatic typesafety"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Snappy DX"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Autocompletion"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:index.md","_source":"content","_file":"index.md","_extension":"md"}],"navigation":[{"title":"Get Started","_path":"/get-started","children":[{"title":"Installation","_path":"/get-started/installation"},{"title":"Usage","_path":"/get-started/usage"}]},{"title":"Examples","_path":"/examples","children":[{"title":"Basic","_path":"/examples/basic"},{"title":"Multiple Routers","_path":"/examples/multiple-routers"}]}]}