Beginner LevelVue JS
How does Vue <Suspense> handle async setup() dependencies and loading spinners?
❓ Interview Prompt: Explain the <Suspense> built-in component, handling top-level await in <script setup>, and rendering fallback content.
'<Suspense>' is a built-in component that orchestrates asynchronous dependencies (like top-level 'await' inside '<script setup>' or async components) across component trees.
Slot Outlets:
1
'#default': Contains components with async setup dependencies.
2
'#fallback': Displayed automatically while any nested async component dependency is pending resolution!
Code Implementation Example
html
<template>
<Suspense>
<!-- Default Slot: Contains async component with top-level await -->
<template #default>
<AsyncUserProfile />
</template>
<!-- Fallback Slot: Displayed while async fetch resolves -->
<template #fallback>
<div class="skeleton-loader">Loading profile...</div>
</template>
</Suspense>
</template>💡Handling async component dependencies using <Suspense> default and fallback slots.
🎯 Interview Key Takeaway
<Suspense> coordinates async setup dependencies, displaying fallback UI until all nested async components resolve.
#Suspense#Async#Setup#Beginner
Back to all Vue JS Questions→