Nuxt.js: Use environment variables inside nuxt.config.js

[manniL]

Hey!

Description

I'm currently trying to set several config parameters depending on whether nuxt.js is launched in dev or production mode. To accomplish this, I haven't changed any environment variables before starting nuxt.
Unfortunately, the following won't work (using the axios module) by default:

  /*
   * Axios
   */
  axios: {
    baseURL: process.env.NODE_ENV !== 'production' ? 'http://api.xyz.test' : 'https://api.xyz.com'
  },

If I use console.log(process.env.NODE_ENV) in the nuxt.config.js file, it's undefined (if not set before)

Current possible solution

I only came up with one solution for it:

Set env variables before starting

We could update the package.json scripts to include NODE_ENV or set it manually through the console.
The former blocks "overriding" ENV through the command line, the latter is quite tedious.

"scripts": {
    "dev": "NODE_ENV=development nuxt",
    "build": "NODE_ENV=production nuxt build",
    "start": "NODE_ENV=production nuxt start",
    "generate": "NODE_ENV=production nuxt generate", 
  },

Use dotenv module

Also a way to deal with it, and highly customizable. Still, there should be an easier way to define the "default" configuration which would be enough in many use-cases.

Other solutions?

Are there better ways to accomplish similar behavior easier?

By default, NODE_ENV is set depending on the nuxt mode (nuxt dev = development, production otherwise), but I guess this happens after interpreting the config.

Could we use extend() for it? :thinking:

Related

https://github.com/nuxt/nuxt.js/blob/dev/lib/builder/webpack/server.config.js#L50
https://github.com/nuxt/nuxt.js/issues/1386

_{This bug report is available on Nuxt.js community (#c2598)}

[javialon26]

https://github.com/nuxt-community/dotenv-module

[manniL]

@javialon26 Thanks! I know about dotenv and that module, but it's a bit overkill for small applications IMO.

[husayt]

How do you define if it is dev or prod mode if you don't set NODE_ENV env variable?
I use cross-env library and define my scripts as below

    "dev": "nuxt -v&&nuxt",
    "prod-env": "cross-env NODE_ENV=production PORT=4000 HOST=xxx.yyy.com",
    "build-prod": "npm run prod-env npm run build",
    "build": "nuxt -v&&nuxt build",
    "start": "nuxt start",
    "start-prod": "npm run prod-env npm run start"

[manniL]

@husayt I thought about some "default" settings (nuxt => development, build & start => production)

[husayt]

@manniL Actually digging deeper I realised this can be a big issue. The way it works now NODE_ENV is defined after processing nuxt.config.js. That means NODE_ENV==production would give different values in nuxt.config.js and elsewhere.

This seems like a bug to me.

[husayt]

This seems to be resolved in next version.

https://github.com/nuxt/nuxt.js/commit/742ea42f9737d2e7d98c42544a79297d305b0252#diff-bad63423433e9626a156a1e1250d2281

[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.