Nuxt/docs/7.migration/8.runtime-config.md

59 lines
1.7 KiB
Markdown
Raw Permalink Normal View History

# Runtime Config
If you wish to reference environment variables within your Nuxt 3 app, you will need to use runtime config.
2023-07-07 16:24:09 +00:00
When referencing these variables within your components, you will have to use the [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) composable in your setup method (or Nuxt plugin).
2023-07-07 16:24:09 +00:00
In the `server/` portion of your app, you can use [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) without any import.
[Read more about runtime config](/docs/guide/going-further/runtime-config).
## Migration
1. Add any environment variables that you use in your app to the `runtimeConfig` property of the `nuxt.config` file.
2023-07-07 16:24:09 +00:00
1. Migrate `process.env` to [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) throughout the Vue part of your app.
## Example
::code-group
```ts [nuxt.config.ts]
export default defineNuxtConfig({
runtimeConfig: {
// Private config that is only available on the server
apiSecret: '123',
// Config within public will be also exposed to the client
public: {
apiBase: '/api'
}
},
})
```
```vue [pages/index.vue]
<script setup lang="ts">
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()
export default (req, res) => {
// 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
```
::