Comment ajouter un bandeau cookies à une application Nuxt

Où charger la balise dans Nuxt

Nuxt rend le head de chaque page à partir de app.head dans nuxt.config.ts, via Unhead. Une entrée script est un objet dont les clés deviennent des attributs, la balise se transpose donc directement :

ts
// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://cookiequiet.com/cq.js",
          defer: true,
          "data-site": "YOUR_SITE_KEY",
          "data-consent-mode": "1",
          "data-auto-block": "1",
          tagPosition: "head",
          key: "cookiequiet",
        },
      ],
    },
  },
});

Gardez-la en premier dans le tableau pour qu’elle soit rendue avant tout autre script du head. tagPosition accepte head, bodyOpen et bodyClose ; head est la valeur par défaut et la bonne ici. Le même objet fonctionne dans un appel useHead dans app.vue si vous préférez le garder à côté du reste de la logique du head ; la key évite les doublons. Sur Nuxt 2, l’équivalent est head.script dans nuxt.config.js.

Comment gérer les balises que votre application charge

Cookiequiet active les scripts marqués quand un choix enregistré est appliqué au chargement et à chaque fois que le visiteur fait un choix. Dans une application Nuxt, cela veut dire que les balises marquées ont leur place dans le head rendu côté serveur, pas dans des composants montés plus tard.

Entrées marquées. Ajoutez-les au même tableau script, après l’entrée Cookiequiet ; le code inline va dans innerHTML :

ts
{ type: "text/plain", "data-cq-category": "analytics", src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX" },
{
  type: "text/plain",
  "data-cq-category": "analytics",
  innerHTML: "window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXX');",
},

Le code de base du pixel Meta reçoit "data-cq-category": "marketing". Rien de tout cela ne s’exécute avant que la catégorie soit accordée.

Consent Mode plutôt que marquage. Pour que Google Analytics ou Google Ads continue de se charger avec des signaux refusés par défaut (pings sans cookies, données modélisées), insérez une entrée contenant le bloc de consentement par défaut de Google dans innerHTML, entre l’entrée Cookiequiet et l’entrée de la balise Google, comme montré dans le guide Google Analytics 4. Les modules qui injectent la balise Google à votre place proposent en général une option d’initialisation manuelle ou de consentement ; utilisez-la pour régler les valeurs par défaut sur refusé, et Cookiequiet envoie la mise à jour.

Composants qui dépendent du consentement. Lisez le choix dans onMounted via l’API publique : window.Cookiequiet.get() renvoie le choix enregistré (son tableau c liste les catégories accordées) et window.Cookiequiet.on(callback) rappelle après chaque choix et renvoie une fonction de désabonnement. Un petit composable peut exposer granted("marketing") à un composant YouTube, qui affiche un espace réservé avec un bouton « Préférences de cookies » jusque-là. Pour les iframes ordinaires dans les templates, data-cq-src à la place de src suffit.

Comment ajouter le lien Préférences de cookies

Dans le pied de page du layout, une ancre ordinaire suffit ; ne la faites pas passer par NuxtLink :

html
<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>

Comment tester

1. Lancez l’application (nuxi dev convient ; le bandeau récupère sa configuration depuis cookiequiet.com) et ouvrez-la dans une fenêtre de navigation privée.
2. Cliquez sur « Tout refuser » : les cookies sont cq_consent et les vôtres, pas de _ga, pas de _fbp.
3. Effacez les cookies, cliquez sur « Tout accepter », rechargez : les entrées marquées s’exécutent, leurs cookies apparaissent.
4. Naviguez entre les pages : le bandeau reste fermé et le choix reste appliqué.
5. Consultez le registre des consentements dans le tableau de bord.

Ce qui est propre à Nuxt

• SSR, SPA et statique. Avec ssr: false, Unhead rend quand même le head côté client ; avec nuxi generate, la balise figure dans chaque page générée. Les trois fonctionnent.
• Layers et modules. Un layer ou un module qui ajoute la balise Google l’ajoute au même head ; vérifiez l’ordre rendu dans le code source de la page et gardez l’entrée Cookiequiet en premier.
• Content Security Policy. Autorisez https://cookiequiet.com dans script-src et connect-src si vous en définissez une.
• i18n. La langue du bandeau suit le navigateur du visiteur, et chaque texte est modifiable par langue ; elle ne lit pas la locale Nuxt.

Si une balise finit chargée par un plugin que vous ne pouvez pas marquer, le bloqueur automatique retient quand même jusqu’au consentement les scripts et iframes d’environ 80 traceurs connus créés en JavaScript, et le scanner de cookies vous dit ce qui reste.