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

What is Mi18n for Svelte?

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

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

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

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

Then use the library in your app:

<script lang="ts">
  import {
    Mi18nProvider,
    Mi18n,
    SveltePlugin,
    FormatSimple,
  } from '@mi18n/svelte';

  const mi18n = Mi18n()
    .use(SveltePlugin())
    .use(FormatSimple())
    .init({
      apiUrl: import.meta.env.VITE_MI18N_API_URL,
      apiKey: import.meta.env.VITE_MI18N_API_KEY,
      language: 'en',
    });
</script>

<Mi18nProvider {mi18n}>
  <div slot="fallback">Loading...</div>
  <slot />
</Mi18nProvider>

Usage

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

T component

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

  const mi18n = getMi18n(['language']);

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

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