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:
`ts
import i18next from "i18next";
import { createI18nStore } from "svelte-i18next";

i18next.init({
lng: 'en',
resources: {
en: {
translation: {
"key": "hello world"
}
}
},
interpolation: {
escapeValue: false, // not needed for svelte as it escapes by default
}
});

const i18n = createI18nStore(i18next);
export default i18n;
`

App.svelte:
`svelte



`

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:
`ts
import i18next from "i18next";
import { createI18nStore } from "svelte-i18next";

i18next.init({
lng: 'en',
resources: {
en: {
translation: {
"key": "hello world"
}
}
},
interpolation: {
escapeValue: false, // not needed for svelte as it escapes by default
}
});

export default () => createI18nStore(i18next);
`

routes/+layout.svelte:
`sveltehtml

`

routes/+page.svelte:
`sveltehtml



``

See full example project: Svelte example