ConsentWidget

Add the widget to your privacy page

The Nuxt module registers ConsentWidget globally. Render it on your privacy or account settings page without an import:

<template>
	<main>
		<h1>Privacy settings</h1>
		<p>Choose which optional cookies this site may use.</p>
		<ConsentWidget />
	</main>
</template>

Keep ConsentRoot in app.vue too, so visitors on other pages still get the banner. When the server resolves the policy, in the default manifest() mode or hosted(), the widget renders on the server with the visitor's recorded choice already applied to the switches.

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.