What is the Vue 3 Suspense API and async components?

defineAsyncComponent creates a component that is loaded asynchronously (code-split). import { defineAsyncComponent } from "vue"; const HeavyChart = defineAsyncComponent({ loader: () => import("./HeavyChart.vue"), loadingComponent: LoadingSpinner, errorComponent: ErrorDisplay, delay: 200, // show loading only if takes > 200ms timeout: 10000, // error after 10s onError(error, retry, fail, attempts) { if (attempts <= 3) retry(); else fail(); } });. Without the options object: const LazyComponent = defineAsyncComponent(() => import("./Lazy.vue")). Async setup() for Suspense: components with top-level await in setup() are "async components" for Suspense: <script setup> const data = await fetch("/api/data").then(r => r.json()); // top-level await </script>. This component participates in parent Suspense boundary. Combining with Suspense: <Suspense> <template #default> <AsyncDataComponent /> </template> <template #fallback> <p>Loading...</p> </template> </Suspense>. SSR integration: Nuxt's useFetch and useAsyncData integrate with Suspense boundaries for server-side data fetching. Limitations: Suspense is experimental — avoid using in deeply nested async setups in production until stable. Works well for page-level async data loading.