Vue.js und Contao - Ein paar Grundsätzliche Fragen

[the_gmo]

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?

[joe]

Genau das Thema behandelt mein Workshop vom Contao College Vue.js effektiv mit Contao nutzen. Der Kurs wird bald über das Online College Angebot der Association buchbar sein.

Wie immer gibt es mehrere Wege und daher zeige ich in meinem College gleich vier mit ihren Vor und Nachteilen.

Falls du aber solange nicht warten kannst / willst schreib mich gerne hier oder im slack direkt an.

[markocupic]

Ich habe mal vor einiger Zeit ein paar contao 4 dummy Module erstellt.
Darunter gibt es auch eine vue.js Galerie.

Die Bilder generiere ich auf dem Server mit

        $multiSRC = $stringUtilAdapter->deserialize($this->model->multiSRC, true);
        $imgSize = $stringUtilAdapter->deserialize($this->model->imgSize, true);

        if (!empty($multiSRC) && isset($imgSize[2])) {
            $pictureSize = $imgSize[2];

            if (null !== ($objFiles = FilesModel::findMultipleByUuids($multiSRC))) {
                while ($objFiles->next()) {
                    $insertTag = sprintf('{{picture::%s?size=%s&template=picture_default}}', $objFiles->id, $pictureSize);

                    $strMarkup = $controllerAdapter->replaceInsertTags($insertTag);

                    if (!empty($strMarkup)) {
                        $arrPictures[] = base64_encode($controllerAdapter->replaceInsertTags($insertTag));
                    }
                }
            }
        }

https://github.com/markocupic/dummy-...oller.php#L120

... und sende sie base64 encoded via json zum Client.

Hier der Template & vue.js Teil:
https://github.com/markocupic/dummy-...dule.html5#L15

@joe: Bin gespannt, wie du es machst.

Grüsse Marko

[joe]

@Marko danke für deinen Input.

Auch das kann man so machen. Es gibt eben viele Wege, die nach Rom führen. Ich würde dies aber nicht empfehlen, da in dieser Lösung sehr viel Vue und JS Code direkt in Contao liegt. Aber auch das ist Ansichts- und Geschmacksache.

Der Weg über die Vue Single File Components von the_gmo ist m.E. schon der Beste. Ich habe das über eine auto invocation gelöst der über das data attribute vue-com und vue-data(PHP array -> json) die passende Komponente läd und benötigte Daten reinreicht. Das bedingt aber, dass man bereit ist seinen Workflow zu ändern und vue strikt von Contao Template Dateien separiert. Man kann den Schritt auch über eine generelle Content API umgehen

Mir ist bewusst, dass dies nicht jedermanns Sache ist und daher habe ich noch mehr Varianten die mehr Oldschool sind im Angebot. Dadurch sollte der Ein und Umstieg so erfolgreich wie möglich verlaufen und man ist flexibel in den Möglichkeiten.

Wir planen zu dem Thema auch einen Tech Talk im Contao TV. Also über die Integrationsmöglichkeiten. Vielleicht machen wir das mal.

Bis dahin stehe ich für Fragen gerne im 1 zu 1 zu Verfügung.

[the_gmo]

Vielen Dank für das Feedback, das hat mich schonmal auf neue Ideen gebracht, damit kann ich jetzt weiter versuchen.

Genau das Thema behandelt mein Workshop vom Contao College Vue.js effektiv mit Contao nutzen. Der Kurs wird bald über das Online College Angebot der Association buchbar sein.

Daran bin ich sehr, sehr interessiert. Hast du eine Mailinglist dafür oder was in der Art? Ansonsten vertraue ich darauf dass ich es über die Contao-üblichen Kanäle mitbekomme.

Falls du aber solange nicht warten kannst / willst schreib mich gerne hier oder im slack direkt an.

Es kann gut sein dass ich auf dieses Angebot noch zurückkomme. Bin diese Woche allerdings (ungeplant) nur sporadisch im Einsatz weil die Kinder auch noch bespaßt werden wollen.

[joe]

@the_gmo

Eine Mailingliste seitens der Colleges gibt es derzeit leider noch nicht. Wir arbeiten aber daran. Ich sage dir aber gerne Bescheid wenn sich etwas ergibt.

Melde dich einfach bei mir bei Bedarf

[lud81]

Gibt es bereits einen Link zu Online College Angebot der Association? Ich finde es nicht

[zonky]

College zum Camp 2022: https://2022.camp.contao.org/program...ao-nutzen.html

[joe]

@lud81 leider sind die online colleges aus diversen Gründen nie zustande gekommen. Wie @zonky bereits verlinkt hat gibt es beim Camp ein Vorort College.

Falls du Interesse hast den Kurs Remote zu besuchen, schreib mich gerne an.