Nuxt's runtimeConfig - The most common mistake

🤯 Throughout my projects, consultancies and code reviews I came across lots of interesting findings - also with regards to Nuxt's runtimeConfig feature. Repeatedly I noticed ONE big mistake though which you might do at this very moment in your project. In this video, explain what it is, why you shouldn't do it and how to use runtimeConfig correctly.
Key points:
👀 The most common runtimeConfig mistake
🔍 Why it will break during runtime
✅ How to resolve the issue
Links:
🔗 12 Factor apps: 12factor.net/
🔗 Basics around runtimeConfig: • Is Nuxt 3's runtimeCon...
🔗 Code: github.com/manniL/nuxt3-runti...
🔗 Docs PR for the mistake: github.com/nuxt/nuxt/pull/24612
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
Chapters:
00:00 Intro
00:52 Diving into the demo app
02:06 The actual mistake
03:20 No changes reflected - but why?
04:25 Solution and other non-working scenarios
05:40 Beyond creating content - Updating the docs!
06:23 Summary

[@TheAlexLichter]

Did you made that mistake so far? 👀

[@cybercowboy9214]

The env vars make me crazy.
Everything works fine on dev, but when deploy to prod, here where troubles come.
I Use kubernetes for deploy, and every time I have some problems with env variables, especially with modules.
My kubernetes has all env variables, but app cannot check them properly

[@erfrandarmawan]

Great video! Thank you for giving a great insight about env variable in nuxt🙏

[@TheAlexLichter]

You are welcome Erfran! 😊

[@marcusaureo]

Your vids are godsend, thank you man

[@TheAlexLichter]

You are more than welcome! Glad they help you ✌

[@neeqquu]

thanks:) will keep in mind in my future projects

[@TheAlexLichter]

Perfect 🙌

[@rodrigorubio3498]

Life saver! thank you.

[@Reagan_Dev]

Thank you!

[@TheAlexLichter]

My pleasure 🙏

[@pastamista1337]

OMG THANK YOU ❤

[@TheAlexLichter]

No problem ✅

[@kissu_io]

Time for me to update some of my answers on SO. :3

[@TheAlexLichter]

Props for doing that 🙌💚

[@thibaultbarolat-massole7190]

Thanks for clarification. I have one question though: How do you handle when to need runtime environment variable inside the nuxt.config.ts? Because useRuntimeConfig is not defined at this moment.

[@TheAlexLichter]

You usually don’t. Modules should provide a runtimeConfig support so you can change that.
Using env variables works fine in the nuxt config when only setting things on build though, so not when starting the app. But I’d suggest to go for runtimeConfig

[@lampofthestreet]

What is the intellisense for Nuxt that shows you it can be overridden?

[@TheAlexLichter]

Actually they are just Nuxts TS types (after the dev server ran with the changes)!

[@mohamedslimani2761]

thank you

[@TheAlexLichter]

You're welcome 😊

[@tolgabeyazoglu536]

good thank you

[@TheAlexLichter]

You are welcome!

[@Revadike]

Idk, to me it seems perfectly valid to have these values baked in / static after building, while still allowing the option to override them if needed with a special env var.

[@TheAlexLichter]

It is valid to have them baked in, no doubts. But then you can either use simple static strings in the config *or* the same env variable for overriding anyway ☺️

[@rayan_azzam]

I used it for api base url and some fixed global variables 😊

[@TheAlexLichter]

Perfect 👍🏻

[@mgmitko]

This was an absolute garbage of a decision by the Vue/Nuxt team. This showed me how detached they are from their user base, ignoring everyone on Nuxt v2 and making it extra hard to migrate

[@TheAlexLichter]

Why does it make migration difficult?