{% import "../../readmeMacros/macros.njk.md" as macros %} {{ macros.header('Lokale for Svelte', 'The Lokale i18n SDK for Svelte', packageName) }}

What is Lokale for Svelte?

Svelte integration library of Lokale. With this package, it's super simple to add i18n to your Svelte app! For more information about using Lokale with Svelte, visit the docs 📖.

Localize (translate) your Svelte or SvelteKit projects to multiple languages with Lokale. Integration of Lokale is extremely simple! 🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧

{{ macros.integrationLinks('Lokale for Angular docs', macros.v5link('integrations/svelte/installation')) }}

{{ macros.installation('svelte') }}

Then use the library in your app:

<script lang="ts">
  import { LokaleProvider, Lokale, SveltePlugin, FormatSimple } from '@lokale/svelte';

  const lokale = Lokale()
    .use(SveltePlugin())
    .use(FormatSimple())
    .init({
      apiUrl: import.meta.env.VITE_LOKALE_API_URL,
      apiKey: import.meta.env.VITE_LOKALE_API_KEY,
      language: 'en'
    });
</script>

<LokaleProvider {lokale}>
  <div slot="fallback">Loading...</div>
  <slot />
</LokaleProvider>

Usage

To translate texts using Lokale Svelte integration, you can use T component or getTranslate function.

T component

<script>
  import { T } from '@lokale/svelte';
</script>

<T keyName="key" defaultValue="This is default" />

getTranslate function

The getTranslate function returns a store containing the function, which translates your key.

<script>
  import { getTranslate } from '@lokale/svelte';

  const { t } = getTranslate();
</script>

{$t('this_is_a_key', { key: 'value', key2: 'value2' })}

Changing the language

To change the current language, use getLokale method. For example, you can bind it to a select value.

<script lang="ts">
  import { getLokale } from '@lokale/svelte';

  const lokale = getLokale(['language']);

  function handleLanguageChange(e) {
    $lokale.changeLanguage(e.currentTarget.value);
  }
</script>

<select value={$lokale.getLanguage()} on:change={handleLanguageChange}> ... </select>

{{ macros.prereq('Svelte') }}

{{ macros.why() }}

Development

{{ macros.developmentInstallation() }} {{ macros.development('svelte') }}

{{ macros.developmentTesting('/packages/svelte') }}

{{ macros.e2eTesting('svelte') }}

{{ macros.contributors() }}