This Vue Mistake Was A Real Problem

Подписаться 122 тыс.

Просмотров 3,6 тыс.

50% 1

This Vue.js issue with Nuxt and environmental variables with runTime config really tripped me up. In this video I look at a few ways to fix this and not get a hydration mismatch.
👉 Check out my last video on TypeScript end-to-end
• TypeScript From End-To...

👉Sign up for my mailing list and get neat stuff!
bit.ly/3Umk7sW
👉 Need some help with a project, level up your skills, React, Next, Vue, or Nuxt? Check out my 1-on-1 mentoring!
mentors.to/erik
Links:
nuxt.com/docs/guide/going-fur...
nuxt.com/docs/guide/directory...
• Nuxt's runtimeConfig -...
0:00 What is the problem
02:38 How to solve this problem with VITE_
03:41 Using runTimeConfig
05:10 The problem with runTimeConfig
06:13 How to solve the runTimeConfig problem

Опубликовано:

6 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 19

@ProgramWithErik 4 месяца назад

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

@AdamRobertson 4 месяца назад

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 4 месяца назад

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 4 месяца назад

Nice tip!

@iUmerFarooq 4 месяца назад

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

@CabbageShop 4 месяца назад

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

@ProgramWithErik 4 месяца назад

Yeah I suppose it could, but secrets are usually strings

@MartinMasevski 4 месяца назад

Went through the same thing and learned the hard way ❤

@ProgramWithErik 4 месяца назад

Thanks!

@yabuking84 4 месяца назад

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

@ProgramWithErik 4 месяца назад

It would be process.env.SECRET the variable name

@swildermuth 4 месяца назад

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

@ProgramWithErik 4 месяца назад

Little of A a little of B

@thedawg666 4 месяца назад

VITE not VEET

@ProgramWithErik 4 месяца назад

You are wrong

@thedawg666 4 месяца назад

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

@Tarabass 4 месяца назад

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 4 месяца назад

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 4 месяца назад

@@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..