Nuxt 3 Cookie Consent: The Complete Guide

## Nuxt's Philosophy Applied to Compliance Nuxt 3 is opinionated about simplicity. Configuration lives in one file. Composables replace boilerplate. Auto-imports save keystrokes. Cookie consent should work the same way. Most consent tools fight against this philosophy. They want you to install npm packages, create plugins, configure external dashboards, and debug why things don't work in SSR mode. GetCookies follows the Nuxt way: add to config, deploy, done. ## The 2-Minute Setup ```typescript // nuxt.config.ts export default defineNuxtConfig({ app: { head: { script: [ { src: 'https://getcookies.co/api/v1/widget/loader.js', 'data-domain-id': 'YOUR_DOMAIN_ID', async: true } ] } } }) ``` Deploy. Refresh. You have a cookie banner. You also have: - GDPR-compliant consent collection - Google Consent Mode v2 (all four signals) - Automatic script blocking until consent - Third-party pixel support (Meta, TikTok, Google) - Consent logging for audits No npm install. No plugin file. No composable boilerplate. ## Environment Configuration Use runtime config for different environments: ```typescript // nuxt.config.ts export default defineNuxtConfig({ runtimeConfig: { public: { getCookiesDomainId: process.env.GETCOOKIES_DOMAIN_ID || '' } }, app: { head: { script: [ { src: 'https://getcookies.co/api/v1/widget/loader.js', 'data-domain-id': process.env.GETCOOKIES_DOMAIN_ID || '', async: true } ] } } }) ``` ```env # .env GETCOOKIES_DOMAIN_ID=dev-domain-id # .env.production GETCOOKIES_DOMAIN_ID=prod-domain-id ``` Create separate domains in GetCookies for localhost, staging, and production. ## A Composable for Consent State Want reactive consent state throughout your app? Create a composable: ```typescript // composables/useConsent.ts export function useConsent() { const hasAnalytics = ref(false) const hasMarketing = ref(false) const hasPreferences = ref(false) const checkConsent = () => { if (typeof window !== 'undefined' && window.GetCookies) { hasAnalytics.value = window.GetCookies.hasConsent('analytics') hasMarketing.value = window.GetCookies.hasConsent('marketing') hasPreferences.value = window.GetCookies.hasConsent('preferences') } } const showPreferences = () => { window.GetCookies?.showPreferences() } const acceptAll = () => { window.GetCookies?.acceptAll() } const rejectAll = () => { window.GetCookies?.rejectAll() } onMounted(() => { checkConsent() window.addEventListener('getcookies:consent', checkConsent) }) onUnmounted(() => { window.removeEventListener('getcookies:consent', checkConsent) }) return { hasAnalytics: readonly(hasAnalytics), hasMarketing: readonly(hasMarketing), hasPreferences: readonly(hasPreferences), showPreferences, acceptAll, rejectAll } } ``` Nuxt auto-imports composables from the `composables` folder. Use it anywhere: ```vue ``` ## Conditional Script Loading ### Method 1: useHead Load scripts reactively based on consent: ```vue ``` ### Method 2: Data Attributes Let GetCookies manage script activation: ```typescript // nuxt.config.ts export default defineNuxtConfig({ app: { head: { script: [ { src: 'https://getcookies.co/api/v1/widget/loader.js', 'data-domain-id': 'YOUR_DOMAIN_ID', async: true }, { src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX', type: 'text/plain', 'data-cookieconsent': 'analytics' } ] } } }) ``` The `type: 'text/plain'` prevents execution. GetCookies activates it after consent. ## SSR: No Special Handling GetCookies runs client-side. For SSR-safe components: ```vue ``` `` prevents hydration mismatches. The fallback shows during SSR. ## TypeScript Support Add type definitions: ```typescript // types/getcookies.d.ts declare global { interface Window { GetCookies?: { hasConsent: (category: 'analytics' | 'marketing' | 'preferences') => boolean showPreferences: () => void acceptAll: () => void rejectAll: () => void } } } export {} ``` Reference in tsconfig: ```json { "compilerOptions": { "types": ["./types/getcookies"] } } ``` ## Common Patterns ### Footer Cookie Link ```vue ``` ### Consent-Gated Analytics ```vue ``` ## Optional: Creating a Module For multi-project reuse, create a local Nuxt module: ```typescript // modules/getcookies.ts import { defineNuxtModule } from '@nuxt/kit' export default defineNuxtModule({ meta: { name: 'getcookies', configKey: 'getCookies' }, defaults: { domainId: '' }, setup(options, nuxt) { if (!options.domainId) { console.warn('[GetCookies] No domain ID provided') return } nuxt.options.app.head.script = nuxt.options.app.head.script || [] nuxt.options.app.head.script.push({ src: 'https://getcookies.co/api/v1/widget/loader.js', 'data-domain-id': options.domainId, async: true }) } }) ``` Use it: ```typescript // nuxt.config.ts export default defineNuxtConfig({ modules: ['./modules/getcookies'], getCookies: { domainId: 'YOUR_DOMAIN_ID' } }) ``` ## Deployment ### Vercel ```bash vercel --prod ``` ### Netlify ```toml # netlify.toml [build] command = "npm run build" publish = ".output/public" ``` ### Cloudflare Pages ```typescript // nuxt.config.ts export default defineNuxtConfig({ nitro: { preset: 'cloudflare-pages' } }) ``` ## Troubleshooting **Hydration mismatch warnings?** Wrap consent-dependent content in ``. **Script not loading?** 1. Check domain ID is correct 2. Verify domain is added in GetCookies dashboard 3. Check Network tab for script loading **Consent not updating?** Ensure event listeners are in `onMounted`: ```typescript onMounted(() => { window.addEventListener('getcookies:consent', handler) }) ``` ## Performance Impact | Metric | Impact | |--------|--------| | Bundle size | +1KB (loader only) | | LCP | No impact | | FID | No impact | | CLS | No impact | Your Lighthouse scores stay green. ## What You Don't Have to Do - Install an npm package - Create a plugin file - Configure GTM triggers - Read Consent Mode documentation - Debug SSR timing issues - Wonder if consent actually works One config entry. Full compliance. The Nuxt way. --- **Ready to add cookie consent to your Nuxt app?** [Get your domain ID in 60 seconds](https://getcookies.co)