Šta su teleporti u Vue?

Teleport u Vue 3 je način za renderovanje sadržaja komponenta na drugo mesto u DOM stablu, bez veze sa stvarnim položajem komponente u hijerarhiji.

Ovo je korisno za:

Modalska prozora i iskačući prozori: Omogućava lako premeštanje modalskog prozora ili iskačuće obaveštenja u korenske elemente <body> ili <html>, izbegavajući probleme sa z-index i sečenjem od strane roditeljskih elemenata.
Ponovo upotrebljivi komponenti: Omogućava kreiranje komponenti koje mogu da renderuju deo svog sadržaja na različitim mestima, zadržavajući svoju logiku u jednom komponentu.

Sintaksa za korišćenje <Teleport>:

<template>
  <div>
    <!-- Glavni sadržaj komponente -->
    <button @click="showModal = true">Otvoriti modal</button>

    <!-- Sadržaj modala, teleportovan u #modal-target -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Naslov modala</h2>
          <p>Tekst modala.</p>
          <button @click="showModal = false">Zatvori</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

<style scoped>
/* Stilovi za komponentu */
</style>

Atribut to ukazuje na ciljni kontejner u DOM-u, u koji će biti premešten sadržaj <Teleport>. Cilj može biti:

Niz CSS selektora (npr. #modal-target, .container).
DOM element (dobijen pomoću document.getElementById() ili document.querySelector()).

Ako ciljni kontejner nije pronađen, sadržaj neće biti prikazan.

Primer strukture HTML:

<body>
  <div id="app">
    <!-- Ovde će biti renderovana Vue aplikacija -->
  </div>

  <!-- Ciljni kontejner za teleport -->
  <div id="modal-target"></div>
</body>

Stanje komponenta (showModal) i njegova logika ostaju povezani sa komponentom, čak i ako se njen deo renderuje na drugom mestu. Ovo čini teleportove moćnim alatom za upravljanje složenim korisničkim interfejsima sa plutajućim elementima.