Why Nuxt.js Sites Need Cookie Consent
Nuxt.js powers thousands of production websites, from marketing pages to full-scale web applications. Every one of those sites that serves visitors in the EU, UK, Brazil, or other regulated jurisdictions must obtain consent before setting non-essential cookies.
The obligation comes from Article 5(3) of the ePrivacy Directive, which requires prior consent for storing or accessing information on a user's device. The GDPR then sets the standard for what counts as valid consent: freely given, specific, informed, and unambiguous. Together, these two regulations mean your Nuxt app cannot fire _ga, _fbp, or any other analytics or marketing cookie until the visitor explicitly agrees.
Enforcement is real. In September 2025, the CNIL fined one major platform EUR 150 million specifically for placing advertising cookies without consent and maintaining non-functional opt-out mechanisms. Smaller organisations face scrutiny too - the CNIL sanctioned 21 entities in 2025 for various tracker-related breaches.
How Nuxt.js Handles Scripts and Cookies
Nuxt 3 introduces several mechanisms for loading scripts, each with different implications for cookie compliance.
The useHead composable (from Unhead) lets you inject <script> tags into the document head. This is convenient, but any script added through useHead without a conditional check will execute immediately - before your visitor has a chance to consent. The same applies to scripts placed directly in nuxt.config.ts under the app.head configuration.
The Nuxt Scripts module offers more granular control. Its useScript composable accepts a trigger option, and the dedicated useScriptTriggerConsent composable delays script loading until consent is granted. This is the cleanest native approach for conditionally loading third-party code like Google Analytics or Meta Pixel.
The useCookie composable handles cookie reading and writing across server and client contexts. It is SSR-friendly, but it does not manage consent. If you use useCookie to set a tracking cookie without checking consent state first, you are in breach of the ePrivacy Directive.
Common Cookies in Nuxt.js Applications
Before configuring consent, you need to know exactly which cookies your Nuxt application sets. A cookie scanner automates this, but here is a typical breakdown:
| Cookie | Category | Purpose | Consent Required? |
|---|---|---|---|
PHPSESSID / nuxt-session | Strictly necessary | Session management | No |
pll_language | Functional | Language preference | Depends on jurisdiction |
_ga / _ga_* | Analytics | Google Analytics 4 | Yes |
_fbp | Marketing | Meta Pixel tracking | Yes |
_gid | Analytics | GA short-term ID | Yes |
_hj* | Analytics | Hotjar session recording | Yes |
li_sugr | Marketing | LinkedIn Insight Tag | Yes |
Strictly necessary cookies - those essential for the site to function - do not require consent under the ePrivacy Directive. Everything else does. For a deeper breakdown, see the guide on cookie categories.
Blocking Scripts Before Consent in Nuxt 3
The core compliance requirement is straightforward: no non-essential scripts should execute until the visitor grants consent. In a Nuxt 3 application, you have several options.
Using Nuxt Scripts with Consent Triggers
The Nuxt Scripts module provides useScriptTriggerConsent, which accepts a consent state and only loads the script once consent is true. This approach keeps your consent logic decoupled from individual script tags. You define consent categories (analytics, marketing, functional) and each script references its category.
Conditional useHead
If you prefer the standard useHead composable, wrap your script injection in a reactive condition. Check the visitor's consent state before adding the script object. When consent is granted, the composable reactively injects the tag. This works, but requires discipline - every script addition must include the consent check.
Using a CMP Script Tag
A cookie management platform handles the blocking automatically. You add a single script tag to your Nuxt application - typically in nuxt.config.ts or via useHead in your app.vue - and the CMP intercepts other scripts based on their category. Kukie.io provides a step-by-step guide for this approach in the Nuxt.js installation guide.
SSR and Client-Side Consent Challenges
Nuxt.js renders pages on the server before hydrating them on the client. This creates a specific challenge for cookie consent: the server has no access to the visitor's consent preferences, which are stored in a client-side cookie.
Third-party tracking scripts should only run on the client. Using import.meta.client (or the older process.client check) ensures tracking code never executes during server-side rendering. This prevents hydration mismatches and avoids setting cookies in the wrong context.
Route changes in a Nuxt SPA or hybrid application do not trigger full page reloads. If your consent banner logic only runs on initial page load, returning visitors who navigate via <NuxtLink> may not see the banner on subsequent pages. Your consent solution must persist across route changes, not just on the first request.
The useCookie composable reads cookies on both server and client, making it useful for checking a previously stored consent decision during SSR. You can use this to avoid a flash of unconsented content - if consent was already given, the server can render the page with tracking scripts ready to load on hydration.
Integrating Google Consent Mode v2
Google Consent Mode v2 is required for any site using Google advertising or analytics services in the EEA. It communicates your visitor's consent state to Google tags, adjusting their behaviour accordingly.
In a Nuxt application, the consent mode snippet must load before any Google tag fires. You typically add the default consent state (denied for all non-essential purposes) in your nuxt.config.ts head configuration, then update it via gtag('consent', 'update', {...}) once the visitor makes a choice.
A CMP that supports Consent Mode handles this automatically. When a visitor accepts analytics cookies, the CMP fires the consent update command, and Google tags switch from cookieless pings to full measurement. For setup details, see the Google Consent Mode integration guide.
Configuring Your Cookie Banner for Nuxt
Your cookie banner must meet specific legal requirements regardless of the framework. GDPR Article 7 demands that consent be as easy to withdraw as to give. The one-click reject requirement, reinforced by multiple DPA decisions, means your banner needs a visible reject button - not just a buried settings link.
For Nuxt applications, the banner should:
Load as early as possible in the client lifecycle to prevent tracking scripts from firing prematurely
Store consent state in a first-party cookie accessible via
useCookieExpose a method to re-open preferences (typically linked in the footer)
Support multiple languages if your Nuxt app uses i18n
Work correctly with Nuxt's
<ClientOnly>wrapper to avoid SSR mismatches
Banner design also matters. Avoid dark patterns - making the accept button visually dominant while hiding reject is a compliance risk. The CNIL's 2025 enforcement actions explicitly targeted interface designs that steer users towards acceptance.
Nuxt Modules vs External CMP
Several community Nuxt modules offer cookie consent functionality, including nuxt-cookie-control and nuxt-simple-cookie-consent. These are open-source, headless, and give you full control over the UI.
An external CMP like Kukie.io takes a different approach. Instead of building and maintaining consent logic yourself, you add a script tag and configure the banner through a dashboard. The CMP handles cookie scanning, automatic categorisation, geo-detection for region-specific rules, and consent logging.
| Feature | Nuxt Module | External CMP |
|---|---|---|
| UI customisation | Full control | Dashboard-based |
| Cookie scanning | Manual | Automated |
| Consent logging | Build your own | Built-in |
| Geo-detection | Not included | Included |
| Regulatory updates | Your responsibility | Managed |
| Google Consent Mode | Manual integration | Native support |
| Bundle size impact | Varies | Async script |
For production applications with EU traffic, the compliance overhead of a DIY approach grows quickly. Consent logging alone - required to demonstrate GDPR compliance under the accountability principle - is a significant engineering task.
Testing Cookie Consent in Your Nuxt App
Deploying a cookie banner is not the final step. You need to verify it actually blocks cookies before consent.
Open Chrome DevTools, navigate to the Application tab, and clear all cookies. Reload your Nuxt application without accepting the banner. Check the cookies list - only strictly necessary cookies should appear. If you see _ga, _fbp, or similar tracking identifiers, your blocking is not working correctly. Repeat this test after accepting and then withdrawing consent.
Test conditional script loading by monitoring the Network tab. Third-party requests to analytics and advertising endpoints should not appear until after consent. Pay attention to Nuxt's hydration phase - scripts that load during SSR and then hydrate on the client can bypass client-side consent checks.
For a structured approach to verification, the cookie banner testing guide covers the full process.
Frequently Asked Questions
Does a Nuxt.js site need cookie consent if it only uses SSR?
Yes. Server-side rendering does not exempt you from cookie consent requirements. If your Nuxt application sets any non-essential cookies - whether during SSR or after client-side hydration - you need prior consent under Article 5(3) of the ePrivacy Directive.
How do I block Google Analytics in Nuxt until consent is given?
Use the Nuxt Scripts module with useScriptTriggerConsent to delay the GA4 script until consent is granted. Alternatively, add the GA snippet conditionally via useHead by checking the consent cookie state. A CMP script tag can also handle this automatically.
Can I use useCookie to store consent preferences in Nuxt 3?
Yes. The useCookie composable works on both server and client, making it a good choice for storing and reading the visitor's consent decision. Set a first-party cookie with the consent state and check it before loading any non-essential scripts.
Do Nuxt.js functional cookies require consent under GDPR?
Strictly necessary cookies (session IDs, CSRF tokens, load balancers) are exempt. Functional cookies like language preferences sit in a grey area - some DPAs treat them as strictly necessary, others do not. When in doubt, include them in your consent banner under the functional category.
What happens if my Nuxt cookie banner only shows on the first page load?
In SPA mode, Nuxt handles route changes without full page reloads. If your consent banner logic only triggers on initial load, visitors navigating via NuxtLink may not see it. Your consent solution must persist and remain accessible across all routes.
Is the nuxt-cookie-control module GDPR-compliant?
Community modules like nuxt-cookie-control provide consent UI and script blocking, but GDPR compliance depends on your full implementation: proper consent logging, easy withdrawal, geo-detection, and accurate cookie categorisation. The module alone is not a compliance guarantee.
Take Control of Your Cookie Compliance
If you are not sure which cookies your Nuxt.js site sets, start with a free scan. Kukie.io detects, categorises, and helps you manage every cookie - so your visitors get a clear choice, and you stay on the right side of the law.
