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
- yarn
npm install @tolgee/svelte
yarn add @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.