mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-14 18:13:54 +00:00
50 lines
1.3 KiB
Markdown
50 lines
1.3 KiB
Markdown
|
# 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 Nitro portion of your app, you can import directly from `#config`.
|
||
|
|
|
||
|
|
[Read more about runtime config](/docs/usage/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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
::
|