Skip to content

Suspense

Suspense can wait on async setup / async components and show fallback content. This lesson covers practical patterns, syntax, and mistakes to avoid.

Async Dependencies with Suspense

Suspense can wait on async setup / async components and show fallback content.

Still evolving in some ecosystems — use deliberately.

<Suspense>
  <AsyncView />
  <template #fallback>Loading…</template>
</Suspense>

Suspense with fallback slot.

Async Setup

Top-level await in script setup makes a component async.
  • Handle loading and errors.
  • Keep composables tested.
  • Prefer TypeScript when you can.
  • Measure before optimizing.

Suspense Cheatsheet

Quick reference for patterns covered in this lesson.

Item Example Purpose
fallback slot UX
async setup await Trigger
errorBoundary pair Recover
nested suspense Care
SSR Nuxt patterns Framework
experimental notes track RFCs Docs

Error Handling

Pair Suspense with error boundaries / onErrorCaptured.

Common Mistakes

  • Assuming Suspense replaces all loading flags.
  • No error UI.

Key Takeaways

  • Suspense shows up often in Vue apps.
  • Practice with a demo.
  • Prefer clear APIs.
  • Read official docs for edge cases.

Pro Tip

For many apps, explicit loading refs remain clearer than Suspense.

You now understand suspense. Next, continue with Performance to keep building your Vue skills.