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 backend sends the text for the visitor's language with the policy. Edit copy there, not in your Vue code. The Vue plugin 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

By default the browser's own language decides. With hosted(), the browser sends it as Accept-Language with the policy request to /init. With manifest(), c15t reads navigator.language and resolves the text from the manifest. When your project has no text for that language, the policy's fallback language applies.

manifest() bundles English base copy only. When a visitor resolves to another language, the browser loads that language's base copy from your site the first time it is needed. Each visitor downloads their own language only, and English visitors download no extra copy.

The text direction follows the resolved language. Arabic, Hebrew and other 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 ConsentRoot to your site's current language. When the prop changes, ConsentRoot stores the language and resolves the policy again, which fetches the text in that language:

<ConsentRoot :language="locale" />

Without ConsentRoot, assign the language to useConsentLanguage(). A new language runs init again, which fetches the banner and dialog text in that language. Assigning the current language does nothing:

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

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 in the Vue components is a c15t option instead. Set it in the visitor's language when your site has more than one:

Verify

Set your browser's preferred language to one your project translates, open the app in a private window and confirm the banner uses it. Switch the language with your switcher and confirm the banner and dialog text change without a page reload.