Installation (Svelte)

info

To get full image of working Svelte integration, check our Svelte Example Application.

To install Tolgee Svelte integration library, run:

npm

npm install @tolgee/svelte

yarn

yarn add @tolgee/svelte

pnpm

pnpm install @tolgee/svelte

Init Tolgee and wrap your application in TolgeeProvider.

<script>
  import { TolgeeProvider, Tolgee, DevTools, FormatSimple } from '@tolgee/svelte';

  const tolgee = Tolgee()
    .use(DevTools())
    .use(FormatSimple())
    .init({
      language: 'en',

      // for development
      apiUrl: import.meta.env.VITE_TOLGEE_API_URL,
      apiKey: import.meta.env.VITE_TOLGEE_API_KEY,

      // for production
      staticData: {
        ...
      }
    });
</script>

<TolgeeProvider tolgee={tolgee}>
  <div slot="fallback">Loading...</div>
  <slot />
</TolgeeProvider>

Check Initialization for more info.

If you bootstrapped your application with SvelteKit, your .env.development.local file should look like this:

VITE_TOLGEE_API_KEY=tgpak_gfpwiojtnrztqmtbna3dczjxny2ha3dmnu4tk4tnnjvgc
VITE_TOLGEE_API_URL=https://app.tolgee.io

danger

Never leak your API key! You don't want visitors of your site to edit your translations. That's why we recommend to use .env files to store your API key. API key is then omitted for production build.

Obtaining Tolgee API key is described in Integration chapter.

Preparing for production

In production mode, you should never use localization data from Tolgee REST API and never leak your API key. You should use data exported from the Tolgee platform or use Tolgee Content Delivery load localizations reliably.

Check Providing static data section.