Server-Side Runtime Config Access vs Client-Side Hydration in Nuxt
25.5K reputation · 18 Jan 2021, 15:21 UTC
The goal is to make a configuration value defined in a .env file available both during server-side rendering and client-side hydration after a production build.
In development, Nuxt injects process.env into both server and client bundles, so direct access works. In production builds, only variables exposed via publicRuntimeConfig are sent to the client; direct process.env references become undefined on the client, causing hydration mismatches.
It is unclear whether adding the variable to runtimeConfig with the public flag guarantees availability in both environments, or if using $config from the Nuxt context is required, and whether any additional build settings influence the outcome.
What is the recommended way to expose environment variables to client‑side code in Nuxt 3 production builds? Does adding the variable to runtimeConfig with public:true ensure it is present in both server and client bundles?