This is a Svelte component based on derived stores which implements gettext based translation (i18n) of strings.
Version 2 is an improvement to make the code more encapsulated and modular.
npm install svelte-i18n-gettext
Include the stores:
import { _ } from 'svelte-i18n-gettext';
import { setLang, addTranslationForLanguage } from 'svelte-i18n-gettext/src/stores';
Use setLang
to set the language:
setLang('es-MX')
Include the translation files (see the examples directory for samples) and assign them to the store:
import msg_de_DE from '$lib/i18n/de-DE/messages.json';
import msg_en_US from '$lib/i18n/en-US/messages.json';
import msg_es_MX from '$lib/i18n/es-MX/messages.json';
import msg_fr_FR from '$lib/i18n/fr-FR/messages.json';
addTranslationForLanguage('fr-FR', msg_fr_FR);
addTranslationForLanguage('de-DE', msg_de_DE);
addTranslationForLanguage('es-MX', msg_es_MX);
addTranslationForLanguage('en-US', msg_en_US);
You still can use the version 1.x way, even if it is deprecated:
import { _, _n } from 'svelte-i18n-gettext/src/index.svelte';
import { parsedTranslations, lang } from 'svelte-i18n-gettext/src/store.js';
Use the lang
(or a local alias) store to specify the language to use:
$lang = 'es-MX';
Optionally, get the browser's language:
$lang = detectBrowserLanguage();
Or any other method, such as loading user's preferences.
Include the translation files (see the examples directory for samples) and assign them to the store:
import msg_de_DE from '$lib/i18n/messages-de.json';
$parsedTranslations['de-DE'] = msg_de_DE;
import msg_en_US from '$lib/i18n/messages-en.json';
$parsedTranslations['en-US'] = msg_en_US;
import msg_es_MX from '$lib/i18n/messages-es.json';
$parsedTranslations['es-MX'] = msg_es_MX;
(Adjust your paths according to your project's structure)
In your Svelte code, for singular form you can use the $_
derived store:
<script>
// in order to use strings with parameters, you need to include this library:
import { sprintf } from 'sprintf-js';
</script>
<div>
{@html sprintf($_('Welcome, <b>%s</b>'), $user.profile.name)}
<br />
{$_("Good bye.")}
</div>
In your Svelte code, for plural forms you can use the $_n
derived store:
<div>
<!-- n contains the number of deleted files -->
{@html sprintf($_n('One file deleted', '%s files deleted', n))}
</div>
These stores have the following signatures:
_(msgid, msgctx)
_n(msgid, msgidPlurals, count, msgctx)
For both derived stores there is a parameter msgctx
which can be used to specify the context of the translation.
### xgettext
You can use [```xgettext```](https://www.gnu.org/software/gettext/manual/html_node/xgettext-Invocation.html) directly:
```bash
xgettext -f files.txt -o messages.pot -L JavaScript --from-code="utf-8" --no-wrap --keyword=$_
If you already have previous po
files, you can use a command like this to merge the strings:
msgmerge -U your_old_translation.po latest_strings.pot
svelte-i18n-gettext uses standard gettext .po files, which must be manually converted into the JSON as produced by gettext-parser using the po2json.pl
Perl script, which can be found here. Any other tool which produces the same format should be useful.
svelte-i18n-gettext depends on the follownig node packages:
msgid
)You can try this software live here.
There is also a local example project in the example directory.
Copyright (c) 2023-2025 Rodolfo González González.
Licensed under BSD-3-Clause license. Read the LICENSE file.