I am working with Nuxt3. And here is my public and private variables definition in nuxt.config.ts
–
export default defineNuxtConfig({
runtimeConfig: {
public: { myPublicVar: '' },
myPrivateVar: ''
}
})
On localhost, my .env
file looks something like this-
NUXT_MY_PRIVATE_VAR: 'privateValue'
NUXT_PUBLIC_MY_PUBLIC_VAR: 'publicValue'
When I test on my localhost-
On client side, let’s say in app.vue
, it works fine-
const config = useRuntimeConfig()
console.log(config.public.myPublicVar) // prints 'publicValue'
On the server side let’s say in api/users.ts
, it works fine-
const config = useRuntimeConfig()
console.log(config.myPrivateVar) // prints 'privateValue'
Now, I host this, Nuxt application on the AWS server, and manage my secrets on AWS secret manager. I used the exact names for the environmental variable as mentioned above. However, on production, the public variables work perfectly, and the private variables print nothing. Looks like environmental variables are not overriding the values of runtimeConfig
( it should work like public variable does)
When I test on production-
const config = useRuntimeConfig()
console.log(config.myPrivateVar) // prints ''
I followed the documentation that env variables with the prefix NUXT_PUBLIC_
and private variables with NUXT_
can override the values in runtimeConfig
. I also followed the blog written on the same concept.
Can anyone please guide me, on what must be happening here?
2