Translating with Tolgee for Svelte
When you have Tolgee libraries installed and TolgeeProvider
is set
up, you can start to translate your strings.
There are several ways how to translate a text using Tolgee Svelte integration.
The T component
First and the recommended way is the <T>
component. You can use it like this:
<script lang="ts">
import { T } from "@tolgee/svelte";
</script>
<T keyName="this_is_a_key" />
To provide parameters to you translation, use parameters prop.
<T keyName="greeting" parameters={{name: "Josh"}} />
For translation Hello {name}!
the rendered string will be Hello Josh!
.
Also, when you hold Alt
key and move you mouse over the string, you should be able to click & translate the text
in-context.
We are using ICU message format. To read more about it, check ICU Message Format documentation page.
Providing default value
You can also provide defaultValue
prop to the T
component. This value will be used when no translation
has been found in localization data.
<T keyName="this_is_a_key" defaultValue="This is default." />
getTranslate
method
If you cannot use T
component for some reason, then you can also use
getTranslate
method returning store containing
a translation function. The usage is very simple, look:
<script lang="ts">
import { getTranslate } from "@tolgee/svelte";
const t = getTranslate(); // returns the translation function store
</script>
<!-- use the translation function -->
{$t({key: 'greeting', parameters: {name: "Josh"}, defaultValue: 'Hello {name}!'})}
Don't use it with context="module"
, it won't work, since the method is not called in component initialization.
<script context="module"> // ❌
import { getTranslate } from "@tolgee/svelte";
const t = getTranslate(); // <- This will throw an Error 🚨
</script>
<script> // ✅
import { getTranslate } from "@tolgee/svelte";
const t = getTranslate(); // <- This won't throw an Error 🎉
</script>
Message format
All Tolgee integrations follow ICU message format standard.
{dogsCount, plural, one {One dog is} other {# dogs are}} here.
To read more about it, check ICU Message Format documentation page.
All Tolgee JS integrations are using MessageFormat class of formatJs library.
To get full image of working Svelte integration, check our Svelte Example Application.