Wat zijn teleports in Vue?

Teleport in Vue 3 is een manier om de inhoud van een component te renderen op een andere plek in de DOM-boom, zonder gebonden te zijn aan de feitelijke locatie van de component in de hiërarchie.

Dit is handig voor:

Modale vensters en pop-ups: Ze maken het gemakkelijk om een modaal venster of een pop-up notificatie te verplaatsen naar de root-elementen <body> of <html>, waardoor problemen met z-index en afsnijding door ouder-elementen worden vermeden.
Herbruikbare componenten: Ze stellen je in staat om componenten te maken die een deel van hun inhoud op verschillende plaatsen kunnen renderen, terwijl ze hun logica in één component behouden.

Gebruikssyntaxis van <Teleport>:

<template>
  <div>
    <!-- Hoofdinhoud van de component -->
    <button @click="showModal = true">Open modal</button>

    <!-- Inhoud van de modaal, geteleporteerd naar #modal-target -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Modal titel</h2>
          <p>Tekst van de modal.</p>
          <button @click="showModal = false">Sluiten</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const showModal = ref(false);
</script>

<style scoped>
/* Stijlen voor de component */
</style>

Het to attribuut geeft de doelcontainer in de DOM aan, waar de inhoud van <Teleport> naartoe wordt verplaatst. Het doel kan zijn:

Een CSS-selector string (bijvoorbeeld, #modal-target, .container).
Een DOM-element (verkregen via document.getElementById() of document.querySelector()).

Als de doelcontainer niet wordt gevonden, wordt de inhoud niet weergegeven.

Voorbeeld van HTML-structuur:

<body>
  <div id="app">
    <!-- Hier wordt de Vue-app gerenderd -->
  </div>

  <!-- Doelcontainer voor teleport -->
  <div id="modal-target"></div>
</body>

De toestand van de component (showModal) en de logica blijven gekoppeld aan de component, zelfs als een deel ervan op een andere plek wordt gerenderd. Dit maakt teleporten een krachtig hulpmiddel voor het beheren van complexe gebruikersinterfaces met zwevende elementen.