Translating
You can implement translation in your Svelte application in the following ways.
- Using the
getTranslate
function - Using the
T
component
getTranslate
function
The getTranslate
function provides a t
function. This t
function should be used to render the respective translation.
The below code demonstrates the implemention of the getTranslate
and the t
function.
<script>
import { getTranslate } from "@tolgee/svelte";
// t is store
const { t } = getTranslate();
</script>
<!-- use the translation function -->
{$t('key', 'Default value')}
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
Moreover, you can load namespaces with the getTranslate
function.
const { t, isLoading } = getTranslate('common');
This example will load common
namespace which can be then used with t
function.
Read more about namespaces here.
The T
component
You can also use the T
component for translation. It has an API similar to the t
function mentioned above.
<script>
import { T } from "@tolgee/svelte";
</script>
<T
keyName="translation_key"
defaultValue="User has {count} points"
params={{ count: 10 }}
/>
You can also check the Svelte example application to learn more.