Skip to main content

Nuxt Customization

Translations

Where the text comes from

The banner, dialog and IAB text comes from the translations in your Inth project, or your self-hosted backend's configuration. The policy carries the text for the visitor's language. Edit copy there, not in your Nuxt code. The module has no option for message overrides.

Copy and translations lists the message keys and how to write labels that describe each action.

How c15t picks the language

The request's Accept-Language header decides:

  • In the default manifest() mode, the Nuxt server reads the header during server rendering and resolves the text from the bundled or cached manifest. The banner is in the visitor's language in the first HTML, and the browser bundle carries no translations.
  • With hosted(), the server forwards the header to the backend's /init.
  • With manifest({ resolve: 'browser' }), the browser reads navigator.language and resolves the text from the bundled manifest. The bundle carries English base copy; another language's base copy loads from your site the first time a visitor resolves to it.

On prerendered and cached routes the browser requests /api/c15t/init after hydration, and that request carries the browser's own header. When your project has no text for the language, the backend picks its fallback language.

The text direction follows the resolved language. Right-to-left languages render the banner and dialog with dir="rtl", and a default corner position mirrors.

Follow your site's language

Bind the language prop of the Nuxt ConsentRoot to your site's current language, for example from @nuxtjs/i18n. When the prop changes, ConsentRoot stores the language and resolves the policy again, which fetches the text in that language:

<ConsentRoot :language="locale" />

From your own language switcher, assign the language to useConsentLanguage(). A new language runs init again. Assigning the current language does nothing:

app/components/LanguageSwitcher.vue
<script setup lang="ts">
const language = useConsentLanguage();
const kernel = useConsentKernel();

// Resolving again with `init()` loads the banner and dialog text in the
// new language.
const switchTo = (code: string) => {
	language.value = code;
	void kernel.commands.init();
};
</script>

<template>
	<button type="button" @click="switchTo('en')">English</button>
	<button type="button" @click="switchTo('de')">Deutsch</button>
</template>

The assignment alone loads the new text. The example's extra kernel.commands.init() call repeats the request and is not needed.

Text that does not come from translations

ConsentDialogLink and the ConsentGate placeholder read their default text from the translations, in English until init has delivered copy. One label is a module option instead. Set it in the visitor's language when your site has more than one:

TextWhereHow to change it
"Open privacy settings"ConsentDialogTrigger labelSet the triggerAriaLabel option.

Verify

Request a page with curl -H 'Accept-Language: de' <your-url> under a policy that asks for consent, and confirm the banner text in the HTML is German, if your project translates German. Switch the language in the browser with your switcher and confirm the banner and dialog text change without a reload.