mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-25 23:22:02 +00:00
docs: recommend '#teleports' target instead of 'body' (#28489)
This commit is contained in:
parent
f3577e2b0e
commit
11018bbbae
@ -4,7 +4,7 @@ description: The <Teleport> component teleports a component to a different locat
|
|||||||
---
|
---
|
||||||
|
|
||||||
::warning
|
::warning
|
||||||
The `to` target of [`<Teleport>`](https://vuejs.org/guide/built-ins/teleport.html) 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.
|
The `to` target of [`<Teleport>`](https://vuejs.org/guide/built-ins/teleport.html) expects a CSS selector string or an actual DOM node. Nuxt currently has SSR support for teleports to `#teleports` only, with client-side support for other targets using a `<ClientOnly>` wrapper.
|
||||||
::
|
::
|
||||||
|
|
||||||
## Body Teleport
|
## Body Teleport
|
||||||
@ -14,7 +14,7 @@ The `to` target of [`<Teleport>`](https://vuejs.org/guide/built-ins/teleport.htm
|
|||||||
<button @click="open = true">
|
<button @click="open = true">
|
||||||
Open Modal
|
Open Modal
|
||||||
</button>
|
</button>
|
||||||
<Teleport to="body">
|
<Teleport to="#teleports">
|
||||||
<div v-if="open" class="modal">
|
<div v-if="open" class="modal">
|
||||||
<p>Hello from the modal!</p>
|
<p>Hello from the modal!</p>
|
||||||
<button @click="open = false">
|
<button @click="open = false">
|
||||||
|
Loading…
Reference in New Issue
Block a user