Integrations

Cookie consent for Vue and Nuxt

With Nuxt, the tag goes in nuxt.config with the highest priority so it renders first in <head> on every page. With Vue and Vite, it goes in index.html.

Set it up with your AI agent

Connect the Croombit MCP server to your editor or coding agent and paste this. It creates the site, the cookie categories and the banner, and edits your code.

Using Croombit: create a site for this project with Analytics (ANALYTICS) and Advertising (MARKETING) cookie categories, off by default, publish them and publish the banner. Create a TEST publishable key for localhost:3000. This is a Nuxt app: add cmp.js to app.head.script in nuxt.config.ts with tagPriority "critical", reading the key from NUXT_PUBLIC_CROOMBIT_KEY, and add a "Cookie settings" link to the footer component.

The agent works in TEST. Going live takes two steps in the console: verify your domain and swap in a LIVE key — see going live.

Or by hand

Nuxt: nuxt.config

tagPriority: 'critical' puts it ahead of every other tag in <head>, including the ones modules add.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://croombit.com/cmp.js',
          'data-tc-api-key': process.env.NUXT_PUBLIC_CROOMBIT_KEY,
          tagPriority: 'critical', // first in <head>, before any tracker
        },
      ],
    },
  },
});

Vue + Vite: index.html

<!-- index.html (Vite + Vue) -->
<head>
  <script src="https://croombit.com/cmp.js"
          data-tc-api-key="%VITE_CROOMBIT_KEY%"></script>
</head>

Hold back trackers

Tags in your HTML or head config: type="text/plain" plus data-tc-consent. Tags inserted at runtime from well-known hosts are held back automatically.

<script type="text/plain" data-tc-consent="analytics" async
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>
<script type="text/plain" data-tc-consent="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXX');
</script>
<a href="#" data-tc-open-preferences>Cookie settings</a>

One delegated listener handles it, so a link rendered later by a component works too.

Questions

Does it work with Nuxt server-side rendering?

Yes. The tag is in the server-rendered <head>, so it runs before hydration and before any tracker.

How do I start an SDK from npm only after consent?

Listen for the croombit:consent event on window: its detail.categories says what the visitor granted.