Teleport

Teleport — это встроенный компонент Vue 3, который позволяет «телепортировать» часть HTML-разметки в другое место в DOM, за пределами текущей иерархии компонента. Это особенно полезно для элементов вроде модальных окон, которые должны отображаться поверх всего контента, без ограничений CSS от родительских элементов.

Атрибут defer заставляет Teleport ждать, пока цель появится в DOM.

1
2
3
4
5
6
7
8
9
10
11
12
// App.vue<script setup>import Comp  from './Comp.vue';</script>  <template>  <div class="wrapper">    <div>      <Comp />    /div>  </div></template>

1
2
3
4
5
6
7
8
9
10
// Comp.vue<script setup>import { Teleport } from 'vue';</script>  <template>  <Teleport defer to=".wrapper">    <div class="comp">component</div>  </Teleport></template>