What are Vue 3 Teleport and Suspense?

Teleport renders content in a different DOM location. Suspense (experimental) handles async dependencies in a component tree, showing fallback content while async components or setup() functions resolve. Suspense usage: wrap async components: <Suspense> <template #default> <AsyncDashboard /> </template> <template #fallback> <Spinner /> </template> </Suspense>. The default slot contains the async content; fallback is shown while loading. What makes a component "async" for Suspense: (1) Async setup() function: async setup() { const data = await fetchData(); return { data }; }; (2) Async component: defineAsyncComponent(() => import("./Heavy.vue")). Suspense events: @pending — async dep started, @resolve — all resolved, @fallback — fallback shown. Error handling with Suspense: combine with error boundaries using onErrorCaptured or <Suspense> + error template. Nested Suspense: each Suspense manages its own async children. Current status: Suspense is experimental — API may change. Not recommended for critical production use without careful testing. Teleport + Suspense: Teleport's async component contents participate in the parent's Suspense boundary even after teleporting. defineAsyncComponent: defineAsyncComponent({ loader: () => import("./Heavy.vue"), loadingComponent: Spinner, errorComponent: ErrorFallback, delay: 200, timeout: 3000 }).