Suspense component là gì?

<Suspense> cho phép render fallback content trong khi async component đang resolve — xử lý async setup():

<Suspense>
  <template #default>
    <AsyncDashboard />  <!-- async setup() -->
  </template>
  <template #fallback>
    <LoadingSpinner />
  </template>
</Suspense>

AsyncDashboard có thể có async setup() với await bên trong. <Suspense> catch async và show fallback cho đến khi resolve.

• Tích hợp với <KeepAlive> và lazy components.
• Lưu ý: Một số edge case (nhiều async deps, nested Suspense với SSR) có thể behave không như kỳ vọng — test kỹ.
• Tag "experimental" đã được xóa khỏi Vue 3 docs.

<Suspense> renders fallback content while async components resolve — handles async setup():

<Suspense>
  <template #default>
    <AsyncDashboard />  <!-- async setup() -->
  </template>
  <template #fallback>
    <LoadingSpinner />
  </template>
</Suspense>

AsyncDashboard can have async setup() with awaits inside. <Suspense> catches the async and shows fallback until resolved.

• Integrates with <KeepAlive> and lazy components.

Pitfall: Some edge cases (multiple async deps, nested Suspense with SSR) may behave unexpectedly — test thoroughly.

• The "experimental" label was removed from Vue 3 docs in Vue 3.5.