Vue 3 (Suspense)

Vue 3 is the latest version of vue.it provides some new awesome features. Such as suspense, teleport, multiple v-model, composition API, composable functions, Better reactivity and etc. When we work with typescript and composition API our code will be more readable and good to reuse. So this article I am gonna explain suspense stuff. (with typescript and composition API).

What is suspense?

Mainly It is used for showing fallback content during loading response, and it helps control when view sections are ready for rendering. It renders the default/fallback component until the server fetches the data. Let's say when we create our web application most of the time we should need a loading indicator or progress bar for API calls, that time we are simply showing the loading indicator using the v-if property .but when we show the loading indicator in other components we have to use vuex and store the boolean property. In suspense, we don't need to use the store. we can easily achieve this using the suspense tag. Let’s go to the example.

I have created a sample vue 3 project with typescript and composition api. These are the npm packages for my project.

I have created two components App(parent component) and LoadingComponent (child component). So what I have done is, I have used sample JSON response data in the view. The Suspense component has two slots.

1. default Template=>Add a component here.
2. fallback template=>Display fallback content when loading

I have added LoadingTemplateComponent inside the default Template. This is where we are gonna get the response. until we get the response I have shown fallback content (“Loading….” ). When we use suspense tag we don’t need to import in the code.

I have added the fake api call inside the child component(LoadingComponent). I have used the Axios library for the rest operations. when we create a child component(LoadingComponent) setup method should be async. I have created the msgTextItem variable then assigned the response data to that variable then by using string interpolation I have displayed the JSON data in the view.

until the getItems method resolves, fallback content(“Loading…) will be loading.

after the promise resolved default template will work and the response data will be displayed.

When we work with API calls we should handle the error handling.onErrorCaptured is a composition API lifecycle hook. vue calls the onErrorCaptured() hook when an error from any descendent component is captured. below I added the lifecycle hook .whenever the lifecycle hook trigger we can get the error value and show it in the template.

Below you can see the error message and displayed in the view. This is the best way to handle errors.

Conclusion

Suspense is the best way to show loading screens(spinner, skeleton screens..).When we do some heavy operations in the backend. we have to wait on the client-side until the data retrieved so on the client-side we have to show some fallback content otherwise user can’t understand what is happening in the view. So Suspense is a good solution for this. There is another nice feature called Teleport. we will look at that one in the next article.