svelte-i18next

Svelte wrapper for i18next

npm i svelte-i18next i18next

Implementation

This library wraps an i18next instance in a Svelte Store to observe i18next events so your Svelte components re-render e.g. when language is changed or a new resource is loaded by i18next.

Quick Start

i18n.js:

1import i18next from "i18next";
2import { createI18nStore } from "svelte-i18next";
3
4i18next.init({
5 lng: 'en',
6 resources: {
7    en: {
8      translation: {
9        "key": "hello world"
10      }
11    }
12  },
13  interpolation: {
14    escapeValue: false, // not needed for svelte as it escapes by default
15  }
16});
17
18const i18n = createI18nStore(i18next);
19export default i18n;

App.svelte:

1<script>
2  import i18n from './i18n.js';
3</script>
4
5<div>
6    {$i18n.t('key')}
7</div>

Usage with Sveltekit

Sveltekit shares stores across requests on server-side. This means that one users request could change the language setting of another users rendering if that is still ongoing. To avoid this issue, use setContext to create request-scoped store instances:

i18n.js:

1import i18next from "i18next";
2import { createI18nStore } from "svelte-i18next";
3
4i18next.init({
5 lng: 'en',
6 resources: {
7    en: {
8      translation: {
9        "key": "hello world"
10      }
11    }
12  },
13  interpolation: {
14    escapeValue: false, // not needed for svelte as it escapes by default
15  }
16});
17
18export default () => createI18nStore(i18next);

routes/+layout.svelte:

1<script>
2  import getI18nStore from "i18n.js";
3  import { setContext } from "svelte";
4  
5  setContext('i18n', getI18nStore());
6</script>

routes/+page.svelte:

1<script>
2  import { getContext } from "svelte";
3  
4  const i18n = getContext("i18n");
5</script>
6
7<div>
8  <h1>{ $i18n.t("key") }</h1>
9</div>

See full example project: Svelte example