Skip to main content
Version: 4.x.x

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>