Vue und Nuxt

Einbettung vorbereiten#

Aktivieren Sie für den Agent die Option Auf meiner Website anzeigen (Agent-Seite → Live schalten → Website-Widget) und tragen Sie unter Erlaubte Website-Adressen die exakte Origin für lokale, Vorschau- und Produktivumgebungen ein. Entscheiden Sie, ob der Agent zur gesamten Anwendung oder nur zu ausgewählten Routenkomponenten gehört.

Websiteweites Nuxt-Plugin#

Erstellen Sie ein .client.ts-Plugin, damit beim Server-Rendering kein DOM-Code ausgeführt wird. Nuxt lädt es einmalig im Browser und hält so den Launcher und die Unterhaltung bei der clientseitigen Navigation stabil.

// plugins/make-agent-fast.client.ts
const slug = "YOUR_SITE_SLUG";

export default defineNuxtPlugin(() => {
  if (document.getElementById(`maf-embed-root-${slug}`)) return;

  const script = document.createElement("script");
  script.id = "maf-agent";
  script.src = "https://makeagent.fast/embed.js?v=20261022-open";
  script.dataset.agent = slug;
  script.dataset.position = "right";
  script.dataset.label = "Ask us";
  script.async = true;
  document.body.appendChild(script);
});

Legen Sie kein Secret in runtimeConfig.public ab; nur der öffentliche Site-Slug und visuelle Einstellungen gehören in den Browser. Echte MAF-API-/Provider-Schlüssel verbleiben in der privaten Server-Runtime-Konfiguration.

Das websiteweite Plugin hat bewusst keine Cleanup-Logik beim Unmount: Es lebt so lange wie die Nuxt-Anwendung. Beim Hot-Module-Replacement in der Entwicklung kann ein vorheriger Root bis zu einem vollständigen Neuladen bestehen bleiben; die Root-Prüfung verhindert einen zweiten Launcher. Überprüfen Sie das endgültige Verhalten mit einem sauberen Produktions-Build, anstatt das Plugin wiederholt in einem langlebigen Tab zu bearbeiten.

Routenspezifische Vue-Komponente#

Für ausgewählte Routen binden Sie den Loader in onMounted ein und entfernen in onBeforeUnmount sowohl das Skript als auch den generierten Root.

<script setup lang="ts">
import { onBeforeUnmount, onMounted } from "vue";

const slug = "YOUR_SITE_SLUG";
let script: HTMLScriptElement | null = null;

onMounted(() => {
  if (document.getElementById(`maf-embed-root-${slug}`)) return;
  script = document.createElement("script");
  script.id = "maf-agent";
  script.src = "https://makeagent.fast/embed.js?v=20261022-open";
  script.dataset.agent = slug;
  script.async = true;
  document.body.appendChild(script);
});

onBeforeUnmount(() => {
  script?.remove();
  document.getElementById(`maf-embed-root-${slug}`)?.remove();
});
</script>

Verwenden Sie genau eine zuständige Komponente. Mehrere Komponenten mit unterschiedlichen Slugs erzeugen absichtlich mehrere Agents, was selten wünschenswert ist.

Wenn eine Vue-Anwendung ohne vollständiges Neuladen der Seite zwischen angemeldeten Mandanten wechselt, behandeln Sie das als expliziten Abbau und erneuten Aufbau. Entfernen Sie den Root des alten Slugs, validieren Sie den öffentlichen Slug des neuen Mandanten anhand vertrauenswürdigen Anwendungszustands und hängen Sie dann ein neues Skript an. Eine Änderung von script.dataset.agent, nachdem der Loader gelaufen ist, richtet das bestehende iframe nicht neu aus.

Die Sicherheits-Header Ihres Hosts gelten weiterhin auch für die Nuxt-/Vue-Ausgabe. Fügen Sie die Loader-/Frame-Origin zur CSP hinzu und erlauben Sie das Mikrofon nur, wenn Sprache aktiviert ist; ein reines Client-Plugin kann eine Browser-Richtlinie auf Response-Ebene nicht überschreiben.

SSR und Routing prüfen#

1. Führen Sie den Produktions-Build von Nuxt/Vue aus und bestätigen Sie, dass kein Fehler document is not defined auftritt.
2. Laden Sie direkt eine Route mit der Einbettung und bestätigen Sie, dass genau ein Root vorhanden ist.
3. Navigieren Sie clientseitig und prüfen Sie das Verhalten für websiteweite und routenspezifische Einbindung.
4. Prüfen Sie embed.js, das iframe, die CSP und die exakte Origin.
5. Senden Sie eine Nachricht und testen Sie das Verhalten auf Mobilgeräten sowie das Mikrofon.

Fehlerbehebung#

Derzeit wird kein npm-Adapter für Vue/Nuxt veröffentlicht; diese Anleitung verwendet direkt den unterstützten gehosteten Loader.