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

1
packages/docs/README.md Normal file
View File

@@ -0,0 +1 @@
docs

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

View File

@@ -0,0 +1,10 @@
export default defineNuxtConfig({
app: {
pageTransition: false,
layoutTransition: false,
},
extends: '@nuxt-themes/docus',
build: {
transpile: [/content-edge/],
},
})

View File

@@ -0,0 +1,17 @@
{
"name": "docs",
"description": "Docs for TRPC-Nuxt",
"scripts": {
"dev": "nuxi dev",
"build": "nuxi build",
"generate": "nuxi build",
"preview": "nuxi preview"
},
"devDependencies": {
"@docus/github": "npm:@docus/github-edge@latest",
"@nuxt-themes/docus": "npm:@nuxt-themes/docus-edge@0.1.0-2a7c428",
"@nuxt-themes/website": "0.1.7",
"nuxt": "^3.0.0-rc.12",
"vue-plausible": "^1.3.2"
}
}

View File

@@ -0,0 +1,12 @@
import { defineTheme } from '@nuxt-themes/config'
console.log('defineTheme', defineTheme)
export default defineTheme({
title: 'Nuxt 3',
cover: {
src: 'https://res.cloudinary.com/nuxt/image/upload/v1650870623/nuxt3-rc-social_z6qh3m.png',
alt: 'Nuxt 3 cover image',
},
aside: {
level: 1,
},
})

View File

@@ -0,0 +1,3 @@
{
"extends": "./.nuxt/tsconfig.json"
}

3218
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff