@consentx/vue is the official ConsentX integration for Vue 3. It injects the self-contained ConsentX embed into your app and gives you a reactive useConsent() composable for the visitor's choice.

This package uses the Site Key model (Model C): there is no server-side redirect handshake. You copy your Site Key from the ConsentX dashboard (Websites → your site) and pass it to the plugin or component. Make sure your domain is on that site's allowlist in the dashboard (the dashboard "Add website" flow handles this). Then the embed loads and the banner appears.

Features

• One self-contained embed — the widget injects its own CSS + JS and renders the banner into #consentx-cookie-consent.
• <ConsentX> component + app.use() plugin + useConsent() composable.
• Reactive consent state: granted category slugs, hasConsent('analytics').
• Optional Google Consent Mode v2 denied-by-default seeding.
• SPA-safe: the embed is injected after hydration so Vue's DOM reconciliation does not strip the widget node.
• TypeScript types, ESM + CJS builds, Vue as a peer dependency. Zero runtime deps.

Install

npm install @consentx/vue
# or
pnpm add @consentx/vue
# or
yarn add @consentx/vue

Requires vue@^3.3.

Usage

1. Register the plugin (recommended)

// main.ts
import { createApp } from 'vue';
import { ConsentXPlugin } from '@consentx/vue';
import App from './App.vue';

createApp(App)
  .use(ConsentXPlugin, {
    siteKey: 'YOUR_SITE_KEY',   // ConsentX dashboard → Websites → your site
    consentMode: true,          // optional: seed Google Consent Mode v2 defaults
    // appHost: 'https://app.consentx.io', // override for staging / self-hosted
  })
  .mount('#app');

Then drop the component once near the root of your app (e.g. in App.vue). It inherits the Site Key from the plugin:

<template>
  <ConsentX />
  <RouterView />
</template>

2. Or configure it entirely on the component

No app.use() needed — import and register the component locally and pass the key as a prop:

<script setup lang="ts">
import { ConsentX } from '@consentx/vue';
</script>

<template>
  <ConsentX site-key="YOUR_SITE_KEY" :consent-mode="true" />
</template>

useConsent()

React to the visitor's consent choice anywhere in your component tree:

<script setup lang="ts">
import { watch } from 'vue';
import { useConsent } from '@consentx/vue';

const { granted, ready, hasConsent, openPreferences } = useConsent();

// Load analytics only after consent is granted for that category.
watch(
  () => hasConsent('analytics'),
  (allowed) => {
    if (allowed) loadAnalytics();
  },
);
</script>

<template>
  <button @click="openPreferences()">Cookie preferences</button>
  <p v-if="ready">Granted: {{ granted.join(', ') }}</p>
</template>

useConsent() subscribes to the widget's cx:consent event and automatically unsubscribes when the component unmounts. detail.granted is an array of granted category slugs.

API

ConsentXPlugin (default export)

app.use(ConsentXPlugin, options)

| Option | Type | Default | Description | | ------------------- | --------- | --------------------------- | ------------------------------------------------------------------ | | siteKey | string | '' | Default Site Key (overridable per component). | | appHost | string | https://app.consentx.io | App host override for staging / self-hosted ConsentX. | | consentMode | boolean | false | Seed Google Consent Mode v2 denied-by-default before the embed. | | registerComponent | boolean | true | Auto-register the global <ConsentX> component. | | componentName | string | ConsentX | Name used when auto-registering. |

<ConsentX> component

| Prop | Type | Default | Description | | ------------- | --------- | ------------------ | -------------------------------------------------------- | | site-key | string | plugin default | Site Key from the ConsentX dashboard. | | app-host | string | plugin default | App host override. | | consent-mode| boolean | plugin default | Seed Consent Mode v2 defaults before injecting. |

Emits @consent="(detail) => …" on every cx:consent event.

useConsent(onChange?)

Returns { consent, granted, ready, hasConsent, openPreferences } — all reactive refs except the two helper functions.

Low-level helpers

injectEmbed, injectConsentModeDefaults, embedSrc, isEmbedInjected, onConsent, openPreferences, normalizeDetail, plus the constants DEFAULT_APP_HOST, GLOBAL_KEY_VAR, MOUNT_ID, CONSENT_EVENT.

How the embed works

Under the hood the package appends one ES module to <head>:

<script type="module" src="https://app.consentx.io/api/YOUR_SITE_KEY/embed.js"></script>

embed.js is self-contained: it injects the scoped widget CSS + JS, renders the banner into a #consentx-cookie-consent div it appends to document.body, reads geo/config from the server, exposes window.ConsentX (open preferences), and emits the cx:consent event.

Build (contributors)

npm install
npm run build      # vite library build (ESM + CJS) + vue-tsc d.ts
npm run typecheck

License

MIT © ConsentX