Is there a way to reference to another variable? dotenv-expand seems to be the package that is used in general, but I am not sure if it's straightforward to just plug it in.

Any guidance would be appreciated.

Thanks!

Hi @JulienTant

I just created https://cmty.app/nuxt/dotenv-module/issues/c33
also commented on https://cmty.app/nuxt/dotenv-module/issues/c28

Further I'd also opt for the .env file to override existing values from nuxt.config.js env.
Which contradicts existing test: test('variables from the .env file should NOT override existing values from nuxt.config.js', async () => {

Topics:

1. I propose following override strategy:
   i. system environment variables >
   ii. .env variables >
   iii. nuxt.config.js 'env' property
2. Instead of 'only' option - how about adding/replacing with an option 'secret' (suggestions welcome… hide | serverSideOnly?)

It comes down to a discussion on how the dotenv module / override should functionally behave. So might be somewhat opinionated… - therefore I'd simply like to start a discussion with this post. :-)

Version

v1.4.0

Reproduction link

https://codesandbox.io/s/awesome-sanderson-vijy1

Steps to reproduce

1. Visit reproduction link provided
2. Reload home route '/'
3. Check server log in Terminal
4. toggle routes '/about' <> '/'
5. Check client log in Console

What is expected ?

console.log server Terminal

/home | fetch() | from server
/home | fetch() | process.env.TEST1 TEST1
/home | fetch() | context.env.TEST1 undefined
/home | fetch() | process.env.TEST2 TEST2
/home | fetch() | context.env.TEST2 TEST2
/home | fetch() | process.env.TEST3 undefined
/home | fetch() | context.env.TEST3 undefined

console.log client Console (toggle route '/about' <> '/')

/home | fetch() | from client
/home | fetch() | process.env.TEST1 undefined
/home | fetch() | context.env.TEST1 undefined
/home | fetch() | process.env.TEST2 TEST2
/home | fetch() | context.env.TEST2 TEST2
/home | fetch() | process.env.TEST3 undefined
/home | fetch() | context.env.TEST3 undefined

What is actually happening?

console.log server Terminal

/home | fetch() | from server
/home | fetch() | process.env.TEST1 undefined
/home | fetch() | context.env.TEST1 undefined
/home | fetch() | process.env.TEST2 TEST2
/home | fetch() | context.env.TEST2 TEST2
/home | fetch() | process.env.TEST3 undefined
/home | fetch() | context.env.TEST3 undefined

console.log client Console (toggle route '/about' <> '/')

/home | fetch() | from client
/home | fetch() | process.env.TEST1 undefined
/home | fetch() | context.env.TEST1 undefined
/home | fetch() | process.env.TEST2 TEST2
/home | fetch() | context.env.TEST2 TEST2
/home | fetch() | process.env.TEST3 undefined
/home | fetch() | context.env.TEST3 undefined

Additional comments?

I'd expect to have control over environment variables visibility via 'only' option.

E.g. with .env file

STRIPE_SECRET_KEY="1234"
STRIPE_PUBLISHABLE_KEY="9876"

and configuring ['@nuxtjs/dotenv', { only: ['STRIPE_PUBLISHABLE_KEY'] }]
both variables should be available server-side - while client-side only STRIPE_PUBLISHABLE_KEY should be accessible.

Version

v1.4.0

Reproduction link

http://there-is-no-link

Steps to reproduce

VUEAPPA=A
VUEAPPAB=$VUEAPPA/B

What is expected ?

VUEAPPA=A
VUEAPPAB=A/B

What is actually happening?

VUEAPPA=A
VUEAPPAB=$VUEAPPA/B

Additional comments?

This works fine in vue-cli SPA, but doesn't work in nuxt. I assume they both use the same library, but nuxt is missing something.

So in my project (https://github.com/GitGangGuy/nuxtjs-quickstarter), which consists of the scaffolded folder structure with the inital pre-configuration of the create nuxt-app cli tool and a few additions (cypress, .yml instead of .js config files, extending the .env …), I'm encountering a problem with the dotenv module for NuxtJS. In case anybody goes through the effort of cloning the repo (thanks for your effort ;) ), please note that you will have to comment out lines 55-110 in the nuxt.config.js (Currently not working CSS Modules support, see https://stackoverflow.com/questions/59347628/nuxtjs-with-css-modules-through-vue-style-loader-causes-unexplainable-error).
Anyway, I am not able to access the process variable from a Vue component (as to be seen in /pages/index.vue ).
Even after adding a

data() {
    return {
        title: process.env.TITLE,
        description: process.env.DESCRIPTION,
    };
}

block to the export default of that page and changing the variables in the curly brackets accordingly.
My .env is as follows:

TITLE=Here's a great title!
DESCRIPTION=Here is a very, very long description

What am I doing wrong?

Hi

In my project, I needed to use 2 .env files, like:
.env.development
.env.production

Using the main module, only get the default .env file. How I get the correct .env in correct environment?

Is it possible to merge env files? For example, I have .env and .env.local files in my project. .env is the main file which is used in production mode. In development mode I want use the same .env file, but with overwriting some properties from .env.local file. How can i do this?

What problem does this feature solve?

In most places where dotenv is used system env vars override the dotenv vars, however dotenv-module does the exact opposite, swapping this around would give the expected result when using systemvars: true

What problem does this feature solve?

Run CircleCI on PRs

Version

v1.3.0

Reproduction link

https://couldnt-get-codesandbox-to-work

Steps to reproduce

I'm using yarn 1.17.3 and dotenv-module 1.3.0. (problem also occurs on npm)

Install those and try using systemvars: true. No vars will be loaded.

What is expected ?

This is what I get when building the dist/index.js file myself, which is OK:

  if (options.systemvars) {
    Object.keys(process.env).map(function (key) {
      if (!(key in envConfig)) {
        envConfig[key] = process.env[key];
      }
    });
  }

What is actually happening?

But this is what I get when installing the package:

  if (options.systemvars) {
    Object.keys(process.env).map(function (key) {
      if (!key in envConfig) {
        envConfig[key] = process.env[key];
      }
    });
  }

The condition always returns false and no vars are loaded.

Can you update this section: https://github.com/nuxt-community/dotenv-module#using-env-file-in-nuxtconfigjs? You are showing a commonjs approach but the latest version of nuxt, the nuxt.config.js uses an ESM approach.

When I use .env in vue projects I can choose which .env I want to use when I build the app. How I can do the same using nuxt dotenv-module?

What I already tried:
create a new scripts passing NODEENV without success "scripts": { "staging": "NODEENV=staging nuxt build",
}

What I should do to use multiple .env files for each environment?

Hello. I want to use global environment variables in my .env file like that:
APIURL=${APIURL}

The variable declaration is higher (in docker-compose.yml).

The value must be an url. But in process.env on the client side I see not parsed string:
console.log(process.env.APIURL) // ${APIURL}

How can I set values in .env correctly? Thank you for your help.

What problem does this feature solve?

Currently, if the only option is specified with an empty array, default logic is used and all values are placed into context.env and thus provided to the client.

I think that an empty array should signal that I do not want anything copied into context.env. If I do not specify an only option/array at all, I would expect the default behavior to apply and all values would be placed into context.env.

As a workaround, I specify a name in the array that doesn't correspond to any key:

['@nuxtjs/dotenv', { only: ['nothing'] }],

Related, I agree with this comment on #7 that there should be a warning that all values are available on the client unless only is used.

What does the proposed changes look like?

This configuration

['@nuxtjs/dotenv', { only: [] }],

results in nothing in .env going into context.env.

Version

1.3.0

Reproduction link

http://no.link

Steps to reproduce

1. yarn add @nuxtjs/dotenv
2. edit nuxt.config.js (modules property): https://pastebin.com/13Btdxyt
3. add some var to .env like this: SOMEKEY=SOMEKEYVALUE
4. try to output value of process.env: https://pastebin.com/K4HAAuJq

What is expected ?

output of .env file vars array

What is actually happening?

empty object "{}"

nuxt version "nuxt": "^2.0.0",

Version

1.3.0

Reproduction link

https://github.com/beardedpayton/paytonburdette.com-v2

Steps to reproduce

Install module

npm i nuxtjs/dotenv

** cant include the @ symbol here, it thinks I'm trying to tag a user in the issue

Require module in nuxt.config.js

require('dotenv').config()

Add module to modules array in nuxt.config.js

modules: ["@nuxtjs/dotenv"]

Use "module in codebase with process.env.ENVVARNAME

What is expected ?

Works as expected locally. I can read from my .env file fine.

When deploying to Netlify and using build environment variables, I should be able to read from those variables within my project.

What is actually happening?

I cannot read variables from my build environment variables established with Netlify. I can only read from them if a .env file is present.

Hi,

I tried to use nuxt-dotenv with fileaname custom options like that:

modules: [
    ['@nuxtjs/dotenv', {
      filename: '.env.dev',
  }],
  ],

It's working fine in my app but not in my nuxt-config.js
I import dotenv at the top:

require('dotenv').config()

Before that I had to add the dotenv dependency to my package.json.
But the custom .env file wasn't read. Only .env is working.

I have .env file in my root Nuxt.js project but the variables are not read into process.env. ž

I have added the module following the instruction here https://github.com/nuxt-community/dotenv-module. Module looks to be loaded properly but process.env is empty object.

Any idea why?