Preparing for production
In production mode you should never use localization data from Tolgee REST API and you should never leak your API key.
You should use data exported from Tolgee platform. To get exported localization files, see Exporting translations doc page.
In production, you should set the API key to undefined
and provide exported translations.
You have multiple options how to provide static i18n data to TolgeeProvider
component.
Providing data using dynamic import (recommended for projects without SSR)
To provide your localization data using dynamic import, you will need to add providers for every supported language to
TolgeeProvider's
config prop.
<script lang="ts">
import { TolgeeProvider } from "@tolgee/svelte";
import type { TolgeeConfig } from "@tolgee/core";
const tolgeeConfig = {
preloadFallback: true,
staticData: {
en: () => import("../i18n/en.json"),
cs: () => import("../i18n/cs.json"),
de: () => import("../i18n/de.json"),
fr: () => import("../i18n/fr.json")
},
availableLanguages: ["en", "de", "cs", "fr"]
} as TolgeeConfig;
</script>
<TolgeeProvider config={tolgeeConfig}>
<div slot="loading-fallback">Loading...</div>
<slot />
</TolgeeProvider>
Providing data as imported object (recommended for projects with SSR)
To provide your localization data using dynamic import, you will need to provide an object of translations for every supported language to TolgeeProvider's config prop.
<script lang="ts">
import { TolgeeProvider } from "@tolgee/svelte";
import type { TolgeeConfig } from "@tolgee/core";
import enLang from "../i18n/en.json"
import deLang from "../i18n/de.json"
import csLang from "../i18n/cs.json"
import frLang from "../i18n/fr.json"
const tolgeeConfig = {
preloadFallback: true,
staticData: {
en: enLang,
cs: csLang,
de: deLang,
fr: frLang
},
availableLanguages: ['en', 'de', 'cs', 'fr']
} as TolgeeConfig;
</script>
<TolgeeProvider config={tolgeeConfig}>
<div slot="loading-fallback">Loading...</div>
<slot />
</TolgeeProvider>
To get full image of working Svelte integration, check our Svelte Example Application.