Passer au contenu principal

​
Implémentation avec Nuxt

Intégrez Nuxt 4 à Kameleoon Web Experimentation. Ce guide couvre les étapes pour précharger le moteur Kameleoon avec une protection anti-flicker et exécuter le script engine.js après l’hydratation client. Cette configuration garantit des performances optimales, une stabilité visuelle et la compatibilité avec le cycle de vie de rendu de Nuxt. Accédez aux implémentations de référence pour :

​
Accéder à l’intégration Nuxt 4 prête pour la production

Retrouvez le dépôt prêt pour la production ici : https://github.com/Kameleoon/setup-engine-nuxt-4 Avant de commencer, remplacez la valeur sitecode dans integrations/Kameleoon/sitecode.ts.
Selon la date de création de votre projet Kameleoon, vos scripts peuvent résider sur kameleoon.eu ou kameleoon.io. Utilisez toujours le domaine présent dans les paramètres de votre projet dans l’application Kameleoon.

​
Vue d’ensemble

​
Flux de travail

PhaseDescriptionComposant
Rendu SSRInjecter le lien preload et le CSS anti-flickerKameleoonHead.vue
Hydratation clientVue hydrate le DOM—
Post-hydratationCharger le moteur Kameleoon de manière asynchroneKameleoonScriptLoader.client.vue
Sortie de secoursSupprimer le CSS anti-flicker si le script échoue ou tardeKameleoonScriptLoader.client.vue

​
Configuration rapide

  1. Ajoutez le dossier integrations/Kameleoon à votre projet Nuxt.
  2. Importez et enregistrez les deux composants d’intégration dans votre layout (nous recommandons layouts/default.vue). Voir : Utilisation dans default.vue.

​
Composants

L’intégration utilise deux composants Vue exécutés à différentes étapes du pipeline de rendu Nuxt :
ComposantContexte d’exécutionObjectif
KameleoonHead.vueCôté serveur (SSR)Injecte la directive de préchargement et le CSS anti-flicker avant l’hydratation
KameleoonScriptLoader.client.vueCôté client (post-hydratation)Charge le script du moteur et gère le timeout anti-flicker
Cette approche garantit un rendu rapide, un comportement d’interface stable et une compatibilité complète avec l’hydratation Nuxt.

​
1. KameleoonHead.vue

KameleoonHead.vue s’exécute uniquement pendant le rendu côté serveur. Il prépare la page pour une expérience sans clignotement en :
  • Injectant le CSS anti-flicker pendant le SSR.
  • Préchargeant le moteur Kameleoon (engine.js) pour que le navigateur le récupère tôt.
<script setup>
import { SITECODE_SRC } from "../sitecode";
</script>

<template>
    <Head>
        <!-- preload script early -->
        <Link rel="preload" :href="SITECODE_SRC" as="script" fetchpriority="high" />

        <!-- anti-flicker CSS -->
        <Style id="kameleoonLoadingStyleSheet">
            html::after { content: ''; position: fixed; inset: 0; background: #fff; z-index: 2147483647; }
        </Style>
    </Head>
</template>
Voir KameleoonHead.vue sur GitHub.

​
2. KameleoonScriptLoader.client.vue

KameleoonScriptLoader.client.vue s’exécute côté client après l’hydratation. Le composant :
  • Supprime la feuille de style anti-flicker lorsque la page est prête.
  • Charge dynamiquement le script engine.js.
  • Gère le timing et le comportement de secours en cas de chargement lent du script.
<script setup>
defineOptions({ name: "KameleoonScriptLoader" });

import { nextTick, onMounted } from "vue";
import { SITECODE_SRC } from "~/integrations/Kameleoon/sitecode";

onMounted(async () => {
    await nextTick();

    const kameleoonLoadingTimeout = 500;

    window.kameleoonQueue = window.kameleoonQueue || [];
    window.kameleoonStartLoadTime = Date.now();

    window.kameleoonDisplayPage = function (fromEngine) {
        if (!fromEngine) {
            window.kameleoonTimeout = true;
        }
        document.getElementById("kameleoonLoadingStyleSheet")?.remove();
    };

    window.kameleoonDisplayPageTimeOut = setTimeout(window.kameleoonDisplayPage, kameleoonLoadingTimeout);

    const alreadyLoaded = document.querySelector(`script[src*="${SITECODE_SRC}"]`);
    if (!alreadyLoaded) {
        const script = document.createElement("script");
        script.src = SITECODE_SRC;
        script.async = true;
        document.head.appendChild(script);
    }
});
</script>

<template>
    <!-- nothing rendered -->
</template>
Voir KameleoonScriptLoader.client.vue sur GitHub.
Le timeout anti-flicker par défaut est de 750 ms. Ajustez kameleoonLoadingTimeout selon vos besoins.

​
Utilisation dans default.vue

Utilisez l’exemple suivant pour combiner les composants dans votre layout : 
<script setup>
import KameleoonHead from "~/integrations/Kameleoon/components/KameleoonHead.vue";
import KameleoonScriptLoader from "~/integrations/Kameleoon/components/KameleoonScriptLoader.client.vue";
</script>

<template>
    <!-- SSR: preload + anti-flicker -->
    <KameleoonHead />

    <!-- Client: load script after hydration -->
    <KameleoonScriptLoader />

    <!-- Layout UI -->
    <div class="min-h-screen bg-background font-inter">
        <Navigation />

        <main class="container mx-auto px-4 py-8">
            <NuxtPage />
        </main>
    </div>
</template>
Voir default.vue sur GitHub.

​
Points clés

  • Empêcher les avertissements de désynchronisation d’hydratation.
  • Garantir une expérience sans clignotement avant l’initialisation de Kameleoon.
  • Charger le script une seule fois, y compris pendant la navigation SPA.
  • Maintenir la compatibilité avec les layouts, pages, routes dynamiques et rendu conditionnel.
Avec cette configuration, votre application Nuxt charge et exécute Kameleoon de manière fiable sans affecter la stabilité du rendu.