Sprechende URLs und Inhaltsseiten für meine Vue App

Zu diesem MyInnovationDay bin ich zurückgekehrt zu einem Projekt, dass ich vor etwa einem Jahr angefangen hab. Damals habe ich eine Single-Page-Application mit dem JavaScript-Framework Vue.js gebaut. Dieses Mal habe ich diese kleine App etwas weiterentwickelt. Besonders wichtig waren mir, aussagekräftige URLs nutzen zu können und außerdem eine variable Anzahl an einfachen Content-Seiten hinzuzufügen.

Sprechende URLs zu ergänzen hat sich, dank des einfach umzusetzenden ‘vue-router’ Plugins, als sehr leicht herausgestellt. Dafür mussten lediglich bestimmte Pfade, wie im Screenshot gezeigt, mit Komponenten verknüpft werden. So können auch dynamisch die neu hinzugefügten Inhaltsseiten angesteuert werden, je nachdem wie sie benannt sind. Für die Inhaltsseiten habe ich diese sehr simple Komponente gebaut. Ursprünglich hatte ich vor, die entsprechenden Inhalte von einer externen Quelle, wie z.B. Google Sheets, zu beziehen. Dieser Test ist dann allerdings an fehlender Zeit und der recht komplexen Kombination aus Google API und Vue.js gescheitert.

Ich bin aber trotz dessen sehr zufrieden mit dem, was schon geschafft ist. Nebenbei habe ich auch einige Bugs beheben können und verschiedene Daten in externe Dateien für bessere Übersichtlichkeit auslagern können. Diesmal bin ich auch in den vollen Genuss der letztes Mal beschriebenen “Single File Components” gekommen, die im letzten Blogpost schon beschrieben waren, nachdem ich den Build-Prozess auf webpack umgestellt hatte. Ich freunde mich also immer mehr mit Vue.js an.