Skip to main content

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 staticconst 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'}}" strategy="ELEMENT_WRAP">Default value</T>

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 strategy?#

'ELEMENT_WRAP' | 'TEXT_WRAP' | 'NO_WRAP' (default: ELEMENT_WRAP)

  • ELEMENT_WRAP - translation is wrapped with span element, which makes in-context localization work
  • TEXT_WRAP - translation is wrapped with text, in-context localization works (see Advanced translating)
  • NO_WRAP - no wrapping, only raw string is rendered, in-context localization won't work, use wisely

Slot default?#

  • You can pass default value in a default slot. 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, keyName will be rendered instead.
<T keyName="...">This will be rendered when translation is missing!</T>

getTranslate function#

Returns store containing translating function

function t(  key: string,  parameters: Record<string, string>,  noWrap?: boolean,  defaultValue?: string): string
// or with options objectfunction 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>