Can not access process.env variables in component nuxt

Nuxt < 2.13

process isn't directly available to templates, but you can access it by creating a computed property or adding it to your component's state. Here's an example:

<template>
  <div>{{ message }}</div>
</template>

export default {
  computed: {
    message() {
      return process.env.hey;
    },
  },
};

Nuxt >= 2.13

You can now use the runtime config like so:

nuxt.config

export default {
  publicRuntimeConfig: {
    message: process.env.hey || 'hello world!',
  },
};

template.vue

<template>
  <div>{{ $config.message }}</div>
</template>

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!