Contao-Camp 2024
Ergebnis 1 bis 3 von 3

Thema: Contao 4 mit Vue 3 Integration

  1. #1
    Contao-Nutzer Avatar von smohring
    Registriert seit
    29.07.2014.
    Beiträge
    26

    Frage 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
    Geändert von smohring (24.02.2021 um 10:11 Uhr)

  2. #2
    Contao-Nutzer
    Registriert seit
    23.09.2013.
    Beiträge
    7

    Standard

    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
        },
    });
    Geändert von mh_solutions (24.02.2021 um 17:25 Uhr)

  3. #3
    Contao-Nutzer Avatar von smohring
    Registriert seit
    29.07.2014.
    Beiträge
    26

    Frage

    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')

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •