<Teleport>

<Teleport> 컴포넌트는 DOM의 다른 위치로 순간 이동한다.

 

Vue 3는 Vue 애플리케이션 외부 DOM의 다른 곳에서 콘텐츠를 렌더링할 수 있는 <Teleport> 컴포넌트를 제공한다.

 

주의) <Teleport> 의 to 에는 CSS 선택기 문자열 또는 실제 DOM 노드가 필요합니다. Nuxt는 현재 body 에 대해서만 텔레포트를 위한 SSR을 지원하며 래퍼 <ClientOnly> 를 사용하는 다른 대상에 대해서는 클라이언트 측 지원을 제공한다.

 

BodyTeleport

<template>
  <button @click="open = true">
    Open Modal
  </button>
  <Teleport to="body">
    <div v-if="open" class="modal">
      <p>Hello from the modal!</p>
      <button @click="open = false">
        Close
      </button>
    </div>
  </Teleport>
</template>

 

Client-side Teleport

<template>
  <ClientOnly>
    <Teleport to="#some-selector">
      <!-- content -->
    </Teleport>
  </ClientOnly>
</template>

 

Example

아래 예는 SSR 텔레포트로 body 를 렌더링하고, ClientOnly 를 이용해 body 위에 모달창을 CSR 하는 예제이다.

<template>
  <NuxtExampleLayout repo="nuxt/examples" example="app/teleport">
    <div>
      <!-- SSR Teleport -->
      <Teleport to="body">
        SSR Teleport
      </Teleport>

      <!-- Client Teleport -->
      <ClientOnly>
        <Teleport to="body">
          <div>
            Hello from a client-side teleport!
          </div>
        </Teleport>
      </ClientOnly>

      <!-- Modal Example -->
      <MyModal />
    </div>
  </NuxtExampleLayout>
</template>