@c15t/vue

Consent management with cookie banners, privacy preferences, and consent-gated scripts.

Cookie banner, consent dialog, and preference center for Vue 3 and Nuxt 3 and 4, with consent policies you set by location, such as GDPR opt-in or CCPA opt-out. One package gives you a Vue plugin and a Nuxt module, with composables when you want your own design.

c15t is used by 2,100+ sites, including expo.dev, zed.dev, unkey.dev, mintlify.com, and sazabi.com.

Key Features

A Nuxt module: add c15t/vue to modules and the server resolves each visitor's policy, so the banner is in the first HTML
A Vue plugin for Vite apps, with consentManifest() to bundle your policy at build time
Prebuilt cookie banner, consent dialog, and preference center with a theme system
Composables for a fully custom design
Analytics, ads, and pixels follow each visitor's choice through @c15t/integrations: Google Tag Manager, Google Consent Mode v2, GA4, Meta Pixel, PostHog, and more
IAB TCF 2.4 banner and dialog components
Translations for 53 languages through @c15t/translations

Prerequisites

Vue 3.5 or later, or Nuxt 3 or 4
Node.js 20.19 or later
An Inth project (free sign-up). For development and tests, local mode needs no backend

Installation

pnpm add c15t

The c15t package re-exports this package at c15t/vue, and the docs use that path. To install this package on its own, run pnpm add @c15t/vue and import from @c15t/vue instead.

Usage

Nuxt: register the module and set NUXT_PUBLIC_C15T_BACKEND_URL to your Inth backend URL

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['c15t/vue'],
})

Add ConsentRoot and a link that opens the preference dialog to app.vue

<!-- app/app.vue -->
<template>
  <ConsentRoot />
  <NuxtPage />
  <footer>
    <ConsentDialogLink>Privacy settings</ConsentDialogLink>
  </footer>
</template>

Vue with Vite: install the plugin with app.use(c15tVue, { mode: hosted() }) from c15t/vue/vue-plugin, and render ConsentRoot in App.vue
For the full setup, see the Nuxt quickstart or the Vue quickstart

Run c15t on Inth

c15t needs a backend to serve policies and keep consent records. Inth runs it for you. It stores every choice with its region and policy version, audits your live site and pull requests for privacy risk, and on Pro and above keeps each region's consent rules current with managed policy packs. You don't run the consent database, geo lookups, uptime, or upgrades.

Sign-up is free. Run npx @inth/cli c15t to create a project and set up c15t, or create one by hand and copy its backend URL.

For development and tests, local mode keeps choices in the browser and keeps no consent records. Don't ship it to production. Its factory is local(). The old name, offline(), still works and goes away in v4.