<Teleport>
Компонент <Teleport> телепортирует компонент в другое место в DOM.
Цель
to
в <Teleport>
ожидает строку CSS-селектора или фактический узел DOM. В настоящее время Nuxt имеет поддержку SSR только для телепортов в #teleports
, а для других целей на стороне клиента используется обертка <ClientOnly>
.Телепорт в Body
<template>
<button @click="open = true">
Открыть модальное окно
</button>
<Teleport to="#teleports">
<div v-if="open" class="modal">
<p>Привет из модального окна!</p>
<button @click="open = false">
Закрыть
</button>
</div>
</Teleport>
</template>
Телепорт на стороне клиента
<template>
<ClientOnly>
<Teleport to="#some-selector">
<!-- контент -->
</Teleport>
</ClientOnly>
</template>
Прочитайте и отредактируйте живой пример в Docs > Examples > Advanced > Teleport.