5.26.0 • Published 2 days ago

@tolgee/svelte v5.26.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 days ago

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

What is Tolgee for Svelte?

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

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

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

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

Then use the library in your app:

<script lang="ts">
  import {
    TolgeeProvider,
    Tolgee,
    SveltePlugin,
    FormatSimple,
  } from '@tolgee/svelte';

  const tolgee = Tolgee()
    .use(SveltePlugin())
    .use(FormatSimple())
    .init({
      apiUrl: import.meta.env.VITE_TOLGEE_API_URL,
      apiKey: import.meta.env.VITE_TOLGEE_API_KEY,
      language: 'en',
    });
</script>

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

Usage

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

T component

<script>
  import { T } from '@tolgee/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 '@tolgee/svelte';

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

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

Changing the language

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

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

  const tolgee = getTolgee(['language']);

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

<select value={$tolgee.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() }}

5.26.0

2 days ago

5.25.0

10 days ago

5.24.1

21 days ago

5.24.0

24 days ago

5.23.3

28 days ago

5.23.2

29 days ago

5.23.1

30 days ago

5.23.0

1 month ago

5.22.0

2 months ago

5.21.0

2 months ago

5.20.3

2 months ago

5.20.2

2 months ago

5.20.1

2 months ago

5.20.0

2 months ago

5.19.6

3 months ago

5.19.5

3 months ago

5.19.4

3 months ago

5.19.3

4 months ago

5.19.2

4 months ago

5.19.1

4 months ago

5.19.0

5 months ago

5.18.0

5 months ago

5.17.0

5 months ago

5.15.0

6 months ago

5.16.3

6 months ago

5.16.2

6 months ago

5.16.1

6 months ago

5.16.0

6 months ago

5.9.9

10 months ago

5.9.8

10 months ago

5.9.7

10 months ago

5.9.6

10 months ago

5.9.5

10 months ago

5.9.4

10 months ago

5.9.3

10 months ago

5.9.2

10 months ago

5.10.2

10 months ago

5.10.1

10 months ago

5.10.0

10 months ago

5.9.10

10 months ago

5.9.11

10 months ago

5.9.12

10 months ago

5.11.5

8 months ago

5.11.4

8 months ago

5.11.3

8 months ago

5.11.2

8 months ago

5.11.1

9 months ago

5.11.0

9 months ago

5.12.0

8 months ago

5.13.3

7 months ago

5.13.2

7 months ago

5.13.1

7 months ago

5.13.0

7 months ago

5.14.0

6 months ago

5.9.0

11 months ago

5.8.6

12 months ago

5.8.5

12 months ago

5.8.4

12 months ago

5.8.3

1 year ago

5.8.2

1 year ago

5.8.1

1 year ago

5.8.0

1 year ago

5.4.4

1 year ago

5.5.4

1 year ago

5.5.3

1 year ago

5.5.2

1 year ago

5.5.0

1 year ago

5.6.0

1 year ago

5.7.3

1 year ago

5.7.2

1 year ago

5.7.0

1 year ago

5.4.3

1 year ago

5.4.2

1 year ago

5.3.1

1 year ago

5.4.1

1 year ago

5.4.0

1 year ago

5.3.0

1 year ago

5.2.1

1 year ago

5.2.0

1 year ago

5.0.0-alpha.3

1 year ago

5.0.0-alpha.2

1 year ago

5.0.2

1 year ago

5.0.1

1 year ago

5.0.0

1 year ago

5.1.0

1 year ago

5.0.0-alpha.1

1 year ago

4.9.0

2 years ago

4.9.2

2 years ago

4.9.1

2 years ago

4.8.5

2 years ago

4.8.4

2 years ago

4.8.6

2 years ago

4.8.3

2 years ago

4.8.2

2 years ago

4.7.2

2 years ago

4.7.3

2 years ago

4.8.0

2 years ago

4.7.1

2 years ago

4.6.1

2 years ago

4.6.0

2 years ago

4.7.0

2 years ago

4.5.0

2 years ago

4.4.0

2 years ago

4.3.0

2 years ago

4.2.1

2 years ago

3.6.0

2 years ago

4.1.0

2 years ago

4.0.0

2 years ago

4.2.0

2 years ago

3.3.0-rc.0

2 years ago

3.1.3

2 years ago

3.3.0

2 years ago

3.2.0

2 years ago

3.5.0

2 years ago

3.1.2

2 years ago

3.1.1

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

2.8.2

2 years ago

2.8.1

2 years ago

2.8.0

2 years ago

2.7.0

2 years ago

2.5.1

2 years ago

2.4.1

2 years ago

2.4.0

2 years ago

2.2.0

2 years ago