add initial docs

This commit is contained in:
Robert Soriano
2022-10-30 11:00:09 -07:00
parent b45c613ce7
commit da52b350ba
15 changed files with 3501 additions and 2 deletions

View File

@@ -0,0 +1,9 @@
---
navigation.icon: uil:info-circle
titleTemplate: '%s'
description: tRPC-Nuxt provides first class integration with tRPC.
---
# Introduction
tRPC-Nuxt provides end-to-end typesafe APIs with tRPC.io in Nuxt 3 applications.

View File

@@ -0,0 +1,89 @@
---
navigation.icon: uil:play-circle
---
# Installation
## 1. Add tRPC-Nuxt to existing Nuxt project
::code-group
```bash [pnpm]
pnpm add @trpc/server@next @trpc/client@next trpc-nuxt@next zod
```
```bash [npm]
npm install @trpc/server@next @trpc/client@next trpc-nuxt@next zod
```
```bash [yarn]
yarn add @trpc/server@next @trpc/client@next trpc-nuxt@next zod
```
::
#### Why @trpc/server?
For implementing tRPC endpoints and routers.
#### Why @trpc/client?
For making typesafe API calls from your client.
#### Why zod?
Most examples use [Zod](https://github.com/colinhacks/zod) for input validation and tRPC.io highly recommends it, though it isn't required.
## 2. Enable strict mode
If you want to use Zod for input validation, make sure you have enabled strict mode:
::code-group
```json [tsconfig.json]
{
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"strict": true
}
}
```
```ts [nuxt.config.ts]
export default defineNuxtConfig({
typescript: {
strict: true
}
})
```
::
If strict mode is too much, at least enable `strictNullChecks`:
::code-group
```json [tsconfig.json]
{
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"strictNullChecks": true
}
}
```
```ts [nuxt.config.ts]
export default defineNuxtConfig({
typescript: {
tsConfig: {
strictNullChecks: true
}
}
})
```
::
## Next Steps
Now that you've installed the required dependencies, you are ready to start building your application.

View File

@@ -0,0 +1,83 @@
---
title: Server
description: '@nuxtjs/supabase is a Nuxt module for first class integration with Supabase.'
---
# Server
## Recommended file structure
Recommended but not enforced file structure. This is what you get when starting from [the examples](../main/example-apps.md).
```graphql
.
server
api
trpc
[trpc].ts # <-- tRPC HTTP handler
[..]
trpc
routers
index.ts # <-- main app router
todo.ts # <-- sub routers
[..]
context.ts # <-- create app context
trpc.ts # <-- procedure helpers
plugins
client.ts # <-- tRPC Client as a plugin
[..]
```
## 1. Create a tRPC router
Initialize your tRPC backend using the `initTRPC` function and create your first router.
::code-group
```ts [server/trpc/index.ts]
import { TRPCError, initTRPC } from '@trpc/server'
// Avoid exporting the entire t-object since it's not very
// descriptive and can be confusing to newcomers used to t
// meaning translation in i18n libraries.
const t = initTRPC.create()
// Base router and procedure helpers
export const router = t.router
export const publicProcedure = t.procedure
```
```ts [server/trpc/routers/index.ts]
import { z } from 'zod'
import { publicProcedure, router } from '..'
export const appRouter = router({
hello: publicProcedure
.input(
z.object({
text: z.string().nullish(),
}),
)
.query(({ input }) => {
return {
greeting: `hello ${input?.text ?? 'world'}`,
}
}),
})
// export type definition of API
export type AppRouter = typeof appRouter
```
```ts [server/api/trpc/[trpc].ts]
import { createNuxtApiHandler } from 'trpc-nuxt'
import { appRouter } from '../../trpc/routers'
// export API handler
export default createNuxtApiHandler({
router: appRouter,
createContext: () => ({}),
})
```
::

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,31 @@
---
title: "tRPC Nuxt"
description: "A supa simple wrapper arousnd supabase-js to enable usage and integration within Nuxt."
navigation: false
layout: page
---
::block-hero
---
cta:
- Get Started
- /get-started/introduction
secondary:
- Star on GitHub ->
- https://github.com/wobsoriano/trpc-nuxt
snippet: npm install trpc-nuxt@next
---
#title
tRPC [Nuxt]{.text-primary-500}
#description
End-to-end typesafe APIs in Nuxt applications.
#extra
::list
- Automatic typesafety
- Snappy DX
- Autocompletion
::
::