VueFire on nuxt3 does not use runtime environment variables

[SamGeens]

Reproduction

Run vuefire with an at runtime api key does not work

Steps to reproduce the bug

1. Setup the config in nuxt.config.ts as follows:

  modules: [
    'nuxt-vuefire',
  ],

  vuefire: {
    auth: true,
    config: {
      apiKey: process.env.NUXT_PUBLIC_VUEFIRE_API_KEY,
      authDomain: process.env.NUXT_PUBLIC_VUEFIRE_AUTH_DOMAIN,
      projectId: process.env.NUXT_PUBLIC_VUEFIRE_PROJECT_ID,
    },
  },

2. Run the app with the environment variables

Expected behavior

I expect vuefire to use the NUXT_PUBLIC_VUEFIRE_API_KEY environment variable at runtime.

Actual behavior

The apps shows an empty screen. Which is the exact same behaviour as running the app without api key. Which suggests that the key can't be found at runtime.

Additional information

No response

[posva]

Have you check in that same file the env variables are present? You don’t need to hide those keys btw, they are put on the client code

[SamGeens]

@posva The env variables are present. Despite the fact that those keys are put in client code I want to set those keys with env vars at runtime. So I can use it on different environments.

But it seems the keys can only be set at build time and are not overwritten on runtime.

EDIT: A test repo can be found here

[posva]

I never saw this, sorry! You need to define them at build time as some of these are inline in the client bundle. I think the best way is to have multiple .env files like suggested in Nuxt docs

[SamGeens]

I indeed now include them at build time. The only downside is that all my other env variables are at runtime so all given in the environment the application runs in but I have to specify the firebase env's during build.

So while it currently works I was curious if there was a way to use them as runtime vars or that this might be a feature which will be supported in the future.

[posva]

It might be possible with public runtime config https://nuxt.com/docs/guide/going-further/runtime-config#example. I will try it out

[SamGeens]

That would be great! If you need a test project, mine is still available here.

[SamGeens]

@posva Have you been able to try it like you said?