Qu'est-ce que les téléportations dans Vue?

Les téléportations dans Vue 3 sont une méthode pour rendre le contenu d’un composant dans un autre endroit de l’arbre DOM, sans être lié à l’emplacement physique du composant dans la hiérarchie.

Ceci est utile pour :

Fenêtres modales et pop-ups : Permettent de déplacer facilement une fenêtre modale ou une notification pop-up vers les éléments racine <body> ou <html>, évitant ainsi les problèmes de z-index et de découpage par les éléments parents.
Composants réutilisables : Permettent de créer des composants qui peuvent rendre une partie de leur contenu à différents endroits, tout en conservant leur logique dans un seul composant.

Syntaxe d’utilisation de <Teleport> :

<template>
  <div>
    <!-- Contenu principal du composant -->
    <button @click="showModal = true">Ouvrir la fenêtre modale</button>

    <!-- Contenu de la fenêtre modale, téléporté vers #modal-target -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Titre de la fenêtre modale</h2>
          <p>Texte de la fenêtre modale.</p>
          <button @click="showModal = false">Fermer</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

<style scoped>
/* Styles pour le composant */
</style>

L’attribut to indique le conteneur cible dans le DOM, où le contenu de <Teleport> sera déplacé. La cible peut être :

Une chaîne de sélecteur CSS (par exemple, #modal-target, .container).
Un élément DOM (obtenu via document.getElementById() ou document.querySelector()).

Si le conteneur cible n’est pas trouvé, le contenu ne sera pas affiché.

Exemple de structure HTML :

<body>
  <div id="app">
    <!-- L’application Vue sera rendue ici -->
  </div>

  <!-- Conteneur cible pour le téléport -->
  <div id="modal-target"></div>
</body>

L’état du composant (showModal dans l’exemple ci-dessus) et sa logique restent liés au composant, même si une partie de celui-ci est rendue ailleurs. Cela fait des téléports un outil puissant pour gérer des interfaces utilisateur complexes avec des éléments flottants.