Vue

Components

Component reference

Every component reads the consent runtime that the c15tVue plugin provides, so it must render inside the app that called app.use(c15tVue, ...). Each component imports its own styles; there is no stylesheet to add.

Import every component except ConsentDevTools by name from c15t/vue/vue-plugin. A bundler keeps only the components you import.

Component	What it renders
`ConsentRoot`	The banner and, once opened, the preference dialog. Switches to the IAB surfaces under an IAB policy when `iab` is set.
`ConsentBanner`	The first-layer banner on its own.
`ConsentManager`	The preference dialog on its own.
`ConsentWidget`	Category switches and save actions inline, for a privacy page.
`ConsentDialogLink`	A button that opens preferences.
`ConsentDialogTrigger`	A floating, draggable button that opens preferences.
`ConsentGate`	Its default slot while a category is allowed, otherwise its `placeholder` slot.
`IABConsentBanner`	The IAB TCF first layer.
`IABConsentDialog`	The IAB TCF preference centre.
`ConsentDevTools`	A development panel for the consent runtime, from `c15t/vue/devtools`.

import { ConsentDialogLink, ConsentGate } from 'c15t/vue/vue-plugin';

The components ship as .vue files. Keep consentManifest() in vite.config.ts: it keeps them out of Vite's dependency pre-bundling, which cannot compile them.

ConsentRoot or the parts

ConsentRoot renders ConsentBanner and ConsentManager, or the IAB components when iab is set, for the visitor's policy. Mount ConsentRoot, or mount the parts, never both, or the visitor sees two banners. Use the parts when you need a different variant per route or want to place the surfaces yourself.

Building blocks

The stock surfaces are built from smaller components that c15t/vue/vue-plugin also exports: ConsentButton, ConsentSwitch, ConsentActions, ConsentLink, ConsentDescription, ConsentTag and ConsentBrandingIcon. ConsentLegalLinks is only at c15t/vue/runtime/components/consent-legal-links.vue. For consent UI in your own markup, use the headless composables instead. They give you the policy's actions and the draft state without the stock markup.