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

[@MichaelTintiuc]

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

[@grgurgrisogono656]

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]

Glad you liked it, Michael!

[@clustersnake]

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]

Thank you for watching!

[@grgurgrisogono656]

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

[@GergiH]

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().

[@solvedfyi]

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

[@grgurgrisogono656]

I really appreciate that feedback, bro 😉🙌🚀

[@azbroo3748]

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

[@StellarStoic]

I liked how you explained the finger loading 😀

[@johnm8358]

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

[@grgurgrisogono656]

I appreciate that very much! Thanks for watching :)

[@user-gnwolmgkqpcn15829]

thank you for sharing your passion for vuejs!!

[@angelcabrera4560]

Simply brutal! Absolutely awesome😱

[@grgurgrisogono656]

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 🙌

[@i3looi2]

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.

[@porkchop2k]

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

[@grgurgrisogono656]

I appreciate the good vibes 🙌

[@mclotos]

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

[@tbloom5328]

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.

[@aram5642]

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.

[@yakut54]

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

[@jerwinmathewaton6286]

great explanation

[@armanuddinghazi2039]

Amazing 👍🙌

[@iOfSauron]

These vids are great! Thanks so much.

[@ngenohillary266]

Great explanation :)

[@slunkeh]

Fantastic explanation!

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

[@furkanulutas]

Great! thanks.

[@sapyati]

Great job

[@frontendtutorials7821]

amazing

[@AbbasZaidi-in]

simply love u .

[@NickEdgington]

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

[@Irnovi27]

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

[@matiasgouiffes1954]

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

[@junaidjahan6864]

Perfect

[@bhaidar]

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]

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

[@merdanozdogan5296]

Thank u 🙏

[@gamerx1133]

How to upload file in vue using flash APIs?

[@GintsPolis]

Should suspense also work for store.dispatch?

[@GintsPolis]

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

[@grgurgrisogono656]

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

[@gosnooky]

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

[@grgurgrisogono656]

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

[@gonzoartemis2503]

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

[@memesnotmine892]

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]

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

[@memesnotmine892]

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

[@grgurgrisogono656]

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

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

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

[@heyyy4987]

nice.. enjoing

[@Moduscreate]

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

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

[@kid_rz]

10:54 Mind-blowing

[@grgurgrisogono656]

Vue 3 is very impressive, isn't it!

[@kid_rz]

@@grgurgrisogono656 make more vid pls. ♥️

[@grgurgrisogono656]

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

[@baseerx]

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]

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

[@baseerx]

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

[@rajikkali2381]

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]

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

[@grgurgrisogono656]

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 🤓

[@johnstorm589]

The starting example gets a thumbs down from me

[@ward7576]

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

[@elmenikmati]

The worst explanation