#title Weekly Vue News #93 - Effortless Handle Asynchronous Components With Suspense #preview Ready for your weekly Vue & Nuxt dose?
Effortless Handle Asynchronous Components With Suspense
Hi 👋
It's me, your friendly neighborhood Vue.js and Nuxt.js enthusiast, and I'm super excited to share the latest updates with you.
Guess what? I'm currently in discussions with
But that's not all. In this issue, I'm sharing a valuable Vue tip about Suspense and I've curated some fantastic content from across the web on Vue.js, Nuxt.js, and web development in general.
By the way: Please reply to this mail if your Antivirus still marks my website as phishing or malicious.
Have a lovely week ☀️
To support me:
- 😘 Recommend the newsletter to your friends: it really helps!
- 💸 Sponsor the newsletter
- 🧵 Retweet the latest Twitter thread
- 📨 Reply to this email: feedback is welcome
<Suspense> is an experimental feature. It is not guaranteed to reach stable status and the API may change before it does.
In the world of modern web development, delivering seamless user experiences is of utmost importance. Asynchronous components, which load data or resources dynamically, play a crucial role in achieving this goal.
Vue 3 introduces an interesting feature called Suspense to effortlessly handle asynchronous components. You can use it to show a loading state while all async dependencies in the nested component tree are being resolved.
Without Suspense
For this article, let's use the following component hierarchy for demonstration purposes:
1 <Dashboard>
2 ├─ <Profile> (async component)
3 └─ <FetchComponent> (component with async setup())
We have a Dashboard component that includes two child components:
Profile: This component isloaded asynchronously FetchComponent: This component fetches data usingasync/awaitwithin<script setup>
Each of the child components has its loading state, they are visible if the component is loaded:
The code for this demo is available at StackBlitz:
As you can imagine this can harm the user experience if you see multiple loading spinners on the page and content displayed at different times.
Let's take a look at how <Suspense> is trying to solve that problem.
With Suspense
The <Suspense> component enables us to display top-level loading & error states while waiting for nested async dependencies to be resolved:
1 <template>
2 <Suspense>
3 <!-- Component with nested async dependencies -->
4 <Dashboard />
5
6 <!-- Loading state via #fallback slot -->
7 <template #fallback> Loading... </template>
8 </Suspense>
9 </template>
<Suspense> has two slots: #default and #fallback. Both slots only allow for one immediate child node.
Our demo application now behaves this way using <Suspense>:
The <Suspense> component has two states: pending and resolve.
When <Suspense> is first rendered, it will display its default slot content in memory. If any asynchronous dependencies are encountered, it will transition to a pending state. While in the pending state, the fallback content will be shown. Once all the encountered asynchronous dependencies are resolved, <Suspense> enters a resolved state and displays the resolved default slot content.
If no async dependencies were encountered during the initial render, <Suspense> will directly go into a resolved state.
<Suspense> currently does not provide error handling via the component itself.
However, you can use the errorCaptured option or the onErrorCaptured() hook to capture and handle async errors in the parent component of <Suspense>.
| 👉🏻 This release is focused on developer experience improvements - in particular, SFC script setup usage with TypeScript. |
| 👉🏻 This article focuses on a Vue 3 app in an Nx monorepo using Vite |
| 👉🏻 Nx provides a robust architecture for generating code by enforcing coding styles and boundaries across the monorepo. |
| 👉🏻 Nuxt 3 provides powerful configuration options, allowing you to adapt your application to different use cases. |
| 👉🏻 This article explores the potential of Vue.js with Bit. |
| 👉🏻 Bit is an extensible tool for component-driven development. It allows you to create, maintain, and deliver independent Bit components. |
| 👉🏻 Evan answers some quick lightning round questions. |
| 👉🏻 A Vite plugin designed to enhance the Vue developer experience (inspired by Nuxt 3 DevTools) |
| 👉🏻 Features: Pages, Components, Assets, Timeline, Routes, Pinia, and more... |
| 👉🏻 Inspired by react-email |
| 👉🏻 It allows you to create templates using the Vue framework, with components that help to build templates easily and fast. |
| 👉🏻 The techniques covered range from determinism, to testing, to writing better comments, to type-system techniques, to general architectural best-practices. |
| 👉🏻 This article highlights several tips, including how to navigate directories efficiently, how to use command history and autocompletion, and how to streamline workflows with aliases and functions. |
| 👉🏻 There are some best practices to follow when prompting Copilot, such as providing high-level context first, providing specific details, utilizing examples, and more. |
| 👉🏻 Unlighthouse scans your entire site using Google Lighthouse, with a modern UI, minimal config and smart sampling. |
| 👉🏻 It takes two minutes on average and is open source. |
| 👉🏻 A handy calculator app for macOS. |
| 👉🏻 It allows you to describe tasks naturally and instantly get an accurate answer. |
| 👉🏻 For example, "$20 in euro - 5% discount" or "today + 2 weeks". |
Until next week,
Holzapfelkreuther Str. 19, 81375 Munich, Germany
