This Vue Mistake Was A Real Problem

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 พ.ย. 2024

ความคิดเห็น • 19

  • @ProgramWithErik
    @ProgramWithErik  8 หลายเดือนก่อน

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

  • @AdamRobertson
    @AdamRobertson 8 หลายเดือนก่อน +14

    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
      @AdamRobertson 8 หลายเดือนก่อน

      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
      @ProgramWithErik  8 หลายเดือนก่อน +1

      Nice tip!

  • @iUmerFarooq
    @iUmerFarooq 8 หลายเดือนก่อน +4

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

  • @MartinMasevski
    @MartinMasevski 8 หลายเดือนก่อน

    Went through the same thing and learned the hard way ❤

  • @CabbageShop
    @CabbageShop 8 หลายเดือนก่อน

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

    • @ProgramWithErik
      @ProgramWithErik  8 หลายเดือนก่อน

      Yeah I suppose it could, but secrets are usually strings

  • @yabuking84
    @yabuking84 8 หลายเดือนก่อน +1

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

    • @ProgramWithErik
      @ProgramWithErik  8 หลายเดือนก่อน +1

      It would be process.env.SECRET the variable name

  • @swildermuth
    @swildermuth 8 หลายเดือนก่อน

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

    • @ProgramWithErik
      @ProgramWithErik  8 หลายเดือนก่อน

      Little of A a little of B

  • @thedawg666
    @thedawg666 8 หลายเดือนก่อน

    VITE not VEET

    • @ProgramWithErik
      @ProgramWithErik  8 หลายเดือนก่อน +3

      You are wrong

    • @thedawg666
      @thedawg666 8 หลายเดือนก่อน

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

  • @Tarabass
    @Tarabass 8 หลายเดือนก่อน +2

    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
      @Joachimbj 8 หลายเดือนก่อน +1

      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
      @Tarabass 8 หลายเดือนก่อน

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