Vue.js: What is the difference between Teleport and Suspense?

Teleport — render elsewhere. Suspense — async components.

Teleport:

• Render to different DOM location.
• Modals, tooltips.
• Keeps Vue reactivity.

Suspense:

• Async component loading.
• Loading states.
• Fallback content.

1<!-- Teleport -->
2<Teleport to="body">
3  <Modal />
4</Teleport>
5
6<!-- Suspense -->
7<Suspense>
8  <template #default>
9    <AsyncComponent />
10  </template>
11  <template #fallback>
12    <Loading />
13  </template>
14</Suspense>

Key: Teleport for portals, Suspense for async.