API (Svelte)
TolgeeProvider
Provides Tolgee context. Use in root of your application.
import { TolgeeProvider } from '@tolgee/vue';
...
<TolgeeProvider>
<App />
</TolgeeProvider>
Prop fallback?
string
- it is rendered when Tolgee is loading translations instead of provided content.
Prop tolgee?
Optionally provide tolgee instance. If you use VueTolgee
, it's not necessary.
Slot fallback
Alternative for fallback
, use when you want to pass components:
<TolgeeProvider>
<App />
<div slot="fallback">Loading...</div>
</TolgeeProvider>
T
component
import { T } from '@tolgee/svelte';
<T keyName="key" defaultValue="Default" />
Prop keyName
String
- translation key.
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.
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 wrappedtrue
- use when wrapping in dev mode causes problems, in this case in-context translation won't work
Prop language?
String
- override current Tolgee language. This way you can switch 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.
function getTranslate(ns?: string | string[]): {
t: Readable<TFnType>;
isLoading: Readable<boolean>;
};
Parameter ns
string
|string[]
- namespace(s) which will be loaded
Property isLoading
(Readable)
boolean
- is true if any of listed namespaces is not loaded yet
Use this property to make sure you won't display translation translations before they are loaded.
Function t
(Readable)
Returns requested translation and also subscribes component to translation/language changes, so component will be re-rendered every time translation changes. If you use namespaces, t
function will automatically use first of the namespaces given to useTranslate
function. You can override this by ns
option.
$t('key', 'Default value', <options>)
Check
tolgee.t
function interface.
Function getTolgee
Returns tolgee instance as Readable
. Allows subscription to different events
. Most common usecase is for language switch.
<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>