Cosa sono i teletrasporti in Vue?

I Teleport in Vue 3 è un modo per rendere il contenuto di un componente in un altro punto dell'albero DOM, senza essere legato alla posizione fisica del componente nella gerarchia.

Questo è utile per:

Finestre modali e pop-up: Permettono di spostare facilmente una finestra modale o una notifica pop-up negli elementi radice <body> o <html>, evitando problemi di z-index e di taglio da parte degli elementi genitori.
Componenti riutilizzabili: Consentono di creare componenti che possono rendere parte del loro contenuto in diversi punti, mantenendo la loro logica in un singolo componente.

Sintassi di utilizzo di <Teleport>:

<template>
  <div>
    <!-- Contenuto principale del componente -->
    <button @click="showModal = true">Apri finestra modale</button>

    <!-- Contenuto della finestra modale, teletrasportato in #modal-target -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Titolo della finestra modale</h2>
          <p>Testo della finestra modale.</p>
          <button @click="showModal = false">Chiudi</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

<style scoped>
/* Stili per il componente */
</style>

L'attributo to indica il contenitore di destinazione nel DOM, a cui verrà spostito il contenuto di <Teleport>. La destinazione può essere:

Una stringa di selettore CSS (ad esempio, #modal-target, .container).
Un elemento DOM (ottenuto tramite document.getElementById() o document.querySelector()).

Se il contenitore di destinazione non viene trovato, il contenuto non verrà visualizzato.

Esempio di struttura HTML:

<body>
  <div id="app">
    <!-- Qui verrà renderizzata l'app Vue -->
  </div>

  <!-- Contenitore di destinazione per il teletrasporto -->
  <div id="modal-target"></div>
</body>

Lo stato del componente (showModal nell'esempio sopra) e la sua logica rimangono collegati al componente, anche se parte di esso viene renderizzata altrove. Questo rende i teleports uno strumento potente per gestire interfacce utente complesse con elementi fluttuanti.