How to Fetch Data with Vue 3 Suspense, Fallbacks & Error Boundary

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

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

  • @MichaelTintiuc
    @MichaelTintiuc 4 ปีที่แล้ว +14

    Great job explaining a difficult topic. Loved the use of a hand allegory :D

    • @grgurgrisogono656
      @grgurgrisogono656 4 ปีที่แล้ว +2

      That's a relief, thank you, Michael. To be honest, I was afraid if it'd work. Suspense is one of those under-documented topics full of gotchas. Finding a way to describe it in a few minutes was tantalizing. I'm glad you liked it.

    • @Moduscreate
      @Moduscreate  4 ปีที่แล้ว

      Glad you liked it, Michael!

  • @solvedfyi
    @solvedfyi 4 ปีที่แล้ว +10

    Your pace is on point bruv.
    Your "explaining Vue 3 to 6 year old 2nd graders" approach gets me every time

    • @grgurgrisogono656
      @grgurgrisogono656 4 ปีที่แล้ว

      I really appreciate that feedback, bro 😉🙌🚀

  • @clustersnake
    @clustersnake 4 ปีที่แล้ว +8

    I'm Venezuelan and I'm trying to improve my knowledge any way I can and this whole set of videos is just mind blowing! your english is so easy to understand! Thank you very much!

    • @Moduscreate
      @Moduscreate  4 ปีที่แล้ว

      Thank you for watching!

    • @grgurgrisogono656
      @grgurgrisogono656 4 ปีที่แล้ว

      Thank you for your feedback Eloy! I'm glad you like the videos. Cheers to Venezuela!

  • @GergiH
    @GergiH 3 ปีที่แล้ว +1

    Finnaly a video which shows properly how to fetch and present data with Vue 3. I was pulling my hair out for a day straight because I couldn't figure out how to pass values to the template with "this" in setup() and "data: () => { ... }", which didn't work. I needed "ref" and simply return those values from the setup().

  • @azbroo3748
    @azbroo3748 4 ปีที่แล้ว

    You are genius... I came here searching of one other problem but I watched whole video and Subscribed.

  • @user-gnwolmgkqpcn15829
    @user-gnwolmgkqpcn15829 3 ปีที่แล้ว +1

    thank you for sharing your passion for vuejs!!

  • @johnm8358
    @johnm8358 4 ปีที่แล้ว +3

    just found this channel... you have a great teaching style!

    • @grgurgrisogono656
      @grgurgrisogono656 4 ปีที่แล้ว

      I appreciate that very much! Thanks for watching :)

  • @porkchop2k
    @porkchop2k 4 ปีที่แล้ว +2

    Great analogy. Made it very clear. Keep up the amazing work on the videos.

  • @angelcabrera4560
    @angelcabrera4560 4 ปีที่แล้ว +2

    Simply brutal! Absolutely awesome😱

    • @grgurgrisogono656
      @grgurgrisogono656 4 ปีที่แล้ว

      Thank you for all the love and support for this channel, Angel! It's great to be a part of a community with fantastic people like yourself 🙌

  • @StellarStoic
    @StellarStoic ปีที่แล้ว

    I liked how you explained the finger loading 😀

  • @yakut54
    @yakut54 ปีที่แล้ว

    Спасибо за науку, мужик! Какой плагин используешь для разворачивания vue компонента на 5.42?

  • @hipertracker8349
    @hipertracker8349 ปีที่แล้ว

    Can you handel Error Boundary for a. nested component having a template error? I use a dynamic nested component and its template is built from the the string passed as props. This string may be invalid.

  • @NickEdgington
    @NickEdgington 3 ปีที่แล้ว

    I had an issue in that users was not exported correctly. I need to add it to the data block

  • @i3looi2
    @i3looi2 3 ปีที่แล้ว +1

    Suspense seems like a lot of trouble , to achieve stuff I manually achieve.
    I get it: it's nice to be standardize something it's commonly used in Vue components, but seems a lot of trouble to properly implement it and an even lot more problems to debug it.
    I usually have cases with nested "suspenses" cases.
    However, nicely explained. And keep the "issues" on video, so people also understand what might go wrong and relate.

  • @ngenohillary266
    @ngenohillary266 4 ปีที่แล้ว +1

    Great explanation :)

  • @slunkeh
    @slunkeh 4 ปีที่แล้ว

    Fantastic explanation!

  • @jerwinmathewaton6286
    @jerwinmathewaton6286 2 ปีที่แล้ว

    great explanation

  • @mclotos
    @mclotos 4 ปีที่แล้ว +3

    WOW! This solution will significantly save time and amount of code!

  • @armanuddinghazi2039
    @armanuddinghazi2039 ปีที่แล้ว

    Amazing 👍🙌

  • @iOfSauron
    @iOfSauron 3 ปีที่แล้ว

    These vids are great! Thanks so much.

  • @gamerx1133
    @gamerx1133 4 ปีที่แล้ว

    How to upload file in vue using flash APIs?

  • @GintsPolis
    @GintsPolis 4 ปีที่แล้ว

    Should suspense also work for store.dispatch?

    • @GintsPolis
      @GintsPolis 4 ปีที่แล้ว

      Yes. It did work. Only question now, how to use same at refresh :)

    • @grgurgrisogono656
      @grgurgrisogono656 4 ปีที่แล้ว

      Yes sir, as long as the action returns a promise (e.g. await).

  • @tbloom5328
    @tbloom5328 4 ปีที่แล้ว +1

    Just amazing content right here, and it just doesn't stop with this video, all of your videos. Thanks!
    Something that is lacking, not on your playlist specifically just in general, is a video that covers Typescript & Vue 3 beyond the "hello world" examples. How to declare a interface for a api endpoint, how to set custom interface as an object/array to a prop ect... Those kind of more "realistic scenarios". I say this here because I believe you could do it in a superb way 🙂. If you have one that is paid(?) please let me know!
    Again, thanks for your time making the videos, saved me a lot of reading.

  • @matiasgouiffes1954
    @matiasgouiffes1954 4 ปีที่แล้ว +1

    Could anybody tell me how this is better than showing loading states and errors without suspense? I just can't see it

  • @aram5642
    @aram5642 3 ปีที่แล้ว

    Great tutorial. Big shout out for dealing with errors - which is not something that every tutorial cares about. Which also brings me to a question - would you record a video on unit tests. I am a newbie to Vue, so I can only guess there is some testing library for that. I would appreciate a walkthrough anyway :) Thank you.

  • @sapyati
    @sapyati 3 ปีที่แล้ว

    Great job

  • @memesnotmine892
    @memesnotmine892 4 ปีที่แล้ว

    Hi sir, I have a problem using async on setup(). The template does not render even if I use suspense boundary. And every time I click on new route(link) it gives me this "Cannot read property 'parentNode' of null" error.

    • @grgurgrisogono656
      @grgurgrisogono656 4 ปีที่แล้ว +1

      Hard to say why. Do you have a repo you could share?

    • @memesnotmine892
      @memesnotmine892 4 ปีที่แล้ว

      @@grgurgrisogono656 github.com/aljohn-ma/vue-suspense here sir. Can I router-view inside a suspense boundary?

    • @grgurgrisogono656
      @grgurgrisogono656 4 ปีที่แล้ว +2

      @@memesnotmine892 You can but there's a catch. Due to recent changes in Suspense, you can no longer do this
      The way to do wrap router in Suspense is similar to how transitions are done:

    • @memesnotmine892
      @memesnotmine892 4 ปีที่แล้ว

      @@grgurgrisogono656 Thank you sir. This is a big help. Been stucked with this problem for almost a day. I hope more tutorials will come from you. I enjoy watching all of it.

    • @grgurgrisogono656
      @grgurgrisogono656 4 ปีที่แล้ว

      @@memesnotmine892 Thank you so much for supporting our work :)

  • @bhaidar
    @bhaidar 4 ปีที่แล้ว

    Hey! What if the component needs to load a single user by ID. The ID is a prop to the component. Would Suspense still work here? Thanks

    • @aicaramba1988
      @aicaramba1988 4 ปีที่แล้ว +1

      yeah it will as long as it is an asynchronous component e.g. async setup()

  • @furkanulutas
    @furkanulutas 3 ปีที่แล้ว

    Great! thanks.

  • @frontendtutorials7821
    @frontendtutorials7821 ปีที่แล้ว

    amazing

  • @merdanozdogan5296
    @merdanozdogan5296 4 ปีที่แล้ว +1

    Thank u 🙏

  • @Irnovi27
    @Irnovi27 3 ปีที่แล้ว

    Cool. It's been almost 1 year, why have I just watched this.

  • @AbbasZaidi-in
    @AbbasZaidi-in 3 ปีที่แล้ว +1

    simply love u .

  • @junaidjahan6864
    @junaidjahan6864 ปีที่แล้ว

    Perfect

  • @kid_rz
    @kid_rz 4 ปีที่แล้ว

    10:54 Mind-blowing

    • @grgurgrisogono656
      @grgurgrisogono656 4 ปีที่แล้ว

      Vue 3 is very impressive, isn't it!

    • @kid_rz
      @kid_rz 4 ปีที่แล้ว +2

      @@grgurgrisogono656 make more vid pls. ♥️

    • @grgurgrisogono656
      @grgurgrisogono656 4 ปีที่แล้ว

      @@kid_rz More coming your way :) Thank you for your support!

  • @heyyy4987
    @heyyy4987 4 ปีที่แล้ว

    nice.. enjoing

    • @Moduscreate
      @Moduscreate  4 ปีที่แล้ว

      Glad you're enjoying this content. Thank you for sharing! 🙌

  • @gosnooky
    @gosnooky 4 ปีที่แล้ว +1

    Like your videos, man. Where are you from? I can't place the accent.

    • @grgurgrisogono656
      @grgurgrisogono656 4 ปีที่แล้ว +1

      Why, thank you 😊 I'm from Croatia. Does that help place it? ☺️

    • @gonzoartemis2503
      @gonzoartemis2503 4 ปีที่แล้ว

      I also struggled to get to know that. I've assumed that Grgur might be an american of Andorran 🇦🇩 origins.

  • @baseerx
    @baseerx 4 ปีที่แล้ว +1

    Sir please all the code on github we want to have the code..you have explained vue 3 in a way more beautiful way..please upload the code github and let me know

    • @grgurgrisogono656
      @grgurgrisogono656 4 ปีที่แล้ว +1

      Thanks for all the love Baseer! Take a look at this repo: github.com/moduslabs/vue3-suspense

    • @baseerx
      @baseerx 4 ปีที่แล้ว

      Sir,below link keeps whole 9 videos code or just it has suspense section code? I need whole!

  • @Tarabass
    @Tarabass ปีที่แล้ว

    I just hate the auto import lol. Also in Nuxt. I think we have more overview on wat is coming from where if you just add an import yourself. And most IDE's will add the import statement for you as you use a not imported instance. Oh, and creating a custom component with the name "Suspense" will overwrite the vue component. So be aware of that.

  • @rajikkali2381
    @rajikkali2381 2 ปีที่แล้ว

    Vue3 auto-imports suspense, but not ref and reactive which you use constantly. It's things like this that make me stick with the Options API.

  • @atilacamurca
    @atilacamurca 4 ปีที่แล้ว

    You can simplify the offline testing by emulating it with Chrome. developers.google.com/web/tools/chrome-devtools/network/reference#offline

    • @grgurgrisogono656
      @grgurgrisogono656 4 ปีที่แล้ว

      True that, but I wouldn't be able to download the app from the local server, either. This way I enabled the internal communication and disabled internet. Also, it was fun 🤓

  • @ward7576
    @ward7576 ปีที่แล้ว

    Good content, but that's the worst analogy I've heard xD

  • @johnstorm589
    @johnstorm589 2 ปีที่แล้ว

    The starting example gets a thumbs down from me

  • @elmenikmati
    @elmenikmati ปีที่แล้ว

    The worst explanation