Composables

Import composables

Import every composable from c15t/vue/vue-plugin, the same entry point as the plugin. This component reads the visitor's permission and recorded choice, and opens preferences:

<script setup lang="ts">
import {
	useConsent,
	useConsentActiveUI,
	useExplicitChoice,
} from 'c15t/vue/vue-plugin';

// 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 plugin's scripts option. See scripts.

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.

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

Before the policy resolves

The plugin starts with every optional category denied and no recorded choice read. The composables update once the browser has read the stored choice and the policy arrives. Until then useConsentSnapshot().value.policyPending is true and usePolicyResolution() reports a status other than 'matched', so you can hold back UI that depends on the answer.

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 ConsentRoot does the same from a template binding. See translations.

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.