How to correctly store runtime config in Nuxt 3 and how does public config differ from private?

Nuxt 3 runtime config is used to store configuration values that may vary between environments (development, production) and are available at runtime of the application.

The configuration is divided into two parts:

• private runtime config — available only on the server (Node.js), not included in the client bundle. Used for secret keys, API tokens, etc.
• public runtime config — available on both server and client. Used for values that can be safely exposed, such as API URLs.

Example configuration in nuxt.config.ts:

export default defineNuxtConfig({
  runtimeConfig: {
    // private config
    apiSecret: process.env.API_SECRET,
    // public config
    public: {
      apiBase: process.env.API_BASE || 'https://api.example.com'
    }
  }
})

Accessing the config in code:

const config = useRuntimeConfig()
console.log(config.apiSecret) // available only on the server
console.log(config.public.apiBase) // available on both server and client

Thus, private config protects secrets, while public config allows safe transmission of settings to the client.