mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-14 12:14:40 +01:00
add initial docs
This commit is contained in:
1
packages/docs/README.md
Normal file
1
packages/docs/README.md
Normal file
@@ -0,0 +1 @@
|
||||
docs
|
||||
9
packages/docs/content/1.get-started/1.introduction.md
Normal file
9
packages/docs/content/1.get-started/1.introduction.md
Normal 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.
|
||||
89
packages/docs/content/1.get-started/2.installation.md
Normal file
89
packages/docs/content/1.get-started/2.installation.md
Normal 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.
|
||||
83
packages/docs/content/1.get-started/3.server.md
Normal file
83
packages/docs/content/1.get-started/3.server.md
Normal 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: () => ({}),
|
||||
})
|
||||
```
|
||||
|
||||
::
|
||||
6
packages/docs/content/1.get-started/4.client.md
Normal file
6
packages/docs/content/1.get-started/4.client.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Client
|
||||
description: '@nuxtjs/supabase is a Nuxt module for first class integration with Supabase.'
|
||||
---
|
||||
|
||||
hello client
|
||||
6
packages/docs/content/2.demo/1.introduction.md
Normal file
6
packages/docs/content/2.demo/1.introduction.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: '@nuxtjs/supabase is a Nuxt module for first class integration with Supabase.'
|
||||
---
|
||||
|
||||
hello intro
|
||||
6
packages/docs/content/2.demo/2.installation.md
Normal file
6
packages/docs/content/2.demo/2.installation.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Installation
|
||||
description: '@nuxtjs/supabase is a Nuxt module for first class integration with Supabase.'
|
||||
---
|
||||
|
||||
hello intro
|
||||
6
packages/docs/content/2.demo/3.server.md
Normal file
6
packages/docs/content/2.demo/3.server.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Server
|
||||
description: '@nuxtjs/supabase is a Nuxt module for first class integration with Supabase.'
|
||||
---
|
||||
|
||||
hello server
|
||||
6
packages/docs/content/2.demo/4.client.md
Normal file
6
packages/docs/content/2.demo/4.client.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Client
|
||||
description: '@nuxtjs/supabase is a Nuxt module for first class integration with Supabase.'
|
||||
---
|
||||
|
||||
hello client
|
||||
31
packages/docs/content/index.md
Normal file
31
packages/docs/content/index.md
Normal 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
|
||||
::
|
||||
::
|
||||
10
packages/docs/nuxt.config.ts
Normal file
10
packages/docs/nuxt.config.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
export default defineNuxtConfig({
|
||||
app: {
|
||||
pageTransition: false,
|
||||
layoutTransition: false,
|
||||
},
|
||||
extends: '@nuxt-themes/docus',
|
||||
build: {
|
||||
transpile: [/content-edge/],
|
||||
},
|
||||
})
|
||||
17
packages/docs/package.json
Normal file
17
packages/docs/package.json
Normal 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"
|
||||
}
|
||||
}
|
||||
12
packages/docs/theme.config.ts
Normal file
12
packages/docs/theme.config.ts
Normal 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,
|
||||
},
|
||||
})
|
||||
3
packages/docs/tsconfig.json
Normal file
3
packages/docs/tsconfig.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
3218
pnpm-lock.yaml
generated
3218
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user