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

The first video in a series on Vue 3 Suspense shares insight on using Vue 3 for asynchronous data loading with UI fallbacks and error catching. Suspense helps control when view sections are ready for rendering and makes it easy to show fallback content during loading, improving application performance and user experience.

This walkthrough breaks down how to set up data fetching and load data asynchronously with VueJS 3. This video also breaks down the interactions between Suspense Boundaries, Views, Components in an application, capturing errors, and more.

0:00 Intro

0:33 What is Vue 3 Suspense

1:09 What is a Suspense Boundary in Vue 3.0

3:45 Progressive Application Loading

4:42 Why Fetch and Suspense

4:55 How to Use Vue 3 Suspense

6:05 Fetching data with the Vue 3 Composition API

8:35 Vue JS 3 Fragments and Other Features

10:41 Showing a Fallback Component with Suspense

12:15 Error-proofing API Communication

14:40 Error Boundaries and Capturing Errors with Suspense

17:20 Displaying Error Messages

GitHub repository with source code:

Grgur on Social Media:

💼 Ready to transform your career? Modus is expanding and hiring!! Check out these positions and apply today!

Business Intelligence Engineer

Front End Engineer (JavaScript, Vue)

Full Stack Engineer (React, Node, AWS)

Full Stack Engineer - LeaseUp Web Application - (React,Python,AWS)

Front End Engineer (React,Ionic)

Front End Enginer (Angular, Ionic)

QA Automation (Python/Pytest)

Modus Create is a disruptive consulting firm that helps companies transform for success in the digital future through a unique collaborative engagement model that focuses on strategy, product design/build, user experience, company culture, and process change.

#Vue3 #Vue3Suspense #Vue3Beta #AsynchronousLoading #DataFetching

[MichaelTintiuc]

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

[solvedfyi]

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

[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!

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

[gnwolmgkqpcn]

thank you for sharing your passion for vuejs!!

[johnm]

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

[porkchopk]

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

[azbroo]

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 😀

[mclotos]

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

[yakut]

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

[ilooi]

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.

[hipertracker]

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]

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

[tbloom]

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.

[aram]

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.

[matiasgouiffes]

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

[memesnotmine]

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.

[GintsPolis]

Should suspense also work for store.dispatch?

[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