#vuecember2020 #vuejs #vue3

PortalVue und Teleport

Jeder Mensch, der sich im Internet bewegt, kennt sie: Popups, Modals, Overlays,… anders gesagt: Elemente, die sich über den restlichen Inhalt einer Webseite legen.

Aus UX- und UI-Sicht sind diese schnell eingefügt. Als Entwickler steht man schnell vor einer Herausforderung: Die Stelle, an der das Modal eingefügt werden soll, ist meist tief in der HTML-Struktur zu finden. Hat man dann etwa einen festgepinnten Seiten-Header oder andere Elemente, die per CSS oberhalb dieser Stelle liegen, so gibt es auf reiner CSS- und HTML-Basis keine Möglichkeit, über dieses andere Element zu gelangen.

Zum Glück gibt es eine einfache Möglichkeit, das in Vue-Projekten zu lösen: PortalVue. Dieses kleine Vue-Plugin wird von einem der Vue-Core-Mitglieder betreut. Die Funktionsweise ist denkbar einfach: Man fügt an einer beliebigen Stelle innerhalb der Vue-App ein PortalTarget ein. Nun lässt sich dieser Platzhalter durch ein Portal befüllen. Damit umgeht man das Problem, von der HTML-Struktur der gesamten App abhängig zu sein. Das Überdecken des restlichen Inhalts wird somit beinahe trivial.

Hier ein Beispiel, direkt aus der PortalVue-Doku:

<portal to="destination">
  <p>This slot content will be rendered wherever the
    <portal-target> with name 'destination'
    is located.
  </p>
</portal>

<portal-target name="destination">
  <!--
  This component can be located anywhere in your App
  (i.e. right before the &lt;/body&gt; tag, good for overlays).
  The slot content of the above portal component will be rendered here.
  -->
&lt;/portal-target&gt;

Der Inhalt, den man in das Portal gibt, kann per v-if angezeigt werden oder nicht. So lässt sich zuverlässig steuern, ob das Modal angezeigt wird oder nicht.

Ein anderer Vorteil, den wir gegenüber anderen Lösungen ebenfalls feststellen konnten: Das Portal selbst ist direkt an der Stelle im Code vorhanden, an der es auch eingesetzt wird. Die Syntax ist offensichtlich und somit für Entwickler, die neu ins Projekt kommen, direkt nachvollziehbar. Das vereinfacht Pflege, Debugging und Übersichtlichkeit im Code sehr.

In Vue3 kann man sogar ganz auf das Plugin verzichten – dort wird die Teleport-Komponente zur Verfügung gestellt, die sehr ähnlich funktioniert.