> ## Documentation Index > Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt > Use this file to discover all available pages before exploring further. # Implementierung mit Nuxt > Integrieren Sie Nuxt 4 in Kameleoon Web Experimentation, indem Sie die Engine mit Anti-Flicker-Schutz vorab laden und engine.js nach der Hydratation ausfuehren. # Implementierung mit Nuxt Integrieren Sie **Nuxt 4** in **Kameleoon Web Experimentation**. Dieser Leitfaden behandelt die Schritte zum Vorabladen der Kameleoon-Engine mit **Anti-Flicker-Schutz** und zum Ausfuehren des `engine.js`-Skripts **nach der Client-Hydratation**. Diese Einrichtung sorgt fuer optimale Leistung, visuelle Stabilitaet und Kompatibilitaet mit dem Nuxt-Rendering-Lebenszyklus. Greifen Sie auf Referenzimplementierungen zu fuer: * [Nuxt 3](https://github.com/Kameleoon/setup-engine-nuxt-3) * [Nuxt 2](https://github.com/Kameleoon/setup-engine-nuxt-2) ### Zugriff auf die produktionsbereite Nuxt-4-Integration Das produktionsbereite Repository finden Sie hier: [https://github.com/Kameleoon/setup-engine-nuxt-4](https://github.com/Kameleoon/setup-engine-nuxt-4) Bevor Sie beginnen, **ersetzen Sie den Sitecode-Wert** in [`integrations/Kameleoon/sitecode.ts`](https://github.com/Kameleoon/setup-engine-nuxt-4/blob/main/integrations/Kameleoon/sitecode.ts). Abhaengig vom Erstellungszeitpunkt Ihres Kameleoon-Projekts koennen Ihre Skripte auf `kameleoon.eu` oder `kameleoon.io` liegen. Verwenden Sie immer die in Ihren Projekteinstellungen in der Kameleoon App angezeigte Domain. *** ## Ueberblick ### Arbeitsablauf | Phase | Beschreibung | Komponente | | ---------------------- | ------------------------------------------------------------------------ | ---------------------------------- | | **SSR-Rendering** | Preload-Link und Anti-Flicker-CSS einfuegen | `KameleoonHead.vue` | | **Client-Hydratation** | Vue hydratisiert das DOM | — | | **Nach Hydratation** | Kameleoon-Engine asynchron laden | `KameleoonScriptLoader.client.vue` | | **Fallback-Safe-Exit** | Anti-Flicker-CSS entfernen, wenn das Skript fehlschlaegt oder verzoegert | `KameleoonScriptLoader.client.vue` | ### Schnelle Einrichtung 1. Fuegen Sie den Ordner `integrations/Kameleoon` Ihrem Nuxt-Projekt hinzu. 2. Importieren und registrieren Sie beide Integrationskomponenten in Ihrem Layout (wir empfehlen `layouts/default.vue`). Siehe: [Verwendung in `default.vue`](#usage-in-defaultvue). *** ## Komponenten Die Integration verwendet **zwei Vue-Komponenten**, die in verschiedenen Phasen der Nuxt-Rendering-Pipeline ausgefuehrt werden: | Komponente | Ausfuehrungskontext | Zweck | | ---------------------------------- | ----------------------------------- | ---------------------------------------------------------------------------- | | `KameleoonHead.vue` | **Serverseitig (SSR)** | Fuegt die Preload-Direktive und das Anti-Flicker-CSS vor der Hydratation ein | | `KameleoonScriptLoader.client.vue` | **Clientseitig (nach Hydratation)** | Laedt das Engine-Skript und verwaltet das Anti-Flicker-Timeout | Dieser Ansatz bietet schnelles Rendering, stabiles UI-Verhalten und volle Kompatibilitaet mit der Nuxt-Hydratation. *** ### 1. `KameleoonHead.vue` `KameleoonHead.vue` laeuft **nur waehrend des serverseitigen Renderings**. Es bereitet die Seite auf ein flackerfreies Erlebnis vor, indem es: * Anti-Flicker-CSS waehrend des SSR einfuegt. * Die Kameleoon-Engine (`engine.js`) vorab laedt, damit der Browser sie frueh abruft. ```ts theme={null} ``` Siehe [`KameleoonHead.vue`](https://github.com/Kameleoon/setup-engine-nuxt-4/blob/main/integrations/Kameleoon/components/KameleoonHead.vue) auf GitHub. *** ### 2. `KameleoonScriptLoader.client.vue` `KameleoonScriptLoader.client.vue` wird **auf dem Client nach der Hydratation** ausgefuehrt. Die Komponente: * Entfernt das Anti-Flicker-Stylesheet, wenn die Seite bereit ist. * Laedt das `engine.js`-Skript dynamisch. * Verwaltet Timing und Fallback-Verhalten fuer langsames Skript-Laden. ```ts theme={null} ``` Siehe [`KameleoonScriptLoader.client.vue`](https://github.com/Kameleoon/setup-engine-nuxt-4/blob/main/integrations/Kameleoon/components/KameleoonScriptLoader.client.vue) auf GitHub. Der standardmaessige Anti-Flicker-Timeout betraegt `750 ms`. Passen Sie `kameleoonLoadingTimeout` nach Bedarf an. *** ## Verwendung in `default.vue` Verwenden Sie das folgende Beispiel, um Komponenten in Ihrem Layout zu kombinieren: ```ts theme={null} ``` Siehe [`default.vue`](https://github.com/Kameleoon/setup-engine-nuxt-4/blob/main/layouts/default.vue) auf GitHub. *** ## Wichtige Erkenntnisse * Hydratations-Inkonsistenz-Warnungen verhindern. * Eine flackerfreie Erfahrung vor der Kameleoon-Initialisierung sicherstellen. * Das Skript **nur einmal** laden, auch waehrend SPA-Navigation. * Kompatibilitaet mit Layouts, Seiten, dynamischen Routen und bedingtem Rendering wahren. Mit dieser Konfiguration laedt und fuehrt Ihre Nuxt-Anwendung Kameleoon zuverlaessig aus, ohne die Render-Stabilitaet zu beeintraechtigen.