Skip to main content

Translating with Vue

There are two ways how to translate with Tolgee.

The T component

<template>
<T keyName="translation_key" />
</template>

<script>
import { T } from '@tolgee/vue';

export default {
components: { T }
}
</script>

Parameter interpolation

To pass parameters, just add parameters property:

<T keyName="translation_key" :parameters="{param: 'value'}" />

For translated text This is {param} of the text it will result in This is value of the text (read ICU Message Format).

Providing default value

<T keyName="translation_key" defaultValue="This is default value." />

The default value will be rendered when no translation is provided in current nor fallback language.

Imperative translation

This solution is designed for cases where you can't use components (e.g. props). Use useTranslate, then you'll get access to the t function, which has similar API as T component, but you can use it anywhere. You can check all t parameters in API section

<template>
<div :title="t('translation_key')">Hello</div>
</template>

<script>
export default {
setup() {
const t = useTranslate();
return { t };
},
}
</script>