docs(server): add nitro config and storage examples (#6507)

Co-authored-by: Pooya Parsa <pooya@pi0.io>
This commit is contained in:
HomWang 2022-08-15 22:29:41 +08:00 committed by GitHub
parent 676514d38b
commit 3920065bff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -162,6 +162,23 @@ export default defineEventHandler((event) => {
## Advanced Usage Examples
### Nitro Configuration
You can use `nitro` key in `nuxt.config` to directly set [Nitro Configuration](https://nitro.unjs.io/config/).
::alert{type=warning}
This is an advanced option. Custom config can affect production deployments and we upgrade Nitro in semver-minor versions of Nuxt 3. meaning, configuration interface might be changed over the time.
::
```ts [nuxt.config.ts]
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
// https://nitro.unjs.io/config
nitro: {}
})
```
### Using a Nested Router
```ts [/server/api/hello.ts]
@ -209,3 +226,67 @@ export default (req, res, next) => {
::alert{type=warning}
Never combine `next()` callback with a legacy middleware that is `async` or returns a `Promise`!
::
### Server Storage
Nitro Provides a cross platform [Stroage Layer](https://nitro.unjs.io/guide/storage.html). In oder to configure additional storage mountpoints, you can use `nitro.storage`.
#### Example: Using Redis
```ts [nuxt.config.ts]
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
nitro: {
storage: {
'redis': {
driver: 'redis',
/* redis connector options */
port: 6379, // Redis port
host: "127.0.0.1", // Redis host
username: "", // needs Redis >= 6
password: "",
db: 0, // Defaults to 0
},
}
}
})
```
Create a new file in `server/api/test.post.ts`:
```ts [/server/api/test.post.ts]
export default defineEventHandler(async event => {
const body = await useBody(event)
await useStorage().setItem('redis:test', body)
return 'Data is set'
})
```
Create a new file in `server/api/test.get.ts`:
```ts [/server/api/test.get.ts]
export default async defineEventHandler(event => {
const data = await useStorage().getItem('redis:test')
return data
})
```
Create a new file in `app.vue`:
```vue [app.vue]
<template>
<div>
<div>Post state: {{ resDataSuccess }}</div>
<div>Get Data: {{ resData.text }}</div>
</div>
</template>
<script setup lang="ts">
const { data: resDataSuccess } = await useFetch('/api/test', {
method: 'post',
body: { text: 'Nuxt is Awesome!' }
})
const { data: resData } = await useFetch('/api/test')
</script>
```