Nuxt.js env Property, understanding and how to use it?

following https://nuxtjs.org/api/configuration-env

I have been trying to set up my apiUrl in nuxt.config.js once for the whole project, like:

export default {
  env: {
    apiUrl: process.env.MY_REMOTE_CMS_API_URL || 'http://localhost:1337'
  }
}

adding this in nuxt.config.js, I'd expect (and would like) to have apiUrl accessible everywhere in the project. In particular, it is needed for the 3 following cases:

1. with axios, to generate static pages from dynamic urls (in nuxt.config.js)

   generate: {
      routes: function () {
         return axios.get(apiUrl + '/posts')
           .then((res) => {
             return res.data.filter(page => {
               return page.publish === true;
             }).map(page => {
               return {
                 route: '/news/' + page.slug
               }
             })
           })
       }
     },
   

2. with apollo, to get data via graphql (in nuxt.config.js)

     apollo: {
       clientConfigs: {
         default: {
           httpEndpoint: apiUrl + '/graphql'
         }
       }
     },
   

3. in every layout, page and components, as the base url of media:

   <img :src="apiUrl + item.image.url" />
   

As you might see, only thing I need is to 'print' the actual base url of the cms. I have also tried to access it with process.env.apiUrl, with no success.

The only way I was able to make it has been to create an extra plugin/apiUrl.js file, which injects the api url, and seems wrong to me as I am now setting the apiUrl twice in my project.

I asked this question in the past, but in a way less clear way. I was suggested to use dotenv, but from the docs it looks like adding an additional layer of complication that might not be necessary for a simpler setup. Thanks.