> ## 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. # Implementación con Nuxt > Integre Nuxt 4 con Kameleoon Web Experimentation precargando el motor con protección anti-flicker y ejecutando engine.js después de la hidratación. # 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: * [Nuxt 3](https://github.com/Kameleoon/setup-engine-nuxt-3) * [Nuxt 2](https://github.com/Kameleoon/setup-engine-nuxt-2) ### 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](https://github.com/Kameleoon/setup-engine-nuxt-4) Antes de empezar, **sustituya el valor del sitecode** en [`integrations/Kameleoon/sitecode.ts`](https://github.com/Kameleoon/setup-engine-nuxt-4/blob/main/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 | Fase | Descripción | Componente | | ----------------------------- | ----------------------------------------------------------- | ---------------------------------- | | **Renderizado SSR** | Inyectar el enlace de preload y el CSS anti-flicker | `KameleoonHead.vue` | | **Hidratación del cliente** | Vue hidrata el DOM | — | | **Post-hidratación** | Cargar el motor de Kameleoon de forma asíncrona | `KameleoonScriptLoader.client.vue` | | **Salida segura de respaldo** | Eliminar el CSS anti-flicker si el script falla o se atasca | `KameleoonScriptLoader.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`](#usage-in-defaultvue). *** ## Componentes La integración utiliza **dos componentes Vue** ejecutados en distintas etapas del pipeline de renderizado de Nuxt: | Componente | Contexto de ejecución | Propósito | | ---------------------------------- | ----------------------------------- | ----------------------------------------------------------------------------- | | `KameleoonHead.vue` | **Lado servidor (SSR)** | Inyecta la directiva de preload y el CSS anti-flicker antes de la hidratación | | `KameleoonScriptLoader.client.vue` | **Lado 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. ```ts theme={null} ``` Consulte [`KameleoonHead.vue`](https://github.com/Kameleoon/setup-engine-nuxt-4/blob/main/integrations/Kameleoon/components/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. ```ts theme={null} ``` Consulte [`KameleoonScriptLoader.client.vue`](https://github.com/Kameleoon/setup-engine-nuxt-4/blob/main/integrations/Kameleoon/components/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: ```ts theme={null} ``` Consulte [`default.vue`](https://github.com/Kameleoon/setup-engine-nuxt-4/blob/main/layouts/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.