Tolgee for Svelte API

TolgeeProvider

Provides Tolgee instance. Use in root of your application.

<script>
  import { TolgeeProvider } from "@tolgee/svelte";

  const tolgeeConfig = {
   ...
  }
</script>

<TolgeeProvider config={tolgeeConfig}>
  <div slot="loading-fallback">Loading...</div>
  <slot />
</TolgeeProvider>

Prop config

TolgeeConfig object, which is passed to Tolgee instance.

Slot loading-fallback

Slot which is rendered, when translations are loading. It's not rendered, when translations are provided through staticData config property as object in production mode.

Example when loading-fallback is not rendered:

import enLang from '../i18n/en.json'; // data is static
const tolgeeConfig = {
  // ...
  staticData: {
    en: enLang,
  },
};

Example when loading-fallback is rendered:

const tolgeeConfig = {
  ...
  staticData: {
    en: () => import("../i18n/en.json") // data is provided as function returning Promise of data
  }
};

T component

<script>
  import { T } from "@tolgee/svelte";
</script>

<T keyName="keyName" parameters="{{parameter: 'value'}}" />

Prop keyName

String - translation key.

Prop parameters?

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

Prop noWrap?

Boolean (default: false)

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

Prop defaultValue?

String - You can pass default value, which will be rendered if there is no translation for this key (in selected language nor base language). If you won't provide this value, keyName will be rendered instead.

getTranslate function

Returns store containing translating function

function t(
  key: string,
  parameters: Record<string, string>,
  noWrap?: boolean,
  defaultValue?: string
): string;

// or with options object
function t(options: {
  key: string;
  parameters?: Record<string, string>;
  noWrap?: boolean;
  defaultValue?: string;
}): string;

Example:

<script>
  import { getTranslate } from "@tolgee/svelte";

  const t = getTranslate();

  t.subscribe((fn) =>
    // translated value will be printed every time language or translation changes
    console.log(fn({
      key: "key",
      defaultValue: "Defaaaault!",
      noWrap: true,
      parameters: { param: "value" }
    }))
  );
</script>

<!--or in template `$` does the subscribe magic-->
{$t({ key: 'key', defaultValue: 'Defaaaault!' })}

Parameter key

String - translation key

Parameter parameters?

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

Parameter noWrap?

Boolean (default: false)

• false - in development mode translation will be wrapped
• true - use when wrapping in dev mode causes problems, or you pass write it outside the DOM (for example document.title), in this case in-context translation won't work

Parameter defaultValue?

String - It will be rendered if there is no translation for this key (in selected language nor base language). If you don't provide this value, key will be rendered instead.

Function getLanguageStore

Writable<string> - Writeable store containing the current language. (see Switching language)

<script>
  import {getLanguageStore} from "@tolgee/svelte"; const languageStore =
  getLanguageStore(); languageStore.subscribe((lang) => console.log(lang));
</script>