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!

did you ever get this resolved? I am having the same problem. — Jeff Bluemel
– Jeff Bluemel, Commented Apr 24, 2020 at 1:18
I found a working solution after asking this. I added it below. — Jeff Bluemel
– Jeff Bluemel, Commented Apr 25, 2020 at 19:21

Jeff Bluemel · Accepted Answer · 2020-09-26 22:36:53Z

14

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/

edited Sep 26, 2020 at 22:36

answered Apr 25, 2020 at 19:20

Jeff Bluemel

48610 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike K. Over a year ago

I did the same exact thing yesterday and it didn't work. I did it today and now it works. Well. Thank you I guess. Not sure if it's crucial, but I also have following code in my nuxt.config.js: buildModules: [ '@nuxtjs/dotenv' ] The last one is @nuxtjs/dotenv. My version is ^2.15, but it does work and i dont wanna touch it

Derek · Accepted Answer · 2020-08-04 23:35:52Z

11

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

answered Aug 4, 2020 at 23:35

Derek

1,80518 silver badges15 bronze badges

12 Comments

Stephen Vernyi Over a year ago

How are you supposed to use RuntimeConfig inside of the nuxt.config.js file?

Andre Odendaal Over a year ago

I don't think you understand @Derek, How do I want to access someAccessKeyId in another part of the nuxt.config.js file

Janpan Over a year ago

@Derek I am having the same issue, those values are just empty if you refer to them as process.env in for example your modules object below

mart cube Over a year ago

How can we access variables from privateRuntimeConfig in a plugin ?

lorenzo Over a year ago

this problem was driving me crazy: I have the .env file in the root directory but with process.env.XXX I got always "undefined". I finally solved using your solution, thank you!

|

Collectives™ on Stack Overflow

Using Environment Variables in nuxt.config.js

2 Answers 2

Updated 2020-09-26

Original answer

1 Comment

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Updated 2020-09-26

Original answer

1 Comment

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related