ConsentRoot

Render ConsentRoot in your root component

Render ConsentRoot once in your root component, next to your page content. Import it from c15t/vue/vue-plugin:

<script setup lang="ts">
import { ConsentDialogLink, ConsentRoot } from 'c15t/vue/vue-plugin';
</script>

<template>
	<ConsentRoot />
	<main>
		<h1>c15t with Vue</h1>
		<p>PostHog loads after you allow measurement.</p>
	</main>
	<footer>
		<ConsentDialogLink>Privacy settings</ConsentDialogLink>
	</footer>
</template>

ConsentRoot reads the consent runtime that the c15tVue plugin creates in src/main.ts. Keep it in the root component so it stays mounted when the route changes. It brings its own styles.

ConsentRoot is not a provider. The c15tVue plugin already gives every component the consent runtime, so nothing needs to sit inside it. Render <ConsentRoot /> next to your page content as shown above. If you wrap your content in it instead, the content still renders after the banner, dialog and trigger, but wrapping adds nothing.

What ConsentRoot renders

ConsentRoot picks the surfaces for the visitor's policy and the current activeUI:

It also renders ConsentDialogTrigger when the showTrigger option is true.

Nothing renders until the visitor's policy has resolved. The dialog and the IAB surfaces load as separate chunks. The IAB surfaces replace the standard ones only when the iab option is set and the policy uses the iab model. After the page's load event, ConsentRoot prefetches the dialog chunk in an idle moment, so the first Customize click does not wait for the network. The dialog unmounts when it closes.

Theme tokens

ConsentRoot does not apply theme tokens. The c15tVue plugin adds every token from the tokens option, including the defaults you did not set, to document.head in a <style id="c15t-css-vars"> element when you install it, before the first render. Set token values through the tokens option rather than a :root rule in your stylesheet. See customize.

Props

Setting any prop sends it to the backend with the next policy request. Use country and region to preview another region's policy while you build. Bind language to your site's language switcher:

<ConsentRoot :language="locale" />

Compose the surfaces yourself

ConsentRoot is the same as rendering ConsentBanner, ConsentManager and the IAB components with the right conditions. To place or configure them yourself, render them in place of ConsentRoot, as in ConsentBanner. Do not render ConsentRoot next to them, or the visitor sees two banners.

Verify

Load the app in a private window under a policy that asks for consent. The banner appears after the policy request to your backend completes. In the Elements panel, the <style id="c15t-css-vars"> element in <head> holds the --c15t-* tokens. Click Customize and the preference dialog opens. Reject, reload, and confirm the banner stays closed.

Next steps

• c15tVue plugin lists the options ConsentRoot reads.
• Customize changes tokens, layout and slots.
• Headless replaces ConsentRoot with your own markup.