---
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 use `useRuntimeConfig` without any import.

[Read more about runtime config](/guide/features/runtime-config).

## Migration

1. Add any environment variables that you use in your app to the `runtimeConfig` property of the `nuxt.config` file.
1. Migrate `process.env` to `useRuntimeConfig` throughout the Vue part of your app.

## Example

::code-group

```ts [nuxt.config.ts]
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  runtimeConfig: {
    secretKey: '', // variable that can only be accessed on the server side
    public: {
      BASE_URL: process.env.BASE_URL || 'https://nuxtjs.org' // variable that can also be accessed on the client side
    }
  },
})
```

```vue [pages/index.vue]
<script setup>
  const config = useRuntimeConfig().public
  // instead of process.env.BASE_URL you will now access config.BASE_URL
</script>
```

```ts [server/api/hello.ts]
const config = useRuntimeConfig().public

export default (req, res) => {
  // you can now access config.BASE_URL
  return {
    baseURL: config.BASE_URL
  }
}
```

::