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

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?

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.