Using Environment Variables in nuxt.config.js

Question

I'm using Nuxt & Axios but having trouble using environment variables when building the application from my local machine.

I have installed the @nuxtjs/dotenv module in an attempt to fix this issue but still having problems.

Note: The environment variables work fine when building the app within my hosting providers environment. It is only building from my local machine that gives me trouble. My IDE is VS Code.

Here is my axios setup inside nuxt.config.js:

module.exports = {
  ...
  buildModules: [
    '@nuxtjs/dotenv'
  ],
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios'
  ],
  axios: {
    baseURL: process.env.BASE_URL
  },
  ...
}

My .env file has the following:

BASE_URL="https://some.api.com"

The .env variables are not being recognized when building the app:

nuxt build

Instead, it just sets the axios base url to the same host:port that the server runs on by default. Ex: localhost:4000

I found the following documentation from @nuxtjs/dotenv module: https://github.com/nuxt-community/dotenv-module#using-env-file-in-nuxtconfigjs. This instructs you to add the following to the top of nuxt.config.js:

require('dotenv').config()

This works for building locally; my variables from .env are recognized! However, because dotenv is a dev dependency, this causes the build to crash when deployed to my hosting provider because the module isn't recognized.

I know that I can define the environment variables directly in the build command as follows but I would prefer NOT to do so:

NUXT_ENV_BASE_URL=some.api.com nuxt build 

Is there an easy way to get environment variables to work locally inside of nuxt.config.js during the build process that also works well when deploying to production??

Thank you!

Solution 1

Updated 2020-09-26

As of 2.13.0 I have removed @nuxtjs/dotenv. My nuxt.config.js now simply reads as below with the dotenv imports removed. I made no other code changes and the rest functions exactly the same for me.

env: {
  DB_HOST: process.env.DB_HOST
},

My .env contains the following.

DB_HOST=http://localhost:5001/

Original answer

I installed the following as a dev dependency; @nuxtjs/dotenv. Then I added the following to my nuxt.config.js. I found this import statement in an article and tried it. Thankfully it worked for me.

import dotenv from "dotenv";
dotenv.config();

env: {
  DB_HOST: process.env.DB_HOST
},

I created a file called .env with the following content

DB_HOST=http://localhost:5001/

Solution 2

In nuxt version v2.13.0, support for Runtime Config was added. This adds proper support to read environment variables at runtime. Previously they could be read but were compiled into the application.

The standard documentation is pretty good: https://nuxtjs.org/guide/runtime-config/ . There is also a great blog post on how to migrate. You remove the use of @nuxtjs/dotenv.

https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/

For example, in your nuxt.config.js, you define.

  // Public env variables that are exposed on the frontend.
  publicRuntimeConfig: {
    someAccessKeyId: process.env.SOME_ACCESS_KEY_ID,
  },
  // Private env variables that are not be exposed on the frontend.
  privateRuntimeConfig: {},

Then in your vue code, you access it via.

const { someAccessKeyId } = this.$config