Skip to main content

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

To install UI bundle for in-context translating you will also need to install package @tolgee/ui:

npm install @tolgee/ui

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

<script lang="ts">  import { TolgeeProvider } from "@tolgee/svelte";  import UI from "@tolgee/ui";  import type { TolgeeConfig } from "@tolgee/core";
  const tolgeeConfig = {    preloadFallback: true,    apiUrl: import.meta.env.VITE_TOLGEE_API_URL, // or provide your API URL directly    ui: import.meta.env.VITE_TOLGEE_API_KEY ? UI : undefined, // UI is not needed for production mode    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=bkcq7tkoinjg9ehk9hc4t3duq3VITE_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.