Using Vue.js 3 Teleport to Build Modals, Notifications, and Dialogs

Vue.js 3 introduces Teleport, a feature that allows component content to be rendered in any location of the HTML document, enabling easy creation of modals, dialogs, notifications, and dropdowns without layout or stacking‑context issues.

Key concepts include Teleport, Source (the original component location), Target (the destination element), Teleport Element (the element created in the target), Teleport Destination (a special component that defines the target), and Teleport Props (properties passed to the teleport target).

Example 1 – Modal

<code>&lt;template&gt;
  &lt;div&gt;
    &lt;teleport to="body"&gt;
      &lt;div class="modal-mask"&gt;
        &lt;div class="modal-wrapper"&gt;
          &lt;div class="modal-container"&gt;
            &lt;div class="modal-header"&gt;
              &lt;h3&gt;{{ header }}&lt;/h3&gt;
              &lt;button @click="$emit('close')"&gt;X&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;slot&gt;&lt;/slot&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button @click="$emit('close')"&gt;Close&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/teleport&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import Modal from './Modal.vue'
export default {
  components: { Modal },
  data() {
    return { modalOpen: false }
  }
}
&lt;/script&gt;</code>

In the parent component, the modal is triggered and its header and content are passed via props, while Teleport moves the modal markup into the body element.

Example 2 – Notifications

<code>&lt;template&gt;
  &lt;div&gt;
    &lt;teleport to="body" v-if="show"&gt;
      &lt;div v-for="item in notifications" :key="item.id" class="notification" :class="item.type"&gt;
        &lt;span class="notification-title"&gt;{{ item.title }}&lt;/span&gt;
        &lt;p&gt;{{ item.content }}&lt;/p&gt;
      &lt;/div&gt;
    &lt;/teleport&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  props: {
    show: { type: Boolean, default: false },
    notifications: { type: Array, default: () => [] }
  }
}
&lt;/script&gt;</code>

The parent component toggles the visibility of the notification list and supplies an array of notification objects; Teleport again renders the list directly under body .

By using Teleport, developers can keep component logic together while placing UI overlays in a global layer, improving maintainability and readability of Vue.js applications.

Conclusion

Vue.js 3's Teleport simplifies the management of pop‑up UI elements, enhances layout flexibility, and demonstrates the framework’s continued evolution with powerful new features for frontend development.