Использование переменных окружения в приложении Nuxtjs

При разворачивании своего приложения NuxtJS каждый разработчик рано или поздно столкнется с необходимостью использовать переменные окружения (environment variables) в том или ином виде. Как правило это требуется для разделения развертывания на production и dev- окружении.

Итак нам нужно использовать переменные окружения в приложении NuxtJs которое запущено в docker контейнере. Первым дело нужно установить переменные в docker-compose.yml файле. Делается это при помощи директивы environment
Итоговый файл будет примерно таким:

version: "3.9"

volumes:
  db-data:
  static_volume: 
  media_volume: 
   
services:
  db:
    image: postgres
    container_name: visionmark_postgres    
    environment:
      - POSTGRES_DB=mydb
      - POSTGRES_USER=myuser
      - POSTGRES_PASSWORD=mypassword@63
    volumes:
      - db-data:/var/lib/postgresql/data


  frontend:
    restart: always
    build: ./frontend
    container_name: visionmark_frontend
    environment:
      - BASE_URL=http://localhost/api/
      - BRAWSER_BASE_URL=https://mysite.ru/api/
    depends_on:
      - backend

В вашем случае разумеется файл, будет немного отличаться. Далее нам нужно эти переменные обработать в Nuxt.

Документация гласит, что в версиях Nuxt выше 2.12 уже можно не использовать модуль dotenv module . Вместо него появились встроенные свойства publicRuntimeConfig и privateRuntimeConfig.

publicRuntimeConfig нужен для объявления переменных которые используются на фронте, privateRuntimeConfig для переменных которые будут использоваться только лишь в контексте сервера.

Таким образом мне нужны было переопределить baseURL для модуль axios. Ранее у меня был такой конфиг в файле nuxt.config.js

 
  axios: {
     baseURL: process.env.BASE_URL,
     browserBaseURL: process.env.BRAWSER_BASE_URL
  },

Теперь же я могу его удалить и использовать

  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BRAWSER_BASE_URL
    }
  },
  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL
    }
  }

У меня все, надеюсь этот мануал пригодится кому нибудь.