Skip to main content
Version: 4.x.x

Install Tolgee Svelte SDK

info

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

To install Tolgee Svelte integration library, run:

npm install @tolgee/svelte

First, you will need to wrap your application code with TolgeeProvider component.

<script lang="ts">
  import { TolgeeProvider } from "@tolgee/svelte";
  import type { TolgeeConfig } from "@tolgee/core";

  const tolgeeConfig = {
    preloadFallback: true,
    apiUrl: import.meta.env.VITE_TOLGEE_API_URL, // or provide your API URL directly
    apiKey: import.meta.env.VITE_TOLGEE_API_KEY, // or provide API_KEY directly
  } as TolgeeConfig;
</script>

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

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

VITE_TOLGEE_API_KEY=bkcq7tkoinjg9ehk9hc4t3duq3
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.

Other configuration properties​

Configuration properties for all web integrations are similar. They are described in configuration section.