Nuxt 3 & Vue.js: Reactive Cookie Banner, Script Blocking & Google

1. Executive Technical Brief & The SSR Hydration Paradox

Implementing cookie banners within Single Page Applications (SPAs) and Server-Side Rendered (SSR) frameworks such as Nuxt 3 introduces a distinct structural challenge: the race condition between server-side HTML generation, client-side hydration, and asynchronous tracking scripts. Under Article 5(3) of the ePrivacy Directive ↗ 2002/58/EC (amended by Directive 2009/136/EC) and Article 7 of the GDPR, no non-essential cookie or device fingerprint identifier may be read or written prior to unambiguous, freely given, affirmative consent.

In standard Vue 3 implementations, developers frequently trigger consent banner visibility inside onMounted() by reading localStorage or client-only cookies. This induces two major failures: an audible Cumulative Layout Shift (CLS) combined with Vue hydration mismatch warnings (Mismatching childNodes vs. VNode), or worse, a legal breach where tracking scripts injected via GTM execute during initial hydration before the reactive state can evaluate consent. In SSG (Static Site Generation) or prerendered contexts, baking tracking tags into the static payload leaks IP addresses and user agents to Google, Meta, and TikTok endpoints before client hydration even begins.

To achieve technical and legal compliance, Nuxt 3 architectures must utilize synchronous SSR cookie reads through useCookie, inject Google Consent Mode v2 default 'denied' signals at the document head before any tracking library executes, and manage runtime vendor scripts using the native useScript or declarative useHead composables.

2. Architectural Blueprint

The core architecture establishes consent evaluation on the Nitro server engine before sending the response stream to the browser. This eliminates hydration flicker and ensures that Google Consent Mode v2 (CoM v2) default states are established inline prior to the initialization of GTM (Google Tag Manager) container scripts.

Step 1: Establishing Consent Mode v2 Defaults in nuxt.config.ts

Inject the inline initialization script directly in nuxt.config.ts. The default state for ad_storage, analytics_storage, ad_user_data, and ad_personalization must evaluate to 'denied' on first contact.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          hid: 'consent-mode-v2-init',
          children: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('consent', 'default', {
              'ad_storage': 'denied',
              'analytics_storage': 'denied',
              'ad_user_data': 'denied',
              'ad_personalization': 'denied',
              'wait_for_update': 500
            });
            gtag('set', 'ads_data_redaction', true);
          `,
          type: 'text/javascript'
        },
        {
          hid: 'gtm-loader',
          children: `
            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-XXXXXXX');
          `,
          type: 'text/javascript'
        }
      ]
    }
  }
});

Step 2: Reactive Consent Management via Pinia and useCookie

We read the cookie server-side using useCookie. By default, useCookie serializes and deserializes values during both SSR rendering and hydration, ensuring identical DOM node representation without mismatch errors.

// stores/consent.ts
import { defineStore } from 'pinia';

export interface ConsentCategories {
  analytics: boolean;
  marketing: boolean;
  functional: boolean;
}

export const useConsentStore = defineStore('consent', () => {
  const defaultConsent: ConsentCategories = {
    analytics: false,
    marketing: false,
    functional: false
  };

  const cookieConsent = useCookie<ConsentCategories | null>('cd_consent_state', {
    maxAge: 60 * 60 * 24 * 180, // 6 months, complying with CNIL guidelines ↗
    sameSite: 'lax',
    secure: true,
    watch: true
  });

  const consentGiven = computed(() => cookieConsent.value !== null);
  const categories = ref<ConsentCategories>(cookieConsent.value || defaultConsent);

  function syncWithGoogleConsentMode(state: ConsentCategories) {
    if (process.client && window.gtag) {
      window.gtag('consent', 'update', {
        'analytics_storage': state.analytics ? 'granted' : 'denied',
        'ad_storage': state.marketing ? 'granted' : 'denied',
        'ad_user_data': state.marketing ? 'granted' : 'denied',
        'ad_personalization': state.marketing ? 'granted' : 'denied'
      });
      window.dataLayer.push({
        event: 'cookie_consent_update',
        consent_analytics: state.analytics,
        consent_marketing: state.marketing
      });
    }
  }

  function setConsent(newPreferences: ConsentCategories) {
    categories.value = { ...newPreferences };
    cookieConsent.value = newPreferences;
    syncWithGoogleConsentMode(newPreferences);
  }

  function acceptAll() {
    setConsent({ analytics: true, marketing: true, functional: true });
  }

  function rejectAll() {
    setConsent({ analytics: false, marketing: false, functional: false });
  }

  return {
    categories,
    consentGiven,
    setConsent,
    acceptAll,
    rejectAll,
    syncWithGoogleConsentMode
  };
});

Step 3: Blocking Non-GTM Third-Party Scripts using useScript

When loading third-party scripts (e.g., Meta Pixel, Hotjar, or Stripe) outside GTM, use Nuxt's useScript or conditionally mount scripts inside custom plugins based on the Pinia store's reactive state.

// composables/useVendorTracking.ts
export function useVendorTracking() {
  const consentStore = useConsentStore();

  watch(
    () => consentStore.categories.marketing,
    (granted) => {
      if (granted && process.client) {
        useScript({
          src: 'https://connect.facebook.net/en_US/fbevents.js',
          async: true
        });
      }
    },
    { immediate: true }
  );
}

Regulatory Risk Matrix : Nuxt 3 & Vue.js: Reactive Cookie

European data protection authorities, including the CNIL (France), DPC (Ireland), and AEPD (Spain), have established rigorous parameters for technical consent management. The table below delineates non-compliant engineering practices from forensic-grade implementations under the GDPR and ePrivacy directive ↗s.

Implementation Protocol : Nuxt 3 & Vue.js: Reactive Cookie

To ensure that your Nuxt 3 implementation withstands a regulatory audit by the CNIL or data protection litigators, apply the following step-by-step forensic verification protocol using Chromium DevTools.

Verification Step 1: Network Gatekeeping on First Load

1. Open a new incognito Chromium session and launch DevTools (F12). Navigate to the Network tab.
2. Filter by google-analytics.com, doubleclick.net, or your vendor endpoint domains (e.g., connect.facebook.net).
3. Load the Nuxt 3 application. Check the outgoing requests:
   • No network request to collect endpoints should appear prior to user interaction.
   • If Consent Mode v2 Basic mode is used, GTM should not fire tags. If Advanced mode is configured, verify that outgoing pings include &gcs=G100 (Analytics and Ads denied) and no client ID/cookie data is present in payload headers.

Verification Step 2: Validating Consent Mode v2 Parameters in DevTools Console

Verify that your dataLayer preserves correct event sequencing. Execute the following script in the Console:

console.table(
  dataLayer.filter(item => item[0] === 'consent' || item.event === 'cookie_consent_update')
);

The console output must exhibit a sequential execution order:

1. consent, default with all values set to denied (Timestamp: 0ms).
2. gtm.js container initialization.
3. User interaction (e.g., clicking 'Accept All').
4. consent, update with granted parameters.
5. cookie_consent_update custom trigger event.

Verification Step 3: Hydration Mismatch & Cookie Expiry Validation

Check the Application tab under Storage > Cookies. Inspect cd_consent_state:

• Expires / Max-Age: Must not exceed 6 to 12 months (CNIL guidance mandates 6 months; UK ICO mandates maximum 12 months).
• Secure: Must be true.
• SameSite: Must be set to Lax or Strict.
• Ensure no console errors stating [Vue warn]: Hydration node mismatch are logged on cold loads.

Strategic Verdict : Nuxt 3 & Vue.js: Reactive Cookie

Deploying third-party tracking in high-performance Nuxt 3 applications without rigorous state isolation exposes European organizations to severe financial and regulatory liability. Third-party consent wrappers that rely exclusively on client-side script injection frequently fail due to timing errors during Vue SSR hydration.

Technical leaders and DPOs must enforce an architectural standard that combines:

• SSR-first Cookie State Extraction: Utilizing useCookie within Nuxt server contexts to eliminate layout shifts, prevent hydration mismatch bugs, and provide server components with deterministic consent states.
• Strict Consent Mode v2 Defaults: Injecting immutable 'denied' states inside nuxt.config.ts inline scripts, ensuring no tracking pixels can access terminal equipment prematurely.
• Declarative Third-Party Asset Loading: Restricting analytics and marketing tags to load only through reactive Nuxt composables (useScript) or tightly conditioned GTM triggers linked to the cookie_consent_update event.

Adherence to this framework fulfills the burden of proof required under Article 7(1) of the GDPR, mitigates enforcement action under CNIL Deliberations 2020-091/092, and preserves search performance by eliminating client-side layout shifts.