---
title: IABConsentDialog
description: Render the IAB TCF preference centre in Nuxt 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 module'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. The module does not register it globally, so import it
from `c15t/vue/runtime/components/iab-consent-dialog.vue`:

```vue title="app/components/IabSurfaces.vue"
<script setup lang="ts">
import IABConsentBanner from 'c15t/vue/runtime/components/iab-consent-banner.vue';
import IABConsentDialog from 'c15t/vue/runtime/components/iab-consent-dialog.vue';
</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/nuxt/iab) covers vendor list loading and
  verification.
* [Composables](/docs/frameworks/nuxt/composables#iab-tcf) documents
  `useConsentIabSelection()` and `useConsentIabSave()`.