> ## 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. # Implementation avec Nuxt > Integrez Nuxt 4 a Kameleoon Web Experimentation en prechargeant le moteur avec une protection anti-flicker et en executant engine.js apres l'hydratation. # 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 : * [Nuxt 3](https://github.com/Kameleoon/setup-engine-nuxt-3) * [Nuxt 2](https://github.com/Kameleoon/setup-engine-nuxt-2) ### 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](https://github.com/Kameleoon/setup-engine-nuxt-4) Avant de commencer, **remplacez la valeur sitecode** dans [`integrations/Kameleoon/sitecode.ts`](https://github.com/Kameleoon/setup-engine-nuxt-4/blob/main/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 | Phase | Description | Composant | | ---------------------- | ---------------------------------------------------------- | ---------------------------------- | | **Rendu SSR** | Injecter le lien preload et le CSS anti-flicker | `KameleoonHead.vue` | | **Hydratation client** | Vue hydrate le DOM | — | | **Post-hydratation** | Charger le moteur Kameleoon de manière asynchrone | `KameleoonScriptLoader.client.vue` | | **Sortie de secours** | Supprimer le CSS anti-flicker si le script échoue ou tarde | `KameleoonScriptLoader.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`](#usage-in-defaultvue). *** ## Composants L'intégration utilise **deux composants Vue** exécutés à différentes étapes du pipeline de rendu Nuxt : | Composant | Contexte d'exécution | Objectif | | ---------------------------------- | ---------------------------------- | -------------------------------------------------------------------------------- | | `KameleoonHead.vue` | **Côté serveur (SSR)** | Injecte la directive de préchargement et le CSS anti-flicker avant l'hydratation | | `KameleoonScriptLoader.client.vue` | **Cô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. ```ts theme={null} ``` Voir [`KameleoonHead.vue`](https://github.com/Kameleoon/setup-engine-nuxt-4/blob/main/integrations/Kameleoon/components/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. ```ts theme={null} ``` Voir [`KameleoonScriptLoader.client.vue`](https://github.com/Kameleoon/setup-engine-nuxt-4/blob/main/integrations/Kameleoon/components/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 : ```ts theme={null} ``` Voir [`default.vue`](https://github.com/Kameleoon/setup-engine-nuxt-4/blob/main/layouts/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.