\n\n\n```\n\n**Key:** Teleport for portals/modals."}}]}...","url":"https://svetoch.life/questions/vue/vue_234","datePublished":"2026-08-03","dateModified":"2026-08-03","author":{"@type":"Organization","name":"Zoro"},"publisher":{"@type":"Organization","name":"Zoro","logo":{"@type":"ImageObject","url":"https://svetoch.life/og.svg"}},"articleSection":"Vue.js","mainEntityOfPage":{"@type":"WebPage","@id":"https://svetoch.life/questions/vue/vue_234"}}

Vue.js: How do you use Teleport for modals?

🟢Vue.js⚡ middle

How do you use Teleport for modals?

Teleport — render in different DOM location.

Modal example:

vue

1<script setup>
2import { ref } from "vue"
3
4const showModal = ref(false)
5</script>
6
7<template>
8  <button @click="showModal = true">Open</button>
9
10  <Teleport to="body">
11    <div v-if="showModal" class="modal-overlay">
12      <div class="modal">
13        <p>Modal content</p>
14        <button @click="showModal = false">Close</button>
15      </div>
16    </div>
17  </Teleport>
18</template>

Key: Teleport for portals/modals.

Больше вопросов по Vue.js

What is the difference between markRaw and toRaw?What is the difference between v-slot and slot props?

Назад к категории Vue.js