Platforms

How to add a cookie consent banner to a Nuxt app

In Nuxt 3 or 4, declare the snippet in nuxt.config.ts under app.head.script so it is rendered in the head of every page before any other script, or add it with useHead in app.vue. Attributes such as data-site are passed as keys of the script entry, defer: true keeps the defer attribute, and tagPosition: "head" keeps the tag where a consent script belongs.

Published 20 October 2026 · By the Cookiequiet team · Markdown

Steps

Add the script entry to nuxt.config.tsUnder app.head.script, add an object with src set to https://cookiequiet.com/cq.js, defer: true, the data-site, data-consent-mode and data-auto-block keys, and tagPosition set to head. Put it first in the array.

Or use useHead in app.vueThe same object works in a useHead call in app.vue, which applies it to every page. Give it a key so it is never duplicated.

Add your tags as marked entriesAdd the Google tag or Meta Pixel as further script entries with type set to text/plain and a data-cq-category key; inline code goes in innerHTML. Being in the server-rendered head, they are activated after consent or on load when a choice is stored.

Or run the Google tag in Consent ModeKeep the Google tag loading with denied defaults by adding an entry with Google's default consent block in innerHTML between the Cookiequiet entry and the Google tag entry. Modules that add the Google tag for you usually offer a manual initialization or consent option; set the defaults there.

Gate components on consentFor players and widgets rendered by Vue, read window.Cookiequiet.get() in onMounted and subscribe with window.Cookiequiet.on(); render the embed only when the category is granted. For plain iframes, use data-cq-src instead of src.

Add the Cookie preferences linkIn the layout footer, render a plain anchor with href="#cq-preferences" and the data-cq-show-preferences attribute.

Test with Reject allRun the app, open it in a private window, click Reject all and check that no _ga or _fbp cookie is set. Accept all, reload, and check the consent log.

Where to load the snippet in Nuxt

Nuxt renders the head of every page from app.head in nuxt.config.ts, through Unhead. A script entry is an object whose keys become attributes, so the snippet translates directly:

ts
// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://cookiequiet.com/cq.js",
          defer: true,
          "data-site": "YOUR_SITE_KEY",
          "data-consent-mode": "1",
          "data-auto-block": "1",
          tagPosition: "head",
          key: "cookiequiet",
        },
      ],
    },
  },
});

Keep it first in the array so it is rendered before any other script of the head. tagPosition accepts head, bodyOpen and bodyClose; head is the default and the right one here. The same object works in a useHead call in app.vue if you prefer to keep it next to other head logic; the key prevents duplicates. On Nuxt 2, the equivalent is head.script in nuxt.config.js.

How to handle the tags your app loads

Cookiequiet activates marked scripts when a stored choice is applied on load and whenever the visitor makes a choice. In a Nuxt app, that means marked tags belong in the server-rendered head, not in components mounted later.

Marked entries. Add them to the same script array after the Cookiequiet entry; inline code goes in innerHTML:

ts
{ type: "text/plain", "data-cq-category": "analytics", src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX" },
{
  type: "text/plain",
  "data-cq-category": "analytics",
  innerHTML: "window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXX');",
},

The Meta Pixel base code gets "data-cq-category": "marketing". Nothing of these runs before the category is granted.

Consent Mode instead of marking. To keep Google Analytics or Google Ads loading with denied defaults (cookieless pings, modelled data), insert an entry with Google's default consent block in innerHTML between the Cookiequiet entry and the Google tag entry, as shown in the Google Analytics 4 guide. Modules that inject the Google tag for you generally offer a manual initialization or consent option; use it to set the defaults to denied, and Cookiequiet sends the update.

Components that depend on consent. Read the choice in onMounted through the public API: window.Cookiequiet.get() returns the stored choice (its c array lists the granted categories) and window.Cookiequiet.on(callback) calls back after every choice and returns an unsubscribe function. A small composable can expose granted("marketing") to a YouTube component, which renders a placeholder with a "Cookie preferences" button until then. For plain iframes in templates, data-cq-src instead of src is enough.

In the layout footer, a plain anchor is all it takes; do not route it through NuxtLink:

html
<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>

How to test

Start the app (nuxi dev works; the banner fetches its configuration from cookiequiet.com) and open it in a private window.
Click Reject all: the cookies are cq_consent and your own, no _ga, no _fbp.
Clear the cookies, click Accept all, reload: the marked entries run, their cookies appear.
Navigate between pages: the banner stays closed and the choice is still applied.
Check the consent log in the dashboard.

What is specific to Nuxt

SSR, SPA and static. With ssr: false, Unhead still renders the head on the client; with nuxi generate, the snippet is in every generated page. All three work.
Layers and modules. A layer or module that adds the Google tag adds it to the same head; check the rendered order in the page source and keep the Cookiequiet entry first.
Content Security Policy. Allow https://cookiequiet.com in script-src and connect-src if you set one.
i18n. The banner's language follows the visitor's browser, with every string editable per language; it does not read the Nuxt locale.

If a tag ends up loaded by a plugin you cannot mark, the auto-blocker still holds the scripts and iframes of about 80 known trackers created with JavaScript until consent, and the cookie scanner tells you what is left.

Questions

Both render the same head entry. app.head in nuxt.config.ts is static and applies to every page, which is exactly what a consent script needs; useHead in app.vue is equivalent and lets you read the key from runtime config. Pick one and give the entry a key.

Yes. Unhead maps boolean keys to boolean attributes and data-* keys to data attributes, so the rendered tag matches the snippet from the dashboard.

Cookiequiet activates marked scripts when a choice is applied on load and after each new choice. A script injected later waits for the next choice. Put marked tags in the server-rendered head, and gate components through window.Cookiequiet.get() and on() instead.

Yes, through head.script in nuxt.config.js, with the same keys. The rest of the guide (marking, the preferences link, testing) is identical.

Sources

Cookie banner for Next.js: load Cookiequiet with next/script beforeInteractiveRender the Cookiequiet snippet with next/script beforeInteractive in the root layout, mark your tags, gate React components on consent and test.Cookie banner for Astro: add Cookiequiet to the layout headPut the Cookiequiet snippet in your Astro layout head with is:inline, mark Google and Meta tags there, handle the ClientRouter and test Reject all.Google Analytics 4 and Cookiequiet: Consent Mode v2 or no tag before consentRun Google Analytics 4 with Cookiequiet: Consent Mode with analytics_storage denied until consent, or the Google tag marked so it never loads before consent.

Back to Platforms

Put a quiet banner on your website today

Free for one website with every core feature, no card and no trial clock. Upgrade a website to Pro for $3 a month when you want the AI designer, no branding and the five-year consent log.

Start free, no card See pricing