IABConsentBanner

Import the IAB banner into app.vue

ConsentRoot renders IABConsentBanner for you when the module's iab option is set and the visitor's policy uses IAB TCF. Import it only when every policy on your site is IAB and you compose the surfaces yourself. The module does not register it globally, so import it from c15t/vue/runtime/components/iab-consent-banner.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>

Render this in app.vue in place of ConsentRoot, and set the module's iab option; see IAB TCF. A visitor whose policy is not IAB sees nothing from these components. Without iab, an IAB policy throws an IABUnavailableError instead.

What IABConsentBanner renders

IABConsentBanner is the IAB TCF first layer. It renders while activeUI is 'banner', the iab option is set, and the visitor's policy uses the iab model with a vendor list. ConsentRoot renders it in place of ConsentBanner under such a policy, so you only import it to compose the surfaces yourself.

The banner lists the purposes, stacks and special features your vendors use, with the vendor count as a link. Its footer has Reject All, Accept All and Customize.

• Accept All and Reject All save an IAB choice and write the TC String. The banner waits for the full Global Vendor List before it saves. If the list fails to load, the banner stays open and nothing is granted.
• Customize opens the IAB preference centre on its Purposes tab.
• The vendor count link opens it on its Vendors tab.

Its text comes from the IAB translations the backend resolved. The component loads its own styles.

Props

Keep Accept All and Reject All at the same prominence unless your legal review says otherwise.

Accessibility and styling

The banner renders in document.body. When the prompt is blocking it is a dialog with aria-modal="true" and traps focus. Otherwise it is a region. The components['iab-banner'] option adds attributes to its parts, such as root, card, title, purposeList, partnersLink and footer. iabBannerHideBranding hides the "Secured by" tag, and iabBannerModels limits which policy models show it.

Next steps

• IAB TCF covers the vendor list during server rendering and verification.
• IABConsentDialog is the preference centre this banner opens.