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

55 lines
1.3 KiB
Markdown
Raw Normal View History

---
head.title: 'Nuxt 2 to Nuxt 3: Runtime Config'
head.titleTemplate: ''
---
# Runtime Config
If you wish to reference environment variables within your Nuxt 3 app, you will need to use runtime config.
When referencing these variables within your components, you will have to use the `useRuntimeConfig` composable in your setup method (or Nuxt plugin). In the `server/` portion of your app, you can import directly from `#config`.
[Read more about runtime config](/guide/features/runtime-config).
## Migration
1. Add any environment variables you use in your app to your `publicRuntimeConfig` or `privateRuntimeConfig`.
1. Migrate `process.env` to `useRuntimeConfig` throughout the Vue part of your app.
## Example
::code-group
```ts [nuxt.config.ts]
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
publicRuntimeConfig: {
BASE_URL: process.env.BASE_URL || 'https://nuxtjs.org'
},
privateRuntimeConfig: {
// variables that can only be accessed on server-side
},
})
```
```vue [pages/index.vue]
<script setup>
const config = useRuntimeConfig()
// instead of process.env.BASE_URL you will now access config.BASE_URL
</script>
```
```ts [server/api/hello.ts]
import config from '#config'
export default (req, res) => {
// you can now access config.BASE_URL
return {
baseURL: config.BASE_URL
}
}
```
::