Javascript is required
Weekly Vue News Logo Weekly Vue News
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 5px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #93 - Effortless Handle Asynchronous Components With Suspense #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #93

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 Vue School about an exciting opportunity, and I can't wait to spill the beans once everything is finalized. So, make sure to stay tuned for the details.

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:

Vue Tip: Effortless Handle Asynchronous Components With Suspense

<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:

2 โ”œโ”€ <Profile> (async component)
3 โ””โ”€ <FetchComponent> (component with async setup())

We have a Dashboard component that includes two child components:

  • Profile: This component is loaded asynchronously
  • FetchComponent: This component fetches data using async/await within <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:

โšก Open Demo

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:

2 <Suspense>
3 <!-- Component with nested async dependencies -->
4 <Dashboard />
6 <!-- Loading state via #fallback slot -->
7 <template #fallback> Loading... </template>
8 </Suspense>

<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>.

Curated Vue & Nuxt Content๐Ÿ“• Vue 3.3 'Rurouni Kenshin' is available
๐Ÿ‘‰๐Ÿป This release is focused on developer experience improvements - in particular, SFC script setup usage with TypeScript.
๐Ÿ“• Supercharge Your Vue App Development with Nx Monorepo
๐Ÿ‘‰๐Ÿป 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.
๐Ÿ“• Configuration in Nuxt 3: runtimeConfig vs appConfig
๐Ÿ‘‰๐Ÿป Nuxt 3 provides powerful configuration options, allowing you to adapt your application to different use cases.
๐Ÿ“• Unlock the Power of Vue.js with Bit
๐Ÿ‘‰๐Ÿป 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.
๐Ÿ“น The Future of JavaScript & AI in Tech - Evan You at VueJSLive
๐Ÿ‘‰๐Ÿป Evan answers some quick lightning round questions.
๐Ÿ› ๏ธ Vue DevTools (Preview)
๐Ÿ‘‰๐Ÿป A Vite plugin designed to enhance the Vue developer experience (inspired by Nuxt 3 DevTools)
๐Ÿ‘‰๐Ÿป Features: Pages, Components, Assets, Timeline, Routes, Pinia, and more...
๐Ÿ› ๏ธ Vue Email
๐Ÿ‘‰๐Ÿป Inspired by react-email
๐Ÿ‘‰๐Ÿป It allows you to create templates using the Vue framework, with components that help to build templates easily and fast.
Quote of the weekCurated Web Development Content๐Ÿ“• How To Survive Your Project's First 100,000 Lines
๐Ÿ‘‰๐Ÿป The techniques covered range from determinism, to testing, to writing better comments, to type-system techniques, to general architectural best-practices.
๐Ÿ“• CLI tricks every developer should know
๐Ÿ‘‰๐Ÿป 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.
๐Ÿ“• A Beginner's Guide to Prompt Engineering with GitHub Copilot
๐Ÿ‘‰๐Ÿป 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
๐Ÿ‘‰๐Ÿป 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.
๐Ÿ› ๏ธ Numi
๐Ÿ‘‰๐Ÿป 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".
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
ยฉ 2023 All rights reserved.