---
title: Components
description: Every c15t Vue component, its import path and what it renders, with
  a page for each one's props, behavior, accessibility and styling.
group: frameworks
lastModified: "2026-10-10T16:01:45+01:00"
---
## Component reference

Every component reads the consent runtime that
[the c15tVue plugin](/docs/frameworks/vue/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`](/docs/frameworks/vue/components/consent-root)|The banner and, once opened, the preference dialog. Switches to the IAB surfaces under an IAB policy when `iab` is set.|
|[`ConsentBanner`](/docs/frameworks/vue/components/consent-banner)|The first-layer banner on its own.|
|[`ConsentManager`](/docs/frameworks/vue/components/consent-manager)|The preference dialog on its own.|
|[`ConsentWidget`](/docs/frameworks/vue/components/consent-widget)|Category switches and save actions inline, for a privacy page.|
|[`ConsentDialogLink`](/docs/frameworks/vue/components/consent-dialog-link)|A button that opens preferences.|
|[`ConsentDialogTrigger`](/docs/frameworks/vue/components/consent-dialog-trigger)|A floating, draggable button that opens preferences.|
|[`ConsentGate`](/docs/frameworks/vue/components/consent-gate)|Its default slot while a category is allowed, otherwise its `placeholder` slot.|
|[`IABConsentBanner`](/docs/frameworks/vue/components/iab-consent-banner)|The IAB TCF first layer.|
|[`IABConsentDialog`](/docs/frameworks/vue/components/iab-consent-dialog)|The IAB TCF preference centre.|
|[`ConsentDevTools`](/docs/frameworks/vue/components/dev-tools)|A development panel for the consent runtime, from `c15t/vue/devtools`.|

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

The components ship as `.vue` files. Keep
[`consentManifest()`](/docs/frameworks/vue/quickstart#add-the-vite-plugin) 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](/docs/frameworks/vue/headless) instead. They give you
the policy's actions and the draft state without the stock markup.