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.