docs: recommend '#teleports' target instead of 'body' (#28489)

This commit is contained in:
Matej Černý 2024-08-09 18:55:10 +02:00 committed by Daniel Roe
parent f3577e2b0e
commit 11018bbbae
No known key found for this signature in database
GPG Key ID: CBC814C393D93268

View File

@ -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">