Variáveis de ambiente em runtime no NuxtJS

Tags:

NuxtJS é uma ferramenta poderosa criada sobre o VueJS. Ele possibilita a criação inclusive de SSR. Ele tem uma possibilidade de usar variáveis de ambiente através de process.env.VALUE. Mas acontece que ele apenas substitui os valores em momento de build. Hoje como uso bastante docker, muitas vezes se torna necessário realizar um deploy rápido em uma máquina e sendo assim, mudar algumas variáveis. Isso me obrigaria a buildar novamente a imagem docker para aplicar essas alterações, mas vou mostrar aqui como aproveitar o poder do SSR e do NuxtJS para usar variáveis de ambiente em runtime.

Logo de início aviso que isso só funciona para o modeo Universal do NuxtJS. O modo SPA por motivos óbvios não é possível.

Plugin

Vamos utilizar o poder dos plugins do NuxtJS. Então no arquivo nuxt.config.js só incluir nosso plugin environment.js

// nuxt.config.js
...
plugins: [
    '~/plugins/environment',
]
...

No nosso arquivo do plugin:

// environment.js
export default ({ beforeNuxtRender, nuxtState, env }, inject) => {
  if (process.server) {
    beforeNuxtRender(({ nuxtState }) => {
      nuxtState.env = nuxtState.env || {}
      Object.keys(env).forEach(key => {
        if (process.env[key]) {
          nuxtState.env[key] = process.env[key]
        }
      })
    })
    inject('env', nuxtState.env)
  } else {
    Object.keys(nuxtState.env).forEach(key => {
      inject('env', nuxtState.env)
    })
  }
}

Agora é possível acessar do lado do client as variáveis de ambiente através de this.$env

Dessa forma, posso definir as variáveis para passar para o container da aplicação e aplicação do lado do client vai conseguir interpretar os valores pois o SSR do NuxtJS passa esses valores para o frontend e assim injetamos no Vue o objeto com todas as variáveis.

Isso é tudo.