Nuxt RuntimeConfig ignore .env file

[minute-med]

Hey, thanks for the cool template !

While using it encountered an issue where apparently the runtime configuration don't read the content of the my .env file. Here is a little description

problem: When i put an environement variable in [project-root]/src/renderer/.env and assign its value to a property of the PublicRuntimeConfig object in nuxt.config.js i'm then unable to retrieve the value of this property in the $config variable of my .vue conponent.

How to reproduce:

npm install -g vue-cli vue init michalzaq12/electron-nuxt <project-name>

Install dependencies and run your app cd <project-name> yarn install

create .env file in [project-root]/src/renderer/.env and set an env variable ASSETS_URL=http://assets.com/

edit file nuxt.config.js to add PublicRuntimeConfig object as a property to the root of the config object

module.exports = {
  ssr: false,
  // target: 'static',
  publicRuntimeConfig: {
    assetsURL: process.env.ASSETS_URL || 'test',
  },
...

edit a .vue page component to print the $config.assetsURL variable

run project yarn run dev

Result:

the printed config variable show 'test'

Expected Result

the printed config variable should show "http://assets.com/"

Nuxt.js:2.15.4 Vue.js:2.6.12 Electron:12.0.5 Node:14.16.0 Chrome:89.0.4389.128 Platform:linux

[michalzaq12]

This problem is more related to Nuxt than to my template. Maybe Nuxt only reads the .env file from the project root. You can always use the old dotenv-module https://github.com/nuxt-community/dotenv-module and set the path to the .env file directly.

[minute-med]

This problem is more related to Nuxt than to my template. Maybe Nuxt only reads the .env file from the project root. You can always use the old dotenv-module https://github.com/nuxt-community/dotenv-module and set the path to the .env file directly.

Hi @michalzaq12 thanks for your feedback. The problem doesn't happen on nuxt alone so i was guessing there might be a little issue with your nuxt integration to electron about the runtimeConfig feature but i might be wrong.

I'll endup use the @nuxt/dotenv module if i can't figure it out but its doesn't feel right to use a module when there's a framework feature design for the same purpose.

EDIT: After digging a little, i found in the original nuxt srcs this file where i can see the dotenv config setup. https://github.com/nuxt/nuxt.js/blob/cd7b9ca5d885270b590c691a61f8ca65fe288be1/packages/config/src/load.js

function loadEnv (envConfig, rootDir = process.cwd()) {
  const env = Object.create(null)

  // Read dotenv
  if (envConfig.dotenv) {
    envConfig.dotenv = path.resolve(rootDir, envConfig.dotenv)
    if (fs.existsSync(envConfig.dotenv)) {
      const parsed = dotenv.parse(fs.readFileSync(envConfig.dotenv, 'utf-8'))
      Object.assign(env, parsed)
    }
  }

in your template i found a file with similar code (nuxt config setup i guess) to the file in the link below but couldn't find the dotenv config. https://github.com/michalzaq12/electron-nuxt/blob/master/template/.electron-nuxt/renderer/nuxt.config.js

should i try to implement the same behaviour ?

[ghost]

I ran into a similar issue and ended up adding my env vars to the build.js and dev.js files directly, both located in .electron-nuxt directory.