How to load dynamical environment variables with Nuxt.js

The problem

Often we have some settings to store, like the url of the API, credentials, some other data. Often it is provided to an application in a form of environment variables.
A nice workflow might be like so:
commit->test->build docker image and push it to registry
And when running, you can configure prebuilt image using environment variables without rebuilding.

Seems perfect,right? You may have thought that using normal process.env.VARIABLE_NAME is enough. It is not.
During build time, webpack replaces process.env.VARIABLE_NAME with actual variable from build environment, making images not reproducible and not configurable.

Nuxt docs on environment variables seem to provide a nice solution for that problem, but actually it works absolutely the same way.
So how do we do it properly?

Solution

If we have an SSR app, we have two stages: build and launch stage.
At launch stage we should load our environment variables.

This is were vuex comes in handy.
We can use nuxtServerInit, which will be run on server bootstrap(it also runs on client, but we need server side variable only).

Now, to the code!

Edit: Nuxt.js 2.13+

In Nuxt.js 2.13+ you can use new Runtime config property. After configuring it in nuxt.config.js, you can access it anywhere via this.$config.

But there are still some quirks! If you want to use environment variables in vuex getters, then this.$config won't work.

So we still need to do the same process as described below, but replace process.env.NAME with this.$config.NAME!

Previous example (nuxt.js < 2.13)

Put this code in store/index.js file. Nuxt will activate vuex for you.
So, we define store state with the only variable env, being empty object by default, this way we store all needed variables in one object.

Our mutation is just changing env state.

And nuxtServerInit is doing all the job.
We check if we run from server, and if so, we simply run our mutation, loading environment variables using same process.env. It doesn't get replaced by webpack in that case.
We can also set default values using || 'default value'.
And then, in any place in your code, you can access environment variable using $store.state.env.VARIABLE.

Conclusion

This is a pretty simple and working way to load environment variables dynamically, encouraging proper CI/CD workflow with minimal maintenance issues.

I think that this example should be put in nuxt docs. Let's create a pull request? (:

This example, as the previous post, came from my work on my opensource project bitcart.
Contributions welcome!

bitcart / bitcart-store

Bitcart Store

Bitcart Store

This is the Bitcart Store.

It is created to provide a ready solution for merchants who need to bootstrap their stores quickly.

It is light and fast, always covering 100% of the Merchants API.

Live demo

Contributing

See CONTRIBUTING.md.

View on GitHub

(For example, any help with improving checkout design is highly appreciated)

I hope you found my article interesting, have a good day!

Comments

[Konstantin BIFERT]

Hi ! Does it work w/ full static generation ? I've tried basic yarn generate then FANCY_TOKEN="NICE_TOKEN" yarn start but it's empty... Could you please help ? :)

[MrNaif2018]

Hi! Of course it doesn't work neither in SPA nor in full static
Where would it get env variables from? Client browser? 😀
It works in SSR mode only, it's whole point is to be able to change some variables server-side after build. Full static mode just generates ready html for use with static hosting. It's just html files which can't use anything from the server. Same goes for SPA

[Konstantin BIFERT]

I actually achieved it with SPA without too much trouble (publicRuntimeConfig is dope simple to use in fact). :D
But yeah, it does probably not work in full static or maybe with some hacky stuff like this one: github.com/DreaMinder/nuxt-env-inj...

And yeah, I do agree that it's probably not feasible in full static for obvious reasons but who knows, it was maybe a cool way of handling this one.

Still thanks for the quick reply and have a great day. 😃

[Bachellerie Loic]

In the getters we have access to $nuxt.
Inside $nuxt, we have access to $config.

I use : $nuxt.$config.MY_VARIABLE

And I'm able to get the var I want from my .env variables

Don't forget to add your variable to the publicRuntimeConfig object :
//nuxt.config.js
publicRuntimeConfig: {
MY_VARIABLE: process.env.MY_VARIABLE,
}

//.env
MY_VARIABLE=test-my-variable

[MrNaif2018]

It is a Nuxt 2.13+ feature, there is an edit on the post pointing out to the docs. Thanks for showing it there nevertheless!

[Uhtred M.]

This don't work to me :(
I'm using Google Cloud Run!

Some help please!!!!

[MrNaif2018]

Hi! I can't help without any details. Maybe you have misconfigured your google cloud run settings, or used a reserved variable, or it works differently. I can't just guess. Please provide some more details if you want me to help you. By the way new versions of nuxt have runtimeConfig support out of the box.

[Uhtred M.]

Thank you,
I had already solved it.

I used the new config runtime

After 3 days looking for a solution 😅