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}!'})}

caution

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.

info

To get full image of working Svelte integration, check our Svelte Example Application.