Handling asynchronous components with <Suspense>

Handling dynamic data loading is never easy. In fact, when data is static and hardcoded, displaying the information takes no effort, as the data is available on first render, but when the data needs to come from an outside source, such as a database or a third-party API, then the complexity increases. When loading information asynchronously, the data is not available on the first load, forcing us to handle a “loading state” until the data is available, or having to display an error state if the loading event has failed to complete.

To prevent having to handle state changes in multiple components and code duplication, Vue.js introduced a globally available built-in component called <Suspense>.

With <Suspense>, we can orchestrate all loading states at once with very clean syntax. In the following section, we are going to first understand what makes a component asynchronous and then understand how this...