JavaScript-Framework VueJS in Contao CMS nutzen

Für ein kürzlich zu realisierendes Projekt bestand eine Teilaufgabe darin, einen Produktkatalog zu realisieren, welcher später zu einem Online-Shop umgebaut werden kann. Die Herausforderung lag in der Tatsache, dass die einzelnen Produkte nicht in Contao CMS gepflegt werden sollen, sondern in einem zentralen Produktverzeichnis eines Fremdanbieters. Der Anbieter bietet eine Schnittstelle an, um Daten in Form von XML oder JSON abzurufen. Diese Gegebenheiten waren für mich der Grund den Produktkatalog als VueJS-Applikation zu realisieren und diesen in Contao zu implementieren. Hierbei wurde ich mit ein paar Problemen konfrontiert, deren Lösung ich in diesem Beitrag beschreiben möchte.

JavaScript-Framework in Contao

Grundsätzlich kann natürlich jedes JS-Framework in Contao eingebunden werden. Waren es früher noch Bibliotheken wie jQuery oder MooTools sind es heutzutage React oder VueJS. Diese bieten den Entwicklern noch mehr Möglichkeiten vom einfachen ein- und ausblenden von Inhalten bis hin zum Rendern einzelner Views, welche über eine eigene URL angesprochen werden können. Weiter haben sich die Voraussetzungen, mit JavaScript ganze Applikationen zu bauen, deutlich verbessert. Mit ES6 und speziell den ES6-Modules können nun gekapselte Module für einen bestimmten Anwendungsfall zur Verfügung gestellt werden und durch das Zusammenstecken weiterer Module entsteht eine saubere Applikation.

Konzeption der Applikation

Meine Anwendung soll, wie schon beschrieben, innerhalb einer Contao-Seite laufen und eine Übersicht aller Produkte der jeweiligen Kategorie sowie eine Detailansicht eines einzelnen Produktes darstellen. Die Klickpfade sollen als URL angezeigt werden, so dass Besucher die Browsernavigation zum Vor- und Zurücknavigieren verwenden können oder bspw. um Produkte direkt zu Verlinken. Das Neuladen der Website sollte die Applikation auch mitmachen.

Stolperstein: Routing der Applikation

Für VueJS gibt es den VueRouter, welcher genau für die oben genannten Anwendungsfälle entwickelt wurde. Das bedeutet, dass nicht Contao sondern der VueRouter sich um das Routing innerhalb der Applikation kümmert. Hierfür musste ich in Contao ein paar Einstellungen anpassen.

Zuerst habe ich eine neue, reguläre Seite mit dem Namen "Products" angelegt, in welche die Applikation geladen werden soll. Den Seitenalias habe ich abgeändert, was jedoch nur aus persönlicher Präferenz heraus geschehen ist. Diese Seite ist ein Kindelement der Seite "Produkte" und ist im Menü versteckt, damit die beiden Seiten "Products" und "Produkte" nicht gleichzeitig erscheinen.

Reguläre Seite erstellen
Erstellen einer regulären Seite und anpassen des Seitenalias

Anschließend habe ich die übergeordnete Seite "Produkte" zum Seitentyp "Externe Weiterleitung" abgeändert und als Link-Adresse den zuvor angepassten Seitenalias der Seite "Products" eingetragen. Dadurch zeigt sich Contao nicht mehr für das Routing verantwortlich und die VueJS-Applikation kann dies von dort an übernehmen.

Contao externe Weiterleitung
Ändern des Seitentyps zu "Externe Weiterleitung"

Im VueRouter kann für das Routing zwischen den Modis hash (Standard), history und abstract gewählt werden. Ich nutze den Hashmode und habe aus diesem Grund den Eintrittspunkt in der Link-Adresse der Weiterleitungsseite schon dementsprechend durch den Hash #/products ergänzt.

Anpassungen innerhalb der VueJS-Applikation

In der VueRouter-Instanz habe ich dem Property base den Wert des oben geänderten Seitenalias produkte/index.html gegeben. Weiter müssen natürlich die für die Applikation benötigten Routen dem routes-Property übergeben werden, so dass VueRouter das Routing übernehmen kann.

Templates

VueJS bietet mehrere Möglickeiten für das Templating an. Ich habe mich für die X-Templates entschieden. Hierfür wird das Template in ein Script-Element vom Typ text/x-template umschlossen. In VueJS wird das Template über die Script-Element-ID referenziert und geladen. Die Templates sind im Contao-Template-Verzeichnis abgelegt und werden über das Insert Tag file in die Seite eingebunden. Das ist sicherlich nicht die schönste Art, aber über diese Methode können im Template auf Werte von Contao zugegriffen werden und das Template lässt sich direkt im Contao Backend bearbeiten.

Vue-Templates in Contao
Übersicht der Vue-Templates in Contao
Vue-Templates in Contao bearbeiten
Bearbeiten eines Vue-Templates in Contao

Zusammenfassend

Contao lässt sich problemlos durch moderne JavaScript-Frameworks erweitern. Es sind lediglich ein paar Kniffe notwendig, damit innerhalb der Applikation navigiert werden kann, aber ausgenommen davon, kann eine bestehende Applikation nach kürzester Zeit implementiert werden. Solche Art von Applikationen bieten sich gerade dann an, wenn die benötigten Daten extern liegen und nicht doppelt gepflegt werden sollen. jQuery werden die neuen Libraries und Frameworks in Contao kurz bis mittelfristig nicht ersetzen können, da zu viele Erweiterungen davon abhängig sind.

Für Kommentare bin ich erreichbar über:

Übersicht
nächster Artikel Zertifikat von Let´s Encrypt erneuern
Benötigen Sie Hilfe bei der Realisierung Ihres Projektes? Dann sprechen Sie mit mir, um zu sehen, wie ich Ihnen helfen kann.