<Portal />

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0025-teleport.md

<Portal />

<Teleport />

https://wicg.github.io/portals/

<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

Made with Slides.com