---
title: IABConsentDialog
description: Render the IAB TCF preference centre in a Vue app with
  IABConsentDialog, choose its first tab, and build a custom one with
  composables.
group: frameworks
lastModified: "2026-10-10T16:01:45+01:00"
---
## Import the IAB dialog when you compose surfaces

`ConsentRoot` loads `IABConsentDialog` for you when the plugin's `iab` option
is set, the visitor's policy uses IAB TCF and preferences open. Import it only when you compose the IAB
surfaces yourself. Import it from
`c15t/vue/vue-plugin`:

```vue title="src/IabSurfaces.vue"
<script setup lang="ts">
import { IABConsentBanner, IABConsentDialog } from 'c15t/vue/vue-plugin';
</script>

<template>
	<!-- Only for sites where every policy uses IAB TCF. ConsentRoot
	     switches between the IAB and standard surfaces for you. -->
	<IABConsentBanner />
	<IABConsentDialog initial-tab="purposes" />
</template>
```

## What IABConsentDialog renders

`IABConsentDialog` is the IAB TCF preference centre. It opens while
`activeUI` is `'manager'`, the `iab` option is set, and the policy uses the
`iab` model. `ConsentRoot` loads it in place of `ConsentManager` under such
a policy.

It has two tabs. Purposes lists each purpose, stack and special feature with
consent and legitimate-interest switches. Vendors lists every vendor,
including your custom vendors, with a search field and per-vendor switches.
The footer saves the selection, or accepts or rejects everything, and writes
the TC String.

To build your own preference centre instead, read and change the selection
with `useConsentIabSelection()` and save it with `useConsentIabSave()`.

## Props

|Prop|Type|Default|Behavior|
|--|--|--|--|
|`initialTab`|`'purposes' \|'vendors'`|The tab the banner asked for, else `'purposes'`|Which tab the dialog opens on.|

## Accessibility and styling

The dialog renders in `document.body` with `role="dialog"`. While blocking
it sets `aria-modal="true"`, locks scrolling and traps focus. It has a close
button. The `components['iab-dialog']` option adds attributes to parts such
as `root`, `card`, `header`, `tabsList`, `tabPanel` and `footer`, and
`components['iab-purpose-item']`, `components['iab-stack-item']` and
`components['iab-vendor-list']` reach the rows. `iabDialogHideBranding`
hides the "Secured by" tag.

## Next steps

* [IAB TCF](/docs/frameworks/vue/iab) covers vendor list loading and
  verification.
* [Composables](/docs/frameworks/vue/composables#iab-tcf) documents
  `useConsentIabSelection()` and `useConsentIabSave()`.