Skip to main content
Version: 5.x.x

API

TolgeeProvider​

Provides the Tolgee context. Use in the root of the application.

import { TolgeeProvider } from '@tolgee/svelte';

...

<TolgeeProvider>
  <App />
</TolgeeProvider>

Prop fallback?​

string - rendered when translations are loading.

Prop tolgee?​

Provide a Tolgee instance.

Slot fallback​

Alternative for fallback. Use when you to pass components.

<TolgeeProvider>
  <App />
  <div slot="fallback">Loading...</div>
</TolgeeProvider>

T component​

Implement translation in your Svelte application. It has a very similar API to the t function.

import { T } from '@tolgee/svelte';

<T keyName="key" defaultValue="Default" />

Prop keyName​

String - translation key.

Prop defaultValue?​

String - Rendered if no translation for the specified key (in neither the selected language nor the base language) is present. If not provided, keyName gets rendered instead.

Prop params?​

Record<string, string> - variable params, which can be used in translation value (read more about ICU message format).

Prop ns?​

string - translation namespace

Prop noWrap?​

Boolean (default: false)

  • false - in development mode translation will be wrapped
  • true - use when wrapping in dev mode causes problems. In-context translation won't work.

Prop language?​

String - override current Tolgee language. Allows switching to different language for separate translation. Load the language manually with tolgee.loadRecord.

Function getTranslate​

Use it for loading namespaces for specific components/pages or to get t function for translating (returned t function uses first namespace from the list automatically).

function getTranslate(ns?: string | string[]): {
  t: Readable<TFnType>;
  isLoading: Readable<boolean>;
};

Parameter ns​

  • string | string[] - namespace(s) to be loaded

Property isLoading (Readable)​

  • boolean - is true if any of the listed namespaces is loading. Use this property to ensure translations are rendered after they are loaded.

Function t (Readable)​

Returns requested translation and also subscribes component to translation/language changes. Component will be re-rendered every time translation changes. If used with namespaces, t function will automatically use the first the namespace given to useTranslate function. Override this with the ns option.

$t('key', 'Default value', <options>)

Check tolgee.t function interface.

Function getTolgee​

Returns the Tolgee instance as a Readable. Allows subscription to different events. Most common usecase is for language switching.

<script>
  import { getTolgee } from '@tolgee/svelte';

  // gets updated on language change
  const tolgee1 = getTolgee(['language']);

  // gets updated when loading changes
  const tolgee2 = getTolgee(['loading']);

  // never gets updated
  const tolgee3 = getTolgee();
</script>

<div>Language: {$tolgee1.getLanguage()}</div>
<div>Loading: {$tolgee2.isLoading()}</div>