This Vue Mistake Was A Real Problem

[@ProgramWithErik]

How would you solve this problem? Also quick shout out to my mailing list! bit.ly/3Umk7sW

[@AdamRobertson]

You're still doing it a bit wrong. You should simply put a 'default' value in the nuxt.config, e.g. `myPublic: 'foo'`, this will then get automatically overidden if the corresponding env var exists at runtime, or use the given default if not. You don't need to reference `process.env` as long as you follow the naming convention.

[@AdamRobertson]

this has the nice added benefit of allowing the type to be inferred from the default given, e.g. `myNum: 123` should type `useRuntimeConfig().public.myNum` to a number in your vue file.

[@ProgramWithErik]

Nice tip!

[@iUmerFarooq]

Make some Backend content of Nuxt 3. And also make Vuejs and Nuxtjs tips in shorts on daily bases if possible!

[@MartinMasevski]

Went through the same thing and learned the hard way ❤

[@ProgramWithErik]

Thanks!

[@yabuking84]

Your env SECRET=somesecret, but on your server console it says process blah. Shouldnt that say process somesecret?

[@ProgramWithErik]

It would be process.env.SECRET the variable name

[@CabbageShop]

Interesting, only thing is don't you lose the type inference doing it that way?

[@ProgramWithErik]

Yeah I suppose it could, but secrets are usually strings

[@swildermuth]

Isn't this a Nuxt issue, not a Vue issue?

[@ProgramWithErik]

Little of A a little of B

[@thedawg666]

VITE not VEET

[@ProgramWithErik]

You are wrong

[@thedawg666]

@@ProgramWithErik well there you go , ive been calling it vite all along

[@Tarabass]

You are doing it wrong! Thereby it's better to delete this video if you ask me. In your nuxt config you put default values. In your env file you overwrite those values using the naming convention NUXT_VAR for private vars or NUXT_PUBLIC_VAR for public vars. Using those vars can be done with useRuntimeConfig() or useRuntimeConfig().public. useRuntimeConfig is the only composable you may use in api endpoints. Bonus, if you want to proxy use proxyRequest in your api endpoint with the secret and endpoint from your vars using useRuntimeConfig instead of routerules - > proxy..

[@Joachimbj]

I went through the exact same steps as he did when figuring out how to do it properly, so it was fun to see that I wasn't alone. I think the video is valueable since he's humble about the approach and the last piece of info about the defaults is in the comments 😊

[@Tarabass]

@@Joachimbj true. Maybe some edit that the solution is not in the video. FYI, the naming convention also counts for nitro vars like NITRO_PORT..