mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-15 10:24:50 +00:00
dc47c64f14
Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> Co-authored-by: Pooya Parsa <pooya@pi0.io> Co-authored-by: pooya parsa <pyapar@gmail.com> Co-authored-by: Clément Ollivier <clement.o2p@gmail.com>
1006 B
1006 B
| description |
|---|
| The <Teleport> component teleports a component to a different location in the DOM. |
<Teleport>
The <Teleport> component teleports a component to a different location in the DOM.
The to target of <Teleport> expects a CSS selector string or an actual DOM node. Nuxt currently has SSR support for teleports to body only, with client-side support for other targets using a <ClientOnly> wrapper.
Example: body Teleport
<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>
Example: Client-side Teleport
<template>
<ClientOnly>
<Teleport to="#some-selector">
<!-- content -->
</Teleport>
</ClientOnly>
</template>
:LinkExample{link="/examples/app/teleport"}