Nuxt.js: environment variables not working

[acidjazz]

my nuxt.config.js

require('dotenv').config()

module.exports = {

  env: {
    API: process.env.API || 'http://localhost:8000',
    test: 'ting',
  },

  /*
   * Router config
   */
  router: {
    middleware: 'auth'
  },

a console.log of process.env on any page or my plugins/axios.js always shows {}

_{This question is available on Nuxt.js community (#c1230)}

[rAugustos]

Hi @acidjazz

Please show us your page, component or plugins.

Depends of your goals , for example:

• In components using vue lifecycle functions #1323 in this case mounted

• or using asyncData

//nuxt.config.js
require('dotenv').config()

module.exports = {

  env: {
    API: process.env.API || 'http://localhost:8000',
    test: 'ting',
  },

  /*
   * Router config
   */
  router: {
    middleware: 'auth'
  },

//pages/index.vue
<template>
<div>
<h2>env</h2>
<pre>{{this.API}} and {{this.test}}</pre>
</template> 

<script>
export default{
  asyncData (context) {
    return context.env
  }
}

or using fetch in the same logic.

• https://nuxtjs.org/guide/views/
• https://nuxtjs.org/api#context

[uptownhr]

@acidjazz yea nuxt i believe uses webpack resolve to translate process.env.param. process.env is actually not set and unfortunately displays {}. However, if you directly call the param within env, you'll get your value.

[acidjazz]

@uptownhr thats so mind-boggling.. why would i get {} but directly get my variable?

[pi0]

@acidjazz Actually that's a strange behavior from web pack (possibly because of it's shimming process)

@uptownhr Thanks for the point. I think that would be useful for all users, making a PR to docs to mentioning this tip in env section would be nice :)

[acidjazz]

@pi0 maybe keep this open to tie to the PR until the documentation is up for people to find? might help avoid more issues made.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.