Vue.js und Contao - Ein paar Grundsätzliche Fragen
Aloha,
ich versuche gerade Vue.js in ein Contao-Projekt zu intergrieren und komme immer wieder in eine Sackgasse.
Das Ziel ist einen One-Pager zu erstellen in dem Bereiche dynamisch gerendert werden sollen. Es gibt 17 Produktbereiche, die sollen jeweils erst nach Auswahl des Produkts erscheinen. Da dachte ich mir das wäre doch mal ein gutes Szenario um Vue auszuprobieren. Vue soll auf dieser Seite jQuery ersetzen d.H. neben der Aufgabe die Bereiche dynamisch zu rendern sollen auch andere Funktionen (Tabs, Slider) mit Vue erstellt werden.
Der Aufbau sieht im Moment folgendermaßen aus:
- Die verschiedenen Elemente werden mit Rocksolid-Custom-Elements für die Eingabe des Redakteurs im Backend angelegt
- Aus diesen Daten werden dann die Bereiche erzeugt
- Vue soll dann für die Logik (ein- ausblenden) sorgen
Mein Problem im Moment ist dass ich nicht so ganz sicher bin wie ich denn die Daten korrekt verarbeiten soll und (in manchen Fällen) wie ich die Datenbankeinträge im Vue-Template ohne PHP weiterverarbeiten kann.
Ich sehe zwei Wege die Templates einzurichten:
1) Mehr oder weniger klassisch. Also nur das Verhalten wird über diverse v-if Abfragen gesteuert. Die Elemente aber mit PHP im Template ausgegeben.
Problem: Ohne Daten in die Vue-App zu kriegen fehlen mir Informationen um die Logik einzurichten (z.B. ID), um die Daten in die App zu ziehen brauche ich die Custom-HTML-Tags des Komponenten, und damit wieder Vue-Templates.
2) Vue-Templates. Ich habe es soweit geschafft die Daten übers Template in die Komponenten zu übergeben. Das wäre jetzt eigentlich mein Traumszenanrio, und funktioniert auch soweit. Ich bekomme alle Einträge ins Vue-Template. Dort stehe ich dann aber vor dem nächsten Problem: Was mache ich z.B.: mit einer Contao Bild-ID in einem Vue-Template? Im PHP-Template kein Problem, aber im Vue-Template? Normal arbeite ich in Templates öfter mit Insert-Tags (besonders picture und insert-article) - die Option wäre in Vue-Templates dann raus, oder?
Oder bin ich auf dem Holzweg und sollte den ganzen Aufbau komplett anders angehen?
Wie macht ihr das wenn ihr Vue (oder andere JS-Frameworks) in Contao integriert?