Contao 4 mit Vue 3 Integration

Druckbare Version

24.02.2021, 09:06
smohring

Contao 4 mit Vue 3 Integration

Hallo zusammen,

Ich bin aktuell dabei, Vue 3 für ein neues Projekt zusammen mit Contao zu nutzen.
Hierfür habe ich in mein fe_page.html5 Template, direkt nach dem öffnenden <body> ein <div id="app"> eingefügt - hierauf wird meine Vue 3 root Instanz gemounted, sämtllicher von Contao generierte Content befindet sich innerhalb dieses <div>'s.

Der Vorteil dabei ist, dass ich nun diverse Vue-Komponenten bereitstellen kann, die ein Backend-User ebenfalls einfach einbinden kann (im einfachsten Fall in Form eines HTML ContentElements).

Nun habe ich aber das Problem, dass sämtliche <script> Blöcke, die Contao z.B. mit diversen ContentElementen innerhalb des Contents einfügt, von Vue mit einer Warnung quittiert werden (weil diese sich wohl im Scope meiner Vue 3 root Instanz befinden).

Daher habe ich über einen Contao Hook alle <script> Blöcke gesammelt, und hänge diese außerhalb meines <div id="app"> wieder an - das funktioniert oft, aber auch nicht in jedem Fall.

Gibt es hier jemanden, der mir ein "BestPractice" hat, wie ich Contao 4 mit Vue 4 erweitern kann, OHNE alle Contao spezifischen / Plugin spezifischen Scripte mit Vue-Code ersetzen zu müssen.
Die Vue-Komponenten kommunizieren auch miteinander, daher wäre es vermutlich keine Option mehrere Vue Instanzen getrennt zu erstellen.

Eventuell kann man Vue auch dazu bringen, nur registrierte Vue Komponenten zu verarbeiten und alles andere zu ignorieren?

Ich hoffe es ist klar geworden, was mein Problem ist - sonst gerne nachfragen.

Vielen Dank für eure Hilfe,
Steffen
24.02.2021, 16:22
mh_solutions

Bin jetzt kein Vue-Experte, aber ich habe es bei 2-3 Projekten immer so gemacht:

An der Stelle wo ich eine Vue-Component einbinden will nutze ich:
madeyourday/contao-rocksolid-custom-elements

Damit erstelle ich mir das Element.
Und im HTML dieses Elements binde ich meine Component so ein:

HTML-Code:

<div id="app-<?= $this->id ?>"><my-component></my-component></div>

in meiner app.js steht das:

Code:

import myComponent from "../../components/myComponent.vue"; import Vue from "vue"; new Vue({ el: "[id^=app-]", components: { myComponent }, });
25.02.2021, 07:08
smohring

Hi,

Ich glaube, dass der von Dir beschriebene Weg eben nur funktioniert, wenn Du Komponenten hast, Die nicht miteinander interagieren (jedenfalls nicht solange Sie in unterschiedlichen "app" Instanzen laufen.
bei Vue 3 kann ich genau ein "root" Element pro Instanz angeben - daher habe ich die komplette Seite in dessen Scope gepackt...

HTML-Code:

<body> <div id="my-app"></div> </body> import { createApp } from 'vue' const app = createApp({}) // do some necessary preparations app.mount('#my-app')