How to use Firebase Environment Variables in Nuxt Config

I am trying to separate Firebase Creds from my Nuxt Config file. But it is saying NuxtServerError Your API key is invalid, please check you have copied it correctly. It works fine when I use my creds directly into my nuxt config (without environment variables).

I am using @nuxtjs/firebase module and this is my config: firebase ssr/universal auth documentation

  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://github.com/nuxt-community/dotenv-module
    '@nuxtjs/dotenv',
    '@nuxtjs/firebase',
    '@nuxtjs/pwa',
  ],

  firebase: {
    config: {
      apiKey: process.env.apiKey,
      authDomain: process.env.authDomain,
      databaseURL: process.env.databaseURL,
      projectId: process.env.projectId,
      storageBucket: process.env.storageBucket,
      messagingSenderId: process.env.messagingSenderId,
      appId: process.env.appId,
      measurementId: process.env.measurementId
    },
    services: {
      auth: {
        ssr: true
      }
    }
  },
  pwa: {
    // disable the modules you don't need
    meta: false,
    icon: false,
    // if you omit a module key form configuration sensible defaults will be applied
    // manifest: false,

    workbox: {
      importScripts: [
        // ...
        '/firebase-auth-sw.js'
      ],
      // by default the workbox module will not install the service worker in dev environment to avoid conflicts with HMR
      // only set this true for testing and remember to always clear your browser cache in development
      dev: false
    }
  }

I have stored all my creds in .env file in my app(with the quotations mark).

apiKey="my_key"
authDomain="my_domain"
databaseURL="my_db_url"
projectId="my_project_id"
storageBucket="my_storage_bucket"
messagingSenderId="my_sender_id"
appId="my_app_id"
measurementId="my_measurement_id"

Is there any way to separate my creds from nuxt config file (I am committing my nuxt config file on my github).

PS: my environment variables can be console logged from my app component using process.env.apikey and others. I also have @nuxtjs/dotenv package installed.

Answer

That is a @nuxtjs/dotenv issue (I think).

Regarding to Using .env file in nuxt.config.js documentation, for that case you should use directly dotenv module instead of @nuxtjs/dotenv.

nuxt.config.ts sample

import dotenv from 'dotenv'

let path =
  process.env.NODE_ENV === 'production'
   ? '.env'
   : '.env.' + process.env.NODE_ENV

dotenv.config({path})

export default {
 ....
 // Now, you are able to use process.env.<property_from_dotenv>
 env: {
  apiKey: process.env.apiKey,
  authDomain: process.env.authDomain,
  databaseURL: process.env.databaseURL,
  projectId: process.env.projectId,
  storageBucket: process.env.storageBucket,
  messagingSenderId: process.env.messagingSenderId,
  appId: process.env.appId,
  measurementId: process.env.measurementId
 },
}

nuxt.config.js sample

const dotenv = require('dotenv');

let path =
  process.env.NODE_ENV === 'production'
   ? '.env'
   : '.env.' + process.env.NODE_ENV

dotenv.config({path})