<Portal />
<Portal />
<Teleport />
<Teleport />
- Allows to move elements to a different location
- Prime use case: Modals, dropdowns, notifications ...
- Goal: 80/20 - Cover 80% of use cases with little code
<Teleport />
<template>
<teleport to="#modals">
<div class="backdrop" :class="inlineClass">
<div class="modal">
<h1>Hello from the Modal!</h1>
<br>
<button @click="close">Close</button>
</div>
</div>
</teleport>
</template><body>
<div id="app"></div>
<div id="modals"></div>
</body>Features
- Content stays logical child in the virtual DOM
- $parent and inject work as expected
- destroyed with its parent
- template refs work
- Multiple Teleports, same target (append)
- can be disabled to show elements inline
Prior Art
deck
By Thorsten Lünborg
