Teleport & Suspense in Vue.js

From the Vue.js cheat sheet · Advanced Features · verified Jul 2026

Teleport & Suspense

Vue 3 Teleport and Suspense features

vue
<!-- Teleport -->
<Teleport to="body">
  <div class="modal">
    Modal content
  </div>
</Teleport>

<!-- Suspense -->
<Suspense>
  <AsyncComponent />
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>
💡 Teleport renders content outside component hierarchy
⚡ Suspense handles async component loading states
📌 Top-level await in setup makes component async
🔥 Combine Suspense with error boundaries for complete async handling

More Vue.js tasks

Back to the full Vue.js cheat sheet