Vue3 Sync

Posted on  by admin
Vue 3 is coming with a some exciting new features.

Composition API is the hottest one at the moment but there are others that excite me as much as it. One of those new features is called Suspense and it really excites me about the benefits it brings.

You might have heard about it already but I will try to show some examples of the usage of Suspense and where it can be beneficial.

Suspense is a state of mental uncertainty, anxiety, of being undecided, or of being doubtful.

In a dramatic work, suspense is the anticipation of the outcome of a plot or of the solution to an uncertainty, puzzle, or mystery, particularly as it affects a character for whom one has sympathy.

Back to Vue, Suspense is a component, that you don't need to import or do any kind of setup, with two that allows you to render a #fallback while the main component you want to load is not ready.

Ok, it seems vague. I will try to give you an example of how it is used.

I also recommend you to take a look into its test cases, especially the first one to get familiar with it.

That is the basic blueprint of it and it tackles a really common use case: the v-if loading condition. I consider it the first benefit of Suspense, as now we've some standard way of dealing with this scenario.

Boussadjra Brahim