---
title: ConsentManager
description: Render the c15t preference dialog in a Vue app, open it from your
  own code, and understand its actions, focus handling and styling.
group: frameworks
lastModified: "2026-10-10T16:01:45+01:00"
---
## 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`:

```vue title="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'`.

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

For a footer link, use
[ConsentDialogLink](/docs/frameworks/vue/components/consent-dialog-link),
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](/docs/customization/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

* [ConsentWidget](/docs/frameworks/vue/components/consent-widget) renders the
  same controls inline on a page.
* [IABConsentDialog](/docs/frameworks/vue/components/iab-consent-dialog)
  replaces this dialog under an IAB policy when `iab` is set.
* [Customize](/docs/frameworks/vue/customize) sets tokens and slots.