docs: update usage about runtime config and environment variables (#5569)

This commit is contained in:
sumiren 2022-06-23 03:07:23 +09:00 committed by GitHub
parent 8f98f60032
commit 697f547b2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -25,9 +25,11 @@ import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
runtimeConfig: {
secretKey: '', // variable that can only be accessed on the server side
// Private config that is only available on the server
apiSecret: '123',
// Config within public will be also exposed to the client
public: {
BASE_URL: process.env.BASE_URL || 'https://nuxtjs.org' // variable that can also be accessed on the client side
apiBase: '/api'
}
},
})
@ -35,20 +37,27 @@ export default defineNuxtConfig({
```vue [pages/index.vue]
<script setup>
const config = useRuntimeConfig().public
// instead of process.env.BASE_URL you will now access config.BASE_URL
const config = useRuntimeConfig()
// instead of process.env you will now access config.public.apiBase
console.log(config.public.apiBase)
</script>
```
```ts [server/api/hello.ts]
const config = useRuntimeConfig().public
const config = useRuntimeConfig()
export default (req, res) => {
// you can now access config.BASE_URL
return {
baseURL: config.BASE_URL
}
// In server, you can now access config.apiSecret, in addition to config.public
console.log(config.apiSecret)
console.log(config.public.apiBase)
}
```
```ini [.env]
# Runtime config values are automatically replaced by matching environment variables at runtime
NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.org
```
::