Translating
You can implement translation in your Vue application in the following ways.
- Using the global
$t
function - Using the
useTranslate
composable - Using the
T
component
Global $t
function
The VueTolgee
plugin provides a $t
function that allows you to translate strings in your Vue application. If the VueTolgee
plugin is registered, the $t
function is available globally in your application.
<template>
<div>{{ $t('this_is_a_key') }}</div>
</template>
useTranslate
composable
The Tolgee integration library provides the useTranslate
composable, which comes with a translation function (t
function). Using this t
function, you can render the actual translation.
<template>
<div :title="t('key')">...</div>
</template>
<script setup>
import { useTranslate } from '@tolgee/vue';
const { t } = useTranslate();
</script>
t
function
This function allows you to render the actual translation.
Simple usage
t('app_title')
The t
function looks into your translations finds an appropriate key and renders the translation for currently selected language
If you use Typescript read about typed keys
Default value
You can pass the default value as second parameter, which will be rendered if the key doesn't exist yet.
t('non_existant_key', 'Default value')
Parameter interpolation
You can supply a variable parameters which will then be rendered in your translations.
t('user_points', 'User has {count} points', { count: 10 })
// -> User has 10 points
There are more options you can do with the variable parameters, but it depends on selected formatter plugin.
To get the full
t
function specification check it's API
Using namespaces
The useTranslate
composable can be also used for loading additional namespaces.
const { t, isLoading } = useTranslate('common');
This example will load common
namespace which can be then used with t
function.
Read more about namespaces here.
The T
component
An alternative way is to use the T
component. It has a very similar API to the t
function mentioned above.
<template>
<T
keyName="translation_key"
defaultValue="User has {count} points"
:params="{ count: 10 }"
/>
</template>
<script setup>
import { T } from '@tolgee/vue';
</script>
You can also check the Vue example application to learn more.