is it possible to load values from multiple .env files (example .env + .env.development + .env.development.local)

[vesper8]

I'm coming to nuxt from vue-cli and vue-cli has a way of loading multiple .env files which I found very logical and convenient

See docs here: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

And image explaining the gist of it:

I would like to do the same with nuxt now... so .env would always be loaded, then depending on the environment (dev, staging, production) it would optionally also load .env.[environment]

And furthermore it could also load .env.local and .env.[environment].local (.local files are by default ignored by .git)

The .local bit is not so crucial but the ability to load .env + .env.[environment] I found very useful. Of course any values in .env.[environment] would overwrite any identical values in .env

Can I achieve this with nuxt's dotenv-module?

[hami9x]

Here's a fork I made that does exactly this: https://github.com/chilons/dotenv-module Hope you'll find it useful.

[vesper8]

Thanks @chilons, that's good to know. But I'd prefer if possible to stay on the main codebase.. I feel like this functionality should be included by default. Have you tried submitting a PR to see if they'd be willing to merge your changes?

[pi0]

Hi. With nuxt 2.13+ it has built-in support for dotenv and runtimeConfig so @nuxtjs/dotenv will be deprecated soon. But nuxt also only supports single .env file because it is not a good practice to share environment variables across deployment environments and highly discouraged by dotenv module too:

We strongly recommend against having a "main" .env file and an "environment" .env file like .env.test. Your config should vary between deploys, and you should not be sharing values between environments.

I hope you understand the reason. A module to add multi-file support with a clear purpose on docs, would be nice and welcome :)

[jechazelle]

Hello @vesper8 @pi0, maybe a quick answer :

• Install dotenv : npm install @nuxtjs/dotenv --save-dev

• Declare in nuxt.config.js : modules: ['@nuxtjs/dotenv'],

• Create binding in nuxt.config.js : buildModules: [ ['@nuxtjs/dotenv', { filename: '.env.' + process.env.ENV }], ],

• Update your package.json : "scripts": { "dev": "ENV=test nuxt", }

• Create file .env.test, .env.dev...

I agree with you @pi0, it's not a good practice to share the environment variables. Just to test the differents environements.

• Add this in your .gitignore : .env.dev

[puzzle9]

• ENV

  buildModules: [
    ['@nuxtjs/dotenv', {
      filename: `.env.${process.env.NODE_ENV}`,
    }],
  ],

[stas-kh]

thanks @jechazelle

You saved my time!

[areindl]

Hey @vesper8,

here is a small solution that uses pure Nuxt.js and the internal dotenv support. We have the same requirement: one repo but run against three environments (dev, stage, prod). We want to have distinct .env files and they contain no security-critical info.

1. Create the .env files:

.env.dev
.env.stage
.env.prod

2. Configure nuxt.config.js and introduce the variables needed (e.g. projectId):

   {
   publicRuntimeConfig: {
   projectId: process.env.PROJECT_ID || 'myProjectId-default',
   },
   }

3. Now change the scripts in package.json and add the following:

   "scripts": {
   "serve": "nuxt build --dotenv .env.dev",
   "serve:dev": "npm run build",
   "serve:stage": "nuxt build --dotenv .env.stage",
   "serve:prod": "nuxt build --dotenv .env.prod",
   ...
   }

   As you can see Nuxt offers an option to load specific dotenv files. Now when you run npm run serve:stage the project is served using the stage-config.

I hope it helps!

[kabaluyot]

1. Create:

.env.dev
.env.prod

2. From your nuxt.config.js, add:

require('dotenv').config({ path: __dirname + '/.env.' + process.env.ENV })

3. From your package.json, add:

dev: "ENV=dev nuxt",
start: "ENV=prod nuxt",

[huongnhdh]

* Install dotenv :
  `npm install @nuxtjs/dotenv --save-dev`

* Declare in nuxt.config.js :
  `modules: ['@nuxtjs/dotenv'],`

* Create binding in nuxt.config.js :
  `  buildModules: [ ['@nuxtjs/dotenv', { filename: '.env.' + process.env.ENV }], ],`

* Update your package.json :
  `"scripts": { "dev": "ENV=test nuxt", }`

* Create file .env.test, .env.dev...

I tried it but it doesn't work with next generate

I had to move .env.dev or .env.staging to .env on CI/CD

[fake-car]

Me too and I am totally confused now ...