Le composant build-in Teleport

Lorsque l’on développe des interfaces modernes avec Vue.js, on se heurte rapidement à un problème classique : certains éléments de l’UI doivent être affichés en dehors de leur hiérarchie DOM naturelle.

Cas typiques :

• Modals
• Dialogs
• Popovers
• Drawers
• Overlays plein écran

C’est pour ces cas-ci que Vue.js propose le composant built-in Teleport:

Teleport permet de rendre un composant dans un autre endroit du DOM que celui où il est déclaré dans le code. Il permet ainsi de séparer la logique du composant de l’endroit où il doit apparaître visuellement.

La propriété “to” du composant Teleport correspond au sélecteur CSS ou au noeud du DOM de l’élément où le composant doit être “téléporté”.