Vue — Teleport

Basic teleport

<template>
  <button @click="showModal = true">Open Modal</button>
  <Teleport to="body">
    <div v-if="showModal" class="modal">
      <p>Modal content</p>
      <button @click="showModal = false">Close</button>
    </div>
  </Teleport>
</template>

<script setup>
import { ref } from 'vue'
const showModal = ref(false)
</script>

Teleport to specific element

<Teleport to="#modal-container">
  <div class="modal">Content</div>
</Teleport>

Conditional teleport

<Teleport to="body" :disabled="isMobile">
  <div class="sidebar">Content</div>
</Teleport>

Multiple teleports

<Teleport to="body">
  <div class="modal-1">First</div>
</Teleport>

<Teleport to="body">
  <div class="modal-2">Second</div>
</Teleport>

Practical example

<template>
  <Teleport to="body">
    <Transition name="fade">
      <div v-if="isOpen" class="overlay">
        <div class="dialog">
          <slot></slot>
          <button @click="isOpen = false">Close</button>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
import { ref } from 'vue'

const isOpen = ref(false)

defineExpose({ open: () => isOpen.value = true })
</script>

Use cases

• Modals and dialogs
• Tooltips
• Notifications
• Drop-down menus

Mini Practice

1. Create a modal with Teleport
2. Add transitions
3. Use conditional teleport
4. Build a notification system

Up Next

Continue with Suspense - Async components.