IABConsentDialog

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:

<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

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 covers vendor list loading and verification.
• Composables documents useConsentIabSelection() and useConsentIabSave().