Notes on Vue Teleport

The <Teleport> allows for logical component hierarchy while allowing child components to appear elsewhere in the DOM.

<template>
  <div>Local text</div>
  <Teleport to=“#some.selector”>
    <div>Appears elsewhere</div>
  </Teleport>
</template>

The to= attribute takes either a selector or the HTMLElement itself. Also available are disabled= for conditional teleportation, and defer= if the element appears later in Vue’s tree. However, the target element must be available at the same tick that the <Teleport> component is, otherwise an error will be thrown.