nuxt-c15t

Consent management for Nuxt — reactive composables, headless components, Nuxt Scripts integration, and vendor-aware cookie policy tables

Built on c15t, the open-source headless consent library.

• ✨  Release Notes
• 📚  Documentation
• 🎮  Playground
• 🔗  c15t docs

Features

• 🔒  Reactive composables — useC15t() provides fully reactive consent state with Vue 3 Composition API
• 🎨  Headless components — Banner, Dialog, CookiePolicy, Iframe, and ConsentGate with customisable slots
• 📜  Nuxt Scripts integration — gate third-party scripts behind consent with useC15tScriptTrigger()
• 🍪  Vendor cookie registry — pre-built definitions for 16+ vendors (GA, Meta, Hotjar, YouTube, etc.)
• 🌍  i18n support — translations via c15t's built-in system with runtime language switching
• 🖥️  SSR-safe — server-side consent reading via useC15tConsent()
• 🔌  Offline & hosted modes — browser-only storage or sync with a c15t backend

Quick Setup

1. Add nuxt-c15t dependency to your project

pnpm add nuxt-c15t

2. Add nuxt-c15t to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-c15t'],

  c15t: {
    mode: 'offline',
    consentCategories: ['necessary', 'measurement', 'marketing'],
  },
})

3. Add the consent banner to your app.vue

<template>
  <div>
    <NuxtPage />
    <C15tConsentManager />
  </div>
</template>

This renders both the banner and preferences dialog. You can also use <C15tBanner> and <C15tDialog> separately, or customise them via named slots:

<template>
  <C15tConsentManager>
    <template #banner="{ acceptAll, acceptNecessary, openPreferences }">
      <!-- your custom banner -->
    </template>
    <template #dialog="{ displayedConsents, toggle, saveCustom, acceptAll, close }">
      <!-- your custom dialog -->
    </template>
  </C15tConsentManager>
</template>

4. Check consent anywhere

<script setup>
const { has } = useC15t()
const hasMeasurement = has('measurement')
</script>

That's it! You can now manage consent in your Nuxt app ✨

Gate Scripts Behind Consent

Use with @nuxt/scripts to load third-party scripts only after consent:

useScript('https://www.googletagmanager.com/gtag/js?id=G-XXXXX', {
  trigger: useC15tScriptTrigger('measurement'),
})

Development

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test

# Build docs
pnpm run docs:dev

# Release new version
pnpm run release

Sponsored by