Le composant <Teleport> de Vue.js offre la possibilité de déplacer dynamiquement une portion du template d'un composant vers un nœud DOM cible, sans impacter l'encapsulation ou la logique interne du composant.
Note importante : Cette fonctionnalité n'est pas disponible dans l'environnmeent uni-app.
Attributs du composant
to(obligatoire) : Accepte une chaîne de caractères représentant un sélecteur CSS ou une référence directe à un élément HTMLElement. Cet attribut détermine l'emplacement de rendu du contenu téléporté.disabled(facultatif) : Type booléen. Permet de désatciver temporairement le mécanisme de téléportage, utile pour adapter le comportement entre différentes plateformes.
Exemples de sélecteurs pour l'attribut to
<teleport to="#portail-application" />
<teleport to=".conteneur-modal" />
<teleport to="[data-role='popup']" />
Cas d'application typique
Cette technique est particulièrement adaptée aux éléments qui, bien que logiquement liés à un composant, doivent être rendus en dehors de la hiérarchie DOM parente pour éviter des contraintes de style ou de positionnement. Un exemple classique est l'implémentation de fenêtres modales qui nécessitent souvent d'être insérées directement dans le <body> pour garantir un affichage correct.
Gestion de plusieurs instances de Teleport
Plusieurs composants <Teleport> peuvent cibler le même élément DOM. Dans ce cas, les contenus sont ajoutés séquentiellement dans l'ordre d'apparition dans le code.
<Teleport to="#zone-modales">
<div class="modale-premiere">Contenu A</div>
</Teleport>
<Teleport to="#zone-modales">
<div class="modale-seconde">Contenu B</div>
</Teleport>
Le résultat DOM final :
<div id="zone-modales">
<div class="modale-premiere">Contenu A</div>
<div class="modale-seconde">Contenu B</div>
</div>
Exemple d'implémentation
Composant FicheUtilisateur.vue
<template>
<section>
<h3>Données personnelles</h3>
<input v-model="identifiant" placeholder="Votre identifiant" />
<select v-model="choixStatut">
<option value="actif">Actif</option>
<option value="inactif">Inactif</option>
</select>
<Teleport :to="destination">
<p class="resume">{{ resumeDonnees }}</p>
</Teleport>
</section>
</template>
<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
destination: {
type: String,
default: ''
}
})
const identifiant = ref('')
const choixStatut = ref('actif')
const resumeDonnees = computed(() => {
const parties = []
if (identifiant.value) parties.push(`ID : ${identifiant.value}`)
if (choixStatut.value) parties.push(`Statut : ${choixStatut.value}`)
return parties.join(' | ')
})
</script>
Page de test intégrée
<template>
<div class="instructions">Le contenu suivant sera mis à jour dynamiquement</div>
<div id="emplacement-cible" class="cadre-affichage"></div>
<FicheUtilisateur destination="#emplacement-cible" />
</template>
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log('Composant initialisé')
})
</script>