Consent Management

What the consent abstraction does

A storefront usually loads scripts from several vendors (analytics, ads, chat, retargeting). Each vendor needs the user's consent before it runs, and the law cares about the category of cookie, not the vendor. Laioutr's consent layer separates the two: your code asks "does the user consent to statistics?" and the active CMP (Cookiebot, CCM19, OneTrust, custom) answers. Switching CMPs later is a config change, not a rewrite.

The abstraction gives you a consent store with five fixed categories and a provider-agnostic useConsentStore() composable. A consent adapter maps a concrete CMP into that store. Other Laioutr features (tracking, GTM) read the store too, so a single source of truth gates every consented behaviour in the frontend.

const consentStore = useConsentStore();

if (consentStore.hasCategoryConsent('statistics')) {
  loadHeatmapScript();
}

The store lives in @laioutr-core/frontend-core. Your Nuxt app must include the module so useConsentStore() and the #frontend/consent types are available.

The five consent categories

Every adapter normalises its CMP's categories into this fixed shape, so the rest of the app only deals with one model:

The store keeps a single state object with these five booleans. Whenever the user accepts or revokes a category in the CMP, the active adapter pushes the change into the store, and state updates reactively.

Using the consent store

useConsentStore() is a global state created with VueUse's createGlobalState. Auto-imported by frontend-core, you can call it from any component, composable, or plugin.

The methods you will use most:

A typical "Cookie preferences" footer link:

<script setup lang="ts">
const consentStore = useConsentStore();
</script>

<template>
  <button type="button" @click="consentStore.showConsentOverlay()">
    Cookie preferences
  </button>
</template>

Reacting to consent changes outside a template (for example, lazy-loading a chat widget once the user accepts marketing):

const consentStore = useConsentStore();

consentStore.onConsentChange((consent) => {
  if (consent.marketing) {
    loadChatWidget();
  }
});

How other features read consent

The store is consumed across the platform, not just by your code:

• The tracking store gates events per adapter. A tracking adapter declares consentCategories: ['statistics'], and the store only forwards events to it once hasCategoryConsent('statistics') is true. Adapters without consentCategories receive every event (useful for GTM, which manages consent itself via Consent Mode).
• The GTM app sets Google Consent Mode defaults to denied, then watches the active adapter's consent updates and calls gtag('consent', 'update', ...) when the user grants statistics or marketing.

This means once a CMP adapter is active and the user has accepted analytics, GA fires through GTM without any further wiring in your app.

Ready-to-use consent apps

There already are a few standalone Laioutr apps that register a ConsentAdapter for you: the Cookiebot app and the CCM19 app. Add the module, set the credentials, and the store and tracking/GTM consent are wired up.

Building your own consent adapter

If you need a CMP that is not on the list (OneTrust, CookieYes, an in-house solution), you can build a Laioutr app that registers a ConsentAdapter with the store. The full contract, plugin boilerplate, and worked examples drawn from the Cookiebot and CCM19 sources live in Consent Adapters under app development.

Summary

• One store, five categories, one set of methods. Write your code against useConsentStore() and stop caring about which CMP is behind it.
• Use hasCategoryConsent(category) to gate behaviour, onConsentChange to react, and showConsentOverlay / renewConsent for "Cookie preferences" UI.
• Drop in Cookiebot or CCM19 for ready-to-use providers, or build your own following the Consent Adapters guide.