Recommended dynamic runtime configuration technique on nuxtjs (other than dotenv)

Question

I have been trying to use publicRuntimeConfig / privateRuntimeConfig On nuxt 2.4.1, I have defined my runtime config as follows on nuxt.config.js

publicRuntimeConfig: {
    DATA_API_HOST_URL: process.env.VUE_APP_DATA_API_HOST_URL,
  },
  privateRuntimeConfig: {
    AUTH_APP_CLIENT_SECRET: process.env.VUE_APP_AUTH_APP_CLIENT_SECRET,
  },

and calling it as follows on my login.vue

asyncData( ctx ) {
  console.log(ctx.$config.DATA_API_HOST_URL)
  //some activity
}

1. The keys are showing up on $config inside asyncData. I debugged on chrome dev tools. But value is not read from process.env.VUE_APP_DATA_API_HOST_URL. The value is showing up as undefined. However, process.env.VUE_APP_DATA_API_HOST_URL is showing the value OK. The whole point is to move away from process.env.
2. this.$config.DATA_API_HOST_URL also does not access the values.
3. '${DATA_API_HOST_URL}' is shown in examples but I believe it is only for explicit param declarations at asyncData like asyncData( { $config : {DATA_API_HOST_URL}).
4. When I pass values as it is using DATA_API_HOST_URL: process.env.VUE_APP_DATA_API_HOST_URL || 'https://test.api.com', it seems to copy the value fine using ctx.$config.DATA_API_HOST_URL!

Looking to me like copying process.env to *RuntimeConfig has a problem!

What is the recommended way of importing and using runtime configurations?

Answer 1

As per documentation in the Nuxt blog post you marked, the feature your are trying to use is released in 2.13 (you´re using 2.4 if i not misunderstood). That could be the reason behind the behaviour you're seeing. I'd recommend update your project dependencies or trying another approach.

Answer 2

I think you should use Docker to set dynamic runtime config like link below:

https://dev.to/frontendfoxes/dockerise-your-nuxt-ssr-app-like-a-boss-a-true-vue-vixens-story-4mm6