Saltar al contenido principal

​
Implementación con Nuxt

Integre Nuxt 4 con Kameleoon Web Experimentation. Esta guía cubre los pasos para precargar el motor de Kameleoon con protección anti-flicker y ejecutar el script engine.js después de la hidratación del cliente. Esta configuración garantiza un rendimiento óptimo, estabilidad visual y compatibilidad con el ciclo de vida de renderizado de Nuxt. Acceda a implementaciones de referencia para:

​
Acceda a la integración Nuxt 4 lista para producción

Encuentre el repositorio listo para producción aquí: https://github.com/Kameleoon/setup-engine-nuxt-4 Antes de empezar, sustituya el valor del sitecode en integrations/Kameleoon/sitecode.ts.
En función de cuándo haya creado su proyecto de Kameleoon, sus scripts pueden residir en kameleoon.eu o en kameleoon.io. Utilice siempre el dominio de los ajustes de su proyecto en la aplicación Kameleoon.

​
Visión general

​
Flujo de trabajo

FaseDescripciónComponente
Renderizado SSRInyectar el enlace de preload y el CSS anti-flickerKameleoonHead.vue
Hidratación del clienteVue hidrata el DOM—
Post-hidrataciónCargar el motor de Kameleoon de forma asíncronaKameleoonScriptLoader.client.vue
Salida segura de respaldoEliminar el CSS anti-flicker si el script falla o se atascaKameleoonScriptLoader.client.vue

​
Configuración rápida

  1. Añada la carpeta integrations/Kameleoon a su proyecto Nuxt.
  2. Importe y registre ambos componentes de la integración en su layout (recomendamos layouts/default.vue). Consulte: Uso en default.vue.

​
Componentes

La integración utiliza dos componentes Vue ejecutados en distintas etapas del pipeline de renderizado de Nuxt:
ComponenteContexto de ejecuciónPropósito
KameleoonHead.vueLado servidor (SSR)Inyecta la directiva de preload y el CSS anti-flicker antes de la hidratación
KameleoonScriptLoader.client.vueLado cliente (post-hidratación)Carga el script del motor y gestiona el timeout anti-flicker
Este enfoque proporciona un renderizado rápido, un comportamiento estable de la interfaz y compatibilidad total con la hidratación de Nuxt.

​
1. KameleoonHead.vue

KameleoonHead.vue se ejecuta solo durante el renderizado del lado del servidor. Prepara la página para una experiencia sin flickering:
  • Inyectando CSS anti-flicker durante el SSR.
  • Precargando el motor de Kameleoon (engine.js) para que el navegador lo obtenga cuanto antes.
<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>
Consulte KameleoonHead.vue en GitHub.

​
2. KameleoonScriptLoader.client.vue

KameleoonScriptLoader.client.vue se ejecuta en el cliente después de la hidratación. El componente:
  • Elimina la hoja de estilos anti-flicker cuando la página está lista.
  • Carga dinámicamente el script engine.js.
  • Gestiona los tiempos y el comportamiento de respaldo para la carga lenta del 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>
Consulte KameleoonScriptLoader.client.vue en GitHub.
El timeout anti-flicker predeterminado es de 750 ms. Ajuste kameleoonLoadingTimeout según sea necesario.

​
Uso en default.vue

Utilice el siguiente ejemplo para combinar componentes en su 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>
Consulte default.vue en GitHub.

​
Conclusiones clave

  • Evite advertencias de discrepancia en la hidratación.
  • Garantice una experiencia sin flickering antes de la inicialización de Kameleoon.
  • Cargue el script solo una vez, también durante la navegación SPA.
  • Mantenga la compatibilidad con layouts, páginas, rutas dinámicas y renderizado condicional.
Con esta configuración, su aplicación Nuxt carga y ejecuta Kameleoon de manera fiable sin afectar a la estabilidad del renderizado.