Customize

Pick the right option

The customization overview explains these choices across frameworks. Add the options below to the c15t key in nuxt.config.ts. They are plain data, so they are safe in module options.

See the design gallery for five banner designs with tested code. Nuxt uses the Vue components and composables it shows. examples/showcase-nuxt-theme in the c15t repository puts theme, colorScheme, presentation, components and legal links together in one Nuxt app.

Set theme tokens

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

export default defineNuxtConfig({
	c15t: {
		tokens: {
			'c15t-primary': '#6943a3',
			'c15t-primary-hover': '#533285',
			'c15t-radius-lg': '18px',
			'c15t-text-on-primary': '#ffffff',
		},
	},
});

The Nuxt module's plugin writes the tokens, including the defaults you did not set, into a <style id="c15t-css-vars"> tag in the page head on every page, whether or not ConsentRoot renders. During server rendering and prerendering the tag is in the first HTML, so the banner already has your colors. Cached routes keep the tag, because tokens are the same for every visitor. With ssr: false, the plugin adds the same tag in the browser. The tag carries the module's nonce when you set one. Set tokens through this option rather than a :root rule in your own CSS, which can lose to that tag depending on stylesheet order. Theme tokens lists every token.

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.

export default defineNuxtConfig({
	c15t: { presentation: { prompt: { position: 'bottom', variant: 'bar' } } },
});

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.

Style one part of a component

components adds attributes to named parts, such as a class on the banner card. The keys match the component parts.

export default defineNuxtConfig({
	c15t: {
		components: {
			banner: { card: { class: 'brand-consent-card' } },
			trigger: { root: { 'aria-label': 'Cookie settings' } },
		},
	},
});

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.

With Tailwind CSS, put part classes in app/app.config.ts under the same c15t key rather than in nuxt.config.ts, because Tailwind scans app/. The module merges both. Tailwind CSS shows the Nuxt setup for Tailwind 4 and 3, and class names and CSS-in-JS covers other class sources.

Turn on dark mode

colorScheme in the c15t key in nuxt.config.ts decides when the banner and dialog turn dark: 'light', 'dark', 'system', or unset to copy a dark class on <html>. The module 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. For 'dark' and 'system', the module adds an inline script to <head> that sets the class before the banner paints. colorScheme: null leaves c15t-dark to your site when you set it under the c15t key or in app/app.config.ts. Nuxt drops a null in inline module options before the module reads it. 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:

export default defineNuxtConfig({
	c15t: {
		bannerLegalLinks: ['privacyPolicy'],
		legalLinks: { privacyPolicy: { href: '/privacy' } },
	},
});

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

Other display options

Check the result

Run nuxt dev and clear the c15t cookie and localStorage entry, or use a private window, so the banner shows. View the page source to confirm the c15t-css-vars style tag holds your tokens.