Skip to content
Start for free

Add a cookie consent banner to Nuxt

The c15t Nuxt module puts the banner in your Nuxt app as code. It holds tags until the visitor chooses and keeps Google Consent Mode v2 in sync.

Start for freeSee the code
Ask your coding agent
Sample Consent banner with c15t’s English strings

Install the c15t Nuxt module

c15t is the open source consent library behind Inth Consent. Its Nuxt module renders the banner on the server and records each choice in your Inth project.

npm install c15t @c15t/integrations

Register c15t/vue in nuxt.config.ts. This is the Nuxt module, so there is no separate Nuxt package to install.

nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: '2026-07-04',
  modules: ['c15t/vue'],
});

Add your Inth project URL to .env. The module reads it, so the config needs no backendURL. The build gets your policy one time, so build again after you change a policy.

.env

NUXT_PUBLIC_C15T_BACKEND_URL=https://your-project.inth.app

Code on this page comes from the c15t Nuxt quickstart, checked 28 October 2026.

Do you use Vue without Nuxt? See the Vue cookie consent banner.

Mount the banner in app.vue

Add ConsentRoot and a preferences link to app/app.vue. The module registers the components and composables, so you write no imports and no app.use().

app/app.vue

<template>
  <ConsentRoot />
  <NuxtPage />
  <footer>
    <ConsentDialogLink>Privacy settings</ConsentDialogLink>
  </footer>
</template>

Keep ConsentRoot outside <NuxtPage />, so it stays mounted across navigation. The components bring their own styles.

Hold scripts until consent

Register each tag in app/app.config.ts. With loadMode: 'after-consent', PostHog waits for measurement permission.

app/app.config.ts

import { posthog } from '@c15t/integrations/posthog';

export default defineAppConfig({
  c15t: {
    scripts: [
      posthog({
        id: 'phc_your_project_key',
        initOptions: { cookieless_mode: 'never' },
        loadMode: 'after-consent',
      }),
    ],
  },
});

Keep scripts out of nuxt.config.ts. The module options there go to the browser as JSON, and JSON drops functions. Remove every other loader for PostHog, so it loads once and only through c15t.

Nuxt scripts and embeds covers more vendors, iframes and the network blocker. The c15t integrations list the helper for each vendor.

Move from @nuxt/scripts or nuxt-gtag

@nuxt/scripts loads a registry script when its own trigger fires, whatever the visitor chose in c15t. Move every tracking vendor to the c15t scripts array. You can keep @nuxt/scripts for necessary scripts.

The nuxt-gtag plugin adds gtag.js to every page when the app loads, so c15t cannot gate it. Replace it with the c15t Google tag helper. The Nuxt scripts guide maps each registry script to its helper.

Hold embeds until consent

Wrap third party iframes in ConsentGate. The iframe is not in the page until the visitor allows its category.

app/components/VideoEmbed.vue

<template>
  <ConsentGate category="measurement">
    <iframe
      src="https://www.youtube-nocookie.com/embed/czTksCF6X8Y"
      title="YouTube video"
      loading="lazy"
      allowfullscreen
    />
    <template #placeholder>
      <p>Allow measurement to load this YouTube video.</p>
      <ConsentDialogLink>Choose video permissions</ConsentDialogLink>
    </template>
  </ConsentGate>
</template>

Nuxt registers the components in app/components for you. Render <VideoEmbed /> where the video goes.

app/consent-scripts.ts

import { gtag } from '@c15t/integrations/google-tag';

export const scripts = [gtag({ id: 'G-XXXXXXXXXX', category: 'measurement' })];

Show the right banner in each region

Your Inth project sets a policy for each region, such as opt in for the EU and UK or opt out for California. On the server, the module resolves each visitor from the bundled policy and the location headers of the request. A page render does not wait for Inth. Nuxt geography headers lists the headers it reads.

Test each region before launch. See how regional policies work.

Keep the banner in the first HTML

The server resolves the policy for each visitor, so the banner is part of the first HTML. The browser bundle carries no policy and no resolver.

Prerendered and cached routes work with the same setup. On those routes, the browser resolves the visitor after hydration. For nuxt generate on a static host or ssr: false, see Nuxt rendering.

Check that consent gates work

Build with nuxt build, start the server with node .output/server/index.mjs and open a private window with the Network tab open. Test under an opt in policy, such as the EU policy.

  1. Under an opt in policy, no PostHog request leaves the page before a choice.
  2. After Reject All and a reload, PostHog stays off.
  3. When you turn on measurement in Privacy settings, PostHog loads.
  4. When you turn measurement off, the page reloads without PostHog.

Choices post to your Inth project. Check that Inth has a record for each one. The c15t verify consent guide has the full release checklist.

Use Inth in production

c15t is open source. Point it at your Inth project, which hosts the backend and keeps the consent records. See Inth open source.

c15t also has a local mode with no backend. It keeps no consent records, so the docs advise against it in production.

Want to see what else your repo sends before consent? Run a free codebase scan.

Cookie consent banners for other frameworks

The same banner and the same Inth project work in other stacks. See the setup for Next.js, React, TanStack Start, Vue, Astro, Svelte, SvelteKit, HTML and JavaScript.

See how the Inth consent banner works.

Questions about Nuxt consent