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

head.title	head.titleTemplate
Nuxt 2 to Nuxt 3: Runtime Config

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.

Migration

1. Add any environment variables you use in your app to your publicRuntimeConfig or privateRuntimeConfig.
2. Migrate process.env to useRuntimeConfig throughout the Vue part of your app.

Example

::code-group

import { defineNuxtConfig } from 'nuxt'

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

<script setup>
  const config = useRuntimeConfig().public
  // instead of process.env.BASE_URL you will now access config.BASE_URL
</script>

const config = useRuntimeConfig().public

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

::