Can not access process.env variables in component nuxt

Question

In nuxt config I have env object

env: {
    hey: process.env.hey || \'hey\'
},

as soon as I want to display it in component template:

Answer 1

Here's how you can grab environment variables in a nuxt component.

First you must create a serverInit.js file in your Vuex Store. Because process.env is rendered server side, you must call it in the part of your app that is also rendered server-side....in this case, Vuex.

const state = () => ({
  env: {},
  buildEnv: '',
})

const mutations = {
  setEnv(state, env) {
    state.env = env
  },
  setBuildEnv(state, env) {
    state.buildEnv = env
  },
}

const actions = {
  nuxtServerInit({ commit }) {
    if (process.server) {
      if (process.env.NUXT_ENV_BUILD_HASH) {
        commit('setEnv', {
          buildHash: JSON.parse(process.env.NUXT_ENV_BUILD_HASH),
        })
      } else {
        commit('setEnv', {
          buildHash: false,
        })
      }
      commit('setBuildEnv', process.env.NODE_ENV)
    }
  },
}
const getters = {
  env(state) {
    return state.env
  },
  buildEnv(state) {
    return state.buildEnv
  },
}

export default {
  state,
  mutations,
  actions,
  getters,
}

As you can see above, if (process.server) is executed when the app is being rendered server side. This allows you to save anything inside process.env into the Vuex state. Then, when you want to call them in your components just run:

computed: {
    ...mapGetters(['env', 'buildEnv']),
}

Inside your component, and voila!