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