Learn Nuxt with a Collection of 100+ Tips!

<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.