Internationalization-enabled svelte-kit template with built-in i18n.
Use this template or Download zip
With ni
(recommended) (link)
ni && nr dev
With pnpm
pnpm install && pnpm run dev
This will start a development server watching the translations as well as the source files for changes.
The code is written directly in the target language. You'll often not need an english translation. This saves time and effort. You write
const hw = $t("Hello World");
//fr.json
{ "Hello World": "Bonjour Monde" }
Instead of
const hw = $t("helloWorld");
//en.json
{ "helloWorld": "Hello World" }
//fr.json
{ "helloWorld": "Bonjour Monde" }
This has several advantages, including
Note that although the first is shorter, if you prefer to use the second way, it is also perfectly valid!
Sometimes however, you'll have to use keys. There are typically 3 reasons you'd want to do so:
<!-- Component.svelte -->
<p>{$t("interpolated", {count: 10 })}</p>
<p>{$t("selected", {gender: "male"})}</p>
// en.json
{
"interpolated": "A text where I interpolate {count} times",
"selected": "{gender, select, male {He is a good boy} female {She is a good girl} other {They are good fellas}}"
}
See messageformat's documentation for details about the translation format.
š« DON'T:
<!-- Component.svelte -->
<p>{$t("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...")}</p>
<p>{$t(`Multiline string
that spans
multiple
lines`)}</p>
Translation nightmare
š DO:
<p>{$t("loremIpsum")}</p>
<p>{$t(`multiline`)}</p>
// en.json
{
"loremIpsum": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...",
"multiline": "Multiline string\nthat spans\nmultiple\nlines"
}
Note: you can use yaml (and soon json5 š¤š¤š¤) and all other formats supported by messageformat.
Note2: Nested keys are not allowed, and are not planned to be.
Note that messageformat has a bug under Windows, which has now been fixed, but hasn't been published yet. Until a release comes out, using this repo under Windows is troublesome. For those it concerns, try github codespaces.
MIT