Nuxt.js: Can't use process.env.SOME_VAR client-side without redefining it in nuxt.config.js

[WouterFlorijn]

What problem does this feature solve?

I'm using environment variables to configure my web app for different environments. Server-side, everything works fine, but client-side, using process.env.SOME_VAR results in undefined.

A workaround is to redefine all environment variable names in nuxt.config.js like so:

...
env: {
  VAR1: process.env.VAR1,
  VAR2: process.env.VAR2,
  VAR3: process.env.VAR3,
},
...

I don't see why it should be necessary to do this. It only results in needless duplication. The only use for this is setting defaults, but I don't understand why the environment variables aren't always available client-side.

What does the proposed changes look like?

All the environment variables should be available client-side without explicitly defining them in nuxt.config.js, though it should be possible to override them through nuxt.config.js for both client- and server-side.

_{This feature request is available on Nuxt community (#c9992)}

[rchl]

Environment variables often hold secrets. Exposing all environment variables to the client would be a security issue.

[WouterFlorijn]

@rchl fair point. I don't store any secrets myself. Would it be an idea to allow a less verbose option, where the env would be an array of variable names that should be mapped to the client directly?

env: ['VAR1', 'VAR2', 'VAR3'],

[danielroe]

@WouterFlorijn Also see nuxt-env.

[danielroe]

I think it would be easy enough to create code to do this for yourself:

env: ['VAR1', 'VAR2', 'VAR3'].reduce((env, v) => {
  env[v] = `process.env.${v}`
  return env
}, {}),