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
@@cybercowboy9214 I am having the exact same problem. Since I don't plan on doing hot swaps in prod for these vars, I ended up using appConfig instead for all these build time vars. I have found it to be less fiddly to work with. But yeah, not really impressed either.
Thanks Alex! A penny drop moment: the reference to NUXT_ is about accessing a JSON object (LHS), rather than where it is often repeated on the RHS through process.env or such... what isn't 100% clear is what the fix of process.env.OTHER_ENV_VAR is if entering via .env file. I understand NUXT_PUBLIC_OTHER_ENV_VAR=123 is way to represent it in '.env file'... however in the nuxt.config.ts, should we use ' ' (empty string) or the process.env.NUXT_PUBLIC_OTHER_ENV_VAR? (or... as is sometimes done, omit the NUXT_PUBLIC part as it is already understood)?
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.
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 ☺️
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.
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
Hi! I am struggling with reading private env during/after deploying app to production on Google Cloud with Dockerfile. Our devops has injected all variables there and there are supposed to be properly injected but in Nuxt those variables are not available. Do you know this issue? And is it something that is the Nuxt problem to solve? All the best!
I'm not aware of any issues. Nuxt reads them independently of the platform. Did you check that you have the NUXT prefix and that they align with how you defined them in your nuxt.config.ts?
how can i use runtimeConfig outside of nuxt app? For example i have a couple of services that rely on the .env and they are outside vue component/composable, but i can only use useRuntimeConfig inside of a component or composable… is there a solution for this? Or any recomended approach.. Thank you!
@@TheAlexLichter got it, thanks for the reply! also is there any downside in using the .env variables directly in the service? example: const service = new Service(process.env.MY_VAR)
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 I am currently migrating a project from Nuxt2 to Nuxt3. It's an ecommerce project with multiple shops and hundreds of env variables. This is a nightmare task for me. I've spent an entire day on it, and still no where near the end of migration... This is crazy.
Did you made that mistake so far? 👀
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
@@cybercowboy9214 I am having the exact same problem. Since I don't plan on doing hot swaps in prod for these vars, I ended up using appConfig instead for all these build time vars. I have found it to be less fiddly to work with. But yeah, not really impressed either.
Great video! Thank you for giving a great insight about env variable in nuxt🙏
You are welcome Erfran! 😊
Thanks Alex! A penny drop moment: the reference to NUXT_ is about accessing a JSON object (LHS), rather than where it is often repeated on the RHS through process.env or such... what isn't 100% clear is what the fix of process.env.OTHER_ENV_VAR is if entering via .env file. I understand NUXT_PUBLIC_OTHER_ENV_VAR=123 is way to represent it in '.env file'... however in the nuxt.config.ts, should we use ' ' (empty string) or the process.env.NUXT_PUBLIC_OTHER_ENV_VAR? (or... as is sometimes done, omit the NUXT_PUBLIC part as it is already understood)?
Time for me to update some of my answers on SO. :3
Props for doing that 🙌💚
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.
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 ☺️
thanks:) will keep in mind in my future projects
Perfect 🙌
Your vids are godsend, thank you man
You are more than welcome! Glad they help you ✌
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.
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
Hi!
I am struggling with reading private env during/after deploying app to production on Google Cloud with Dockerfile.
Our devops has injected all variables there and there are supposed to be properly injected but in Nuxt those variables are not available.
Do you know this issue? And is it something that is the Nuxt problem to solve?
All the best!
I'm not aware of any issues. Nuxt reads them independently of the platform. Did you check that you have the NUXT prefix and that they align with how you defined them in your nuxt.config.ts?
I used it for api base url and some fixed global variables 😊
Perfect 👍🏻
What is the intellisense for Nuxt that shows you it can be overridden?
Actually they are just Nuxts TS types (after the dev server ran with the changes)!
how can i use runtimeConfig outside of nuxt app? For example i have a couple of services that rely on the .env and they are outside vue component/composable, but i can only use useRuntimeConfig inside of a component or composable… is there a solution for this? Or any recomended approach.. Thank you!
Not really, you can’t directly. It needs the context of Nuxt/Nitro
You could pass the values when calling the fn/service, eg in a plugin or on demand
@@TheAlexLichter got it, thanks for the reply! also is there any downside in using the .env variables directly in the service? example:
const service = new Service(process.env.MY_VAR)
Mainly that you won't be able to change them at runtime (only during build)
How did you get your cli to work? I mean setting the env var's in the terminal
you can just set them, e.g. NUXT_MY_VAR=1 pnpm dev (windows might need cross-env).
*Or* just use an .env file 👍🏻
@@TheAlexLichter thanks I'm on windows though that's why
Try using cross-env then 👌🏻
thanks for the video, this helped me out
Glad it helped 🙏
Life saver! thank you.
No problem at all ☺️
Thank you!
My pleasure 🙏
OMG THANK YOU ❤
No problem ✅
thank you
You're welcome 😊
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
Why does it make migration difficult?
@@TheAlexLichter I am currently migrating a project from Nuxt2 to Nuxt3. It's an ecommerce project with multiple shops and hundreds of env variables. This is a nightmare task for me. I've spent an entire day on it, and still no where near the end of migration... This is crazy.
good thank you
You are welcome!
bingo, I made the mistake🙈
And now you won't anymore 👏🏻