Composables

Use composables without imports

The Nuxt module auto-imports the consent composables, so a component calls them directly. This component reads the visitor's permission and recorded choice, and opens preferences:

<script setup lang="ts">
// May measurement code run right now?
const permissions = useConsent();
// What did the visitor decide? `null` until they accept, reject or save.
const choice = useExplicitChoice();
const activeUI = useConsentActiveUI();
</script>

<template>
	<section aria-label="Your privacy choices">
		<p v-if="choice">You saved your privacy choices.</p>
		<p v-else>You have not made a privacy choice yet.</p>
		<p>
			Measurement is
			{{ permissions.measurement ? 'allowed' : 'not allowed' }} right now.
		</p>
		<button type="button" @click="activeUI = 'manager'">
			Change your choices
		</button>
	</section>
</template>

Use v-if, not v-show, when optional content loads anything from a third party. For iframes use ConsentGate, and for vendor scripts use the scripts option in app.config.ts. See scripts.

A few composables are not auto-imported, among them useHasConsentPolicy(), useHasConsentUi(), useHasConsentPreferences() and useIabTranslations(). Import them from #c15t/composables, the alias the module registers for its composables:

import { useHasConsentPreferences } from '#c15t/composables';

Where composables work

Call the composables inside setup of a component that renders in the app where c15t is installed. Anywhere else they throw an error such as [c15t] Kernel not found. Most return a Vue computed, so read them with .value in <script setup> and without it in the template. They update whenever the consent runtime changes.

Server routes and middleware under server/ run outside the Nuxt app, so the composables do not work there.

Permission or recorded choice

useConsent() and useHasConsent() answer "may this run now?" Under an opt-out policy a category can be allowed before the visitor has done anything, and Global Privacy Control can deny a category the visitor allowed. Use them to decide whether to run code or render optional content.

useExplicitChoice() answers "what did the visitor decide?" It stays null until the visitor accepts, rejects or saves. Use it to show the visitor's choice or to report consent rates. Loading a page never changes it, and dismissing a notice does not set it.

Never save a choice on the visitor's behalf because a permission is true. How consent works explains the difference.

Read consent state

Composables on the server

The composables work during server rendering. When the server resolves the policy, in the default manifest() mode or hosted(), they return the visitor's resolved policy and stored choice, so the server HTML and the first client render agree. On prerendered and cached routes, and with ssr: false, they start with every optional category denied and update once the browser resolves the policy. Until then useConsentSnapshot().value.policyPending is true.

Record a choice

useConsentSave() returns a function that records a choice and resolves to { ok } once the backend has answered. c15t applies the choice in the page before the request, so gated scripts start without waiting for it.

useDismissNotice() returns the function that dismisses a notice. It records an acknowledgement, grants nothing and leaves earlier refusals in place. Use it only for a policy whose prompt is notice.

Open the banner or preferences

useConsentActiveUI() returns a writable computed. Its value is 'banner', 'manager' or null. Set it to 'manager' to open preferences, to 'banner' to show the banner again, or to null to close both. The Vue adapter uses 'manager' where the React adapter uses 'dialog'. ConsentDialogLink does the same as setting 'manager' and hides itself when the policy offers no preferences.

Change the language

useConsentLanguage() returns a writable computed with the language override, or null. Assigning a new language code stores it and runs init again, so c15t fetches the banner and dialog text in that language. Assigning the current language, or null, does nothing.

The language prop on the Nuxt ConsentRoot does the same from a template binding. See translations for a language switcher.

Build a preference form

useConsentDraft() holds the switches of a preference form separately from the recorded choice, so nothing is saved until the visitor clicks Save.

The draft starts from the recorded choice. Before any choice, it starts from the policy's defaults: on under an opt-out policy or for preselected categories, otherwise off. A choice saved elsewhere updates the values the visitor has not touched. save() does not close anything. Set activeUI to null yourself after it.

Render the actions the policy requires

Under a notice, actionGroups holds dismiss instead of accept and reject. preferenceControls lists extra buttons, 'opt-out' or 'preferences', that open preferences under a policy with those rights.

Headless builds a complete banner and preference form from these composables.

IAB TCF

Advanced

useConsentKernel().events.on() returns an unsubscribe function. Call it in onUnmounted. For choice and permission events, prefer the callbacks option, which c15t wires once for the whole app.

See callbacks for the callbacks option.