0Suspense helps show a loading message while waiting for a component to load. It makes the app feel faster and smoother.
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>MyAsyncComponent loads.<Suspense>
<template #default>
<MyAsyncComponent />
</template>
<template #fallback>
<p>Loading component...</p>
</template>
</Suspense><Suspense>
<template #default>
<AsyncUserProfile />
</template>
<template #fallback>
<Spinner />
</template>
</Suspense>This example shows a component that loads after 2 seconds. While waiting, it shows a loading message. After 2 seconds, the async component appears with a greeting.
<script setup> import { defineAsyncComponent } from 'vue' const AsyncHello = defineAsyncComponent(() => new Promise(resolve => { setTimeout(() => { resolve({ template: '<h2>Hello from async component!</h2>' }) }, 2000) }) ) </script> <template> <Suspense> <template #default> <AsyncHello /> </template> <template #fallback> <p>Loading async component, please wait...</p> </template> </Suspense> </template>
Suspense only works with async components or components that return promises.
You can customize the fallback content to anything like spinners, messages, or skeleton loaders.
Use Suspense to improve user experience by avoiding blank or frozen screens.
Suspense shows fallback content while async components load.
Wrap async components inside <Suspense> with a fallback template.
This makes apps feel faster and smoother for users.
<Suspense> component in Vue?<Suspense> with a fallback in Vue?#fallback inside <Suspense> to show fallback content.<Suspense><template #fallback>Loading...</template><AsyncComp /></Suspense> correctly uses <template #fallback> with fallback text and wraps the async component inside Suspense.<Suspense><template #fallback>Loading...</template><AsyncComp /></Suspense> [OK]<Suspense> <template #fallback>Loading...</template> <AsyncUser /> </Suspense>
AsyncUser is loading?<Suspense> <AsyncComp /> <template fallback>Loading...</template> </Suspense>
#fallback inside <template>.<template fallback> instead of <template #fallback>, which is invalid.#fallback slot syntax [OK]<Suspense><template #fallback><Spinner /></template><AsyncComp1 /><AsyncComp2 /></Suspense> [OK]Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.