ConsentWidget

Import the widget into your settings page

Import ConsentWidget from c15t/vue/vue-plugin and render it on your privacy or account settings page:

<script setup lang="ts">
import { ConsentWidget } from 'c15t/vue/vue-plugin';
</script>

<template>
	<section aria-labelledby="privacy-settings-title">
		<h1 id="privacy-settings-title">Privacy settings</h1>
		<p>Choose which optional cookies this site may use.</p>
		<ConsentWidget />
	</section>
</template>

Render the page inside the app that installed the c15tVue plugin. Keep ConsentRoot mounted too, so visitors on other pages still get the banner.

What ConsentWidget renders

ConsentWidget renders the preference controls inline, in the page flow, for a privacy or account settings page. It shows the categories the policy lets the visitor choose, each with a switch that expands to its description and declared vendors, and a footer with Reject All, Accept All and Save Settings. Necessary is always on and its switch is disabled.

• Save records the switches as they are. Accept All and Reject All record a choice for every category the policy covers.
• The switches start from the visitor's recorded choice. Before any choice, they start from the policy's defaults: on under an opt-out policy or for preselected categories, otherwise off.
• A choice saved elsewhere, such as in the banner, updates switches the visitor has not touched and keeps the ones they moved.
• If the policy changes, the widget shows "Privacy choices have changed." with a button that reloads the switches. Save stays blocked until then.

The widget renders nothing until the visitor's policy has resolved, and nothing when the policy owes no consent UI. It does not open or close any other surface. ConsentManager renders the same widget inside the dialog.

Props

Accessibility

Each switch is a button with role="switch", aria-checked and the category title as its label. Each row expands with a button that sets aria-expanded and aria-controls, and one row is open at a time. The footer actions are native buttons. Give the page a heading that names the widget, as in the example above.

Style the widget

The widget reads components.manager for its root and footer, components.accordion and components['accordion-item'] for the rows, components.switch for the switches and components['vendor-list'] for vendor rows. Component slots lists every part. presentation.preferences sets the footer's layout, primaryActions, direction and uiProfile, and applies to the dialog too.

Verify

Open the page with the widget in a private window. Turn Analytics (the measurement category) on and click Save. Reload: the switch is still on, and scripts gated on measurement load. Turn it off and save, and the page reloads without them.

Next steps

• ConsentManager shows these controls in a dialog.
• Composables build a preference form from your own markup.