Contao-Camp 2024
Ergebnis 1 bis 4 von 4

Thema: Wie kann man Vue in Contao nutzen?

  1. #1
    Contao-Nutzer
    Registriert seit
    02.06.2022.
    Beiträge
    2

    Standard Wie kann man Vue in Contao nutzen?

    Hallo, ich bin noch ein neuer Contao Nutzer und bin dabei und bin noch dabei, mich mit Contao zurecht zu finden und habe folgende Frage:
    Wie kann ich Vue in Contao nutzen? Wenn ich bei Artikel ein neues Inhaltselement anlege und als Elementtyp "HTML" wähle, dann funktioniert es zwar, dass ich Javascript dort selber nutzen kann, nachdem ich in Einstellungen unter den erlaubten HTML Tags "Script" hinzugefügt habe und das Attribut "src" hinzugefügt habe, aber wenn ich Vue mit einbinde und etwas mit den doppelten geschweiften Klammern ausgeben lassen will, funktioniert das nicht.
    Folgenden Beispielcode von der Vue Quickstartseite verwendet:

    <script src="https://unpkg.com/vue@3"></script>

    <div id="app">
    <h1>{{message}}</h1>

    </div>

    <script>
    const { createApp } = Vue

    createApp({
    data() {
    return {
    message: 'Hello Vue!'
    }
    }
    }).mount('#app')
    </script>

    Was mache ich falsch?

  2. #2
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.935

    Standard

    Ich nehme an, Contao versucht die doppelten geschweiften Klammern als Insert Tag (https://docs.contao.org/manual/de/ar...g/insert-tags/) zu interpretieren. Du könntest die für Vue ändern: https://vuejs.org/api/application.ht...ons-delimiters
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  3. #3
    Contao-Urgestein Avatar von cliffparnitzky
    Registriert seit
    08.10.2010.
    Ort
    Lüneburg
    Beiträge
    2.446
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    In dem Bereich ist Joe ganz aktiv. Vlt. hilft dir das hier: https://github.com/may17/contao-vue-college

  4. #4
    Contao-Nutzer
    Registriert seit
    02.06.2022.
    Beiträge
    2

    Standard

    Vielen Dank für die Antworten

    Ich habe die doppelt geschweiften Klammern durch einfach geschweiften Klammern ersetzt und jetzt scheint es zu funktionieren

    der Code sieht jetzt so aus:

    <script src="https://unpkg.com/vue@3"></script>

    <div id="app">
    <h1>{message}</h1>

    </div>
    <script>
    const { createApp } = Vue

    createApp({
    delimiters: ['{', '}'],
    data() {
    return {
    message: 'Hello Vue'
    }
    }
    }).mount('#app')
    </script>

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
  •