Cookiebot

Overview

The @laioutr-app/cookiebot package wires Cookiebot into a Laioutr-powered Nuxt app as a consent adapter. On install, a client plugin builds an adapter with createCookiebotAdapter() and installs it on useConsentStore() from @laioutr-core/frontend-core. The adapter injects the Cookiebot script, reads the CookieConsent cookie, maps Cookiebot's four categories onto Laioutr's consent purposes, and forwards consent changes to the store.

Only cbid is required. consentMode and consentModeDefaults toggle Google Consent Mode v2 integration. The module installs @laioutr-core/frontend-core on prepare.

Configuration requirements

The module expects configuration under the key @laioutr-app/cookiebot in nuxt.config.ts (or via runtimeConfig). One option is required; two have defaults.

Module options

Example configuration

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@laioutr-app/cookiebot'],
  '@laioutr-app/cookiebot': {
    cbid: process.env.COOKIEBOT_CBID!,
    consentMode: true,
    consentModeDefaults: true,
  },
});

Use an environment variable for cbid in production if you prefer not to hardcode it; the value is public so it can be exposed to the client.

Runtime behaviour

The client plugin reads runtimeConfig.public['@laioutr-app/cookiebot'], builds the adapter with createCookiebotAdapter(config), and installs it via useConsentStore().setAdapter(adapter). In setup() the adapter injects the Cookiebot script via useHead, reads the CookieConsent cookie via useCookie and reports it immediately when present, and on the client also listens for CookiebotOnLoad, CookiebotOnConsentReady, CookiebotOnAccept, and CookiebotOnDecline to forward consent updates.

Cookiebot's categories map onto Laioutr's purposes as follows: necessary → necessary, preferences → functional, statistics → analytics, and marketing → both advertising and personalization. Cookiebot has one marketing bucket and cannot tell those two apart, so a visitor who allowed measurement but refused personalisation cannot say so through Cookiebot; a CMP that reports them separately does. Cookiebot's unclassified is not a consent category — it means the scanner found a cookie it could not file — so nothing is derived from it.

Because the cookie is readable through useCookie, setup() reports the visitor's choice synchronously, and the first SSR render reflects it with no flash.

openConsentUi() calls window.Cookiebot.show(); openConsentUi('preferences') calls window.Cookiebot.renew(). For the full adapter contract and how to wire equivalent methods for another CMP, see the Consent Adapters guide.

What it integrates with

The Cookiebot script renders the consent banner and stores the user's choices in the CookieConsent cookie. Once the adapter is active, anything that reads useConsentStore() respects those choices: your own hasPurposeConsent('analytics') checks, the analytics layer's per-destination consent: { purposes: […] } gate, and the GTM app's Google Consent Mode gtag('consent', 'update', ...) calls.

For the consumer-facing API (useConsentStore, openConsentUi, onConsentChange) see the Consent Management feature.

Backend requirements

• A Cookiebot account at cookiebot.com, with your domain configured and a CBID issued for it.
• @laioutr-core/frontend-core installed in the host app (the Cookiebot module installs it on prepare, so just ensure the app does not strip it).

Cookies and context

Summary checklist

• Add @laioutr-app/cookiebot to Nuxt modules.
• Set cbid (and optionally consentMode, consentModeDefaults) under @laioutr-app/cookiebot (e.g. from env).
• Ensure your Cookiebot domain group is configured and the CBID matches.
• Use the consent store (e.g. useConsentStore(), hasPurposeConsent) in your app or in other apps (e.g. GTM) to gate scripts based on consent.

Changelog

All changelogs are managed in CHANGELOG.md in the package’s GitHub repository. This app does not currently have a public repository under the Laioutr organization; when it is published there, use that repo’s CHANGELOG.md for release notes.