Customize

Pick the right option

The customization overview explains these choices across frameworks. All three options go in the object you pass to app.use(c15tVue, ...).

See the design gallery for five banner designs, from a bottom bar to a fully custom one, with tested code for this framework.

A customized setup

This src/main.ts sets brand tokens, shows the banner as a bar along the bottom of the page, and adds a class to the banner card:

import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
import { createApp } from 'vue';

import App from './App.vue';
import { scripts } from './scripts';

createApp(App)
	.use(c15tVue, {
		components: { banner: { card: { class: 'brand-consent-card' } } },
		mode: manifest(),
		presentation: { prompt: { position: 'bottom', variant: 'bar' } },
		scripts,
		tokens: {
			'c15t-primary': '#6943a3',
			'c15t-primary-hover': '#533285',
			'c15t-radius-lg': '18px',
			'c15t-text-on-primary': '#ffffff',
		},
	})
	.mount('#app');

The banner appears as a bar along the bottom of the page, its primary buttons use the brand purple, and the card gets the border that your stylesheet sets for brand-consent-card.

Set theme tokens

tokens sets c15t's CSS variables. Keys are the variable names without the leading --. Theme tokens lists every token.

The c15tVue plugin adds every token, 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. Every c15t component gets them, with or without ConsentRoot. A :root rule in your stylesheet can lose to that element depending on stylesheet order, so set token values through the tokens option. defineTheme from c15t/vue/vue-plugin only types a theme object; it does not apply anything.

Change the banner layout

presentation.prompt sets the banner's variant, position, layout, primaryActions, direction, uiProfile and blocking. presentation.preferences sets the same layout fields for the dialog.

variant is 'floating', 'bar', 'widget' or 'wall', and each accepts its own positions. bar takes top or bottom, wall takes center, widget takes the four corners, and floating takes the corners plus top-center and bottom-center. The policy still has the last word. A choice wall always blocks, a notice never blocks, and the policy can restore a required button you left out of layout.

ConsentBanner also takes variant, position and blocking as props when you render it yourself.

Style one part of a component

components adds attributes to named parts, such as the banner card or the floating trigger. The keys match the component parts. Vue binds these objects with v-bind, so use Vue attribute names such as class and style. React's className does not apply. The ConsentGate placeholder's parts are components['consent-gate'].root, .title and .button. Tailwind CSS shows the Vue setup for Tailwind 4 and 3, and class names and CSS-in-JS covers other class sources.

Turn on dark mode

colorScheme in the c15tVue options decides when the banner and dialog turn dark: 'light', 'dark', 'system', or unset to copy a dark class on <html>. The plugin ships c15t's stock dark palette, so a dark class alone turns the banner dark. theme takes the same token object as the other frameworks, including theme.dark, and wins over tokens where both set a variable. Dark mode covers each value and a dark first paint.

Change the copy

The banner and dialog text come from the translations of your Inth project, resolved for the visitor's language. Edit them there. legalLinks adds links to your privacy policy and similar pages:

app.use(c15tVue, {
	bannerLegalLinks: ['privacyPolicy'],
	legalLinks: { privacyPolicy: { href: '/privacy' } },
	mode: manifest(),
	scripts,
});

Translations covers the visitor's language, and copy and translations covers message keys and writing labels.

Other display options

Check the result

Run vite and open the app in a private window so the banner shows. In the Elements panel, the <style id="c15t-css-vars"> element in <head> holds your token values.