new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Nuxt · API · all subjects

components/teleport

4 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

ClientOnly wrapped Teleport example

The following example shows how to use Teleport for client-side-only targets by wrapping it in a ClientOnly component: ```vue <template> <ClientOnly> <Teleport to="#some-selector"> <!-- content --> </Teleport> </ClientOnly> </template> ```

Teleport component to prop

The `to` prop of the Teleport component expects either a CSS selector string or an actual DOM node. This prop determines where in the DOM the component content will be teleported to.

Teleport SSR support limitation

Nuxt has SSR support for teleports to the '#teleports' target only. For other targets, client-side support requires wrapping the Teleport in a ClientOnly component.

Teleport to body example

The following example shows a modal that teleports to the '#teleports' target using Teleport. A button opens the modal by setting `open` to true, and the modal displays with a close button that sets `open` to false. ```vue <template> <button @click="open = true"> Open Modal </button> <Teleport to="#teleports"> <div v-if="open" class="modal" > <p>Hello from the modal!</p> <button @click="open = false"> Close </button> </div> </Teleport> </template> ```

Give your agent this brain