c15t
Deploy on Inth

Vue Components

ConsentManager

Import the dialog when you compose surfaces

ConsentRoot already renders ConsentManager when preferences open. Import it yourself only when you compose the surfaces in place of ConsentRoot. Import it from c15t/vue/vue-plugin:

src/ConsentSurfaces.vue
<script setup lang="ts">
import {
	ConsentBanner,
	ConsentDialogTrigger,
	ConsentManager,
} from 'c15t/vue/vue-plugin';
</script>

<template>
	<!-- Render these in place of ConsentRoot, not next to it. -->
	<ConsentBanner variant="bar" position="bottom" />
	<ConsentManager />
	<ConsentDialogTrigger />
</template>

Open the dialog from your code

Set activeUI to 'manager' with useConsentActiveUI() from c15t/vue/vue-plugin. The Vue adapter uses 'manager' where the React adapter uses 'dialog'.

const activeUI = useConsentActiveUI();
activeUI.value = 'manager';

For a footer link, use ConsentDialogLink, which hides itself when the policy offers no preferences.

What ConsentManager renders

ConsentManager is the preference dialog, the component the React adapter calls ConsentDialog. It opens while activeUI is 'manager'. Anything that sets activeUI to 'manager' opens it: the banner's Customize button, ConsentDialogLink, ConsentDialogTrigger and your own code. It renders nothing until the visitor's policy has resolved, and nothing when the policy owes no consent UI.

The dialog holds the same content as ConsentWidget: a list of the categories the policy lets the visitor choose, each with a switch and a description, and the vendors you declared under each category. Necessary is always on. The footer shows Reject All, Accept All and Save Settings, with Save Settings as the primary button.

  • Save records the switches as they are. Accept All and Reject All record a choice for every category the policy covers.
  • After a successful action the dialog closes. The banner comes back only if the policy still requires a choice.
  • Escape closes the dialog without saving. The banner comes back if the policy still requires a choice.
  • If the policy changes while the dialog is open, the dialog shows "Privacy choices have changed." with a button that reloads the switches from the new policy. Save stays blocked until the visitor reviews them.

The title comes from consentManagerDialog.title in the resolved translations. dialogLegalLinks picks which of your legalLinks appear under the description. The dialog has no props, slots or text props.

Accessibility and focus

The dialog renders in document.body with role="dialog", labelled by its title and described by its description. By default it is modal: it shows a backdrop, sets aria-modal="true", locks page scrolling, moves focus to the first control inside and keeps Tab inside the dialog. When it closes, focus returns to the element that had it before. Set presentation.preferences.blocking to false for a non-modal dialog with no backdrop.

Each category switch is a button with role="switch", aria-checked and the category title as its label. Each category row expands with a button that sets aria-expanded and aria-controls.

Style the dialog

The components.dialog option adds attributes to root, overlay, container, card, header, title and content. The category list inside uses components.manager, components.accordion, components['accordion-item'], components.switch and components['vendor-list']. Component slots lists every part. presentation.preferences sets the footer's layout, primaryActions, direction, uiProfile and blocking.

dialogHideBranding, or hideBranding for every surface, hides the "Secured by" tag. disableAnimation turns off the transitions.

Verify

Open preferences, turn one optional category on and click Save. The dialog closes. Reload and open preferences again: the switch is still on. Press Escape with the dialog open and confirm it closes and focus returns to the control that opened it.

Next steps