I18N

This module adds internationalization to your application.

Install

npm install @primate/i18n

Configure

Import and initialize the module in your configuration.

import i18n from "@primate/18n";

export default {
  modules: [
    i18n(),
  ],
};

Prepare

This module exposes methods for internationalizing strings, optionally with placeholders, as well a language switcher. It currently supports Svelte, React and Solid.

Start by creating a locales directory, the default is locales. In this directory, create a JSON file for every locale you would like to support and add keys and translations.

{
  "welcome": "Hi and welcome, {username}",
  "message": "This is my website, feel at home here.",
  "bye": "Bye",
  "switch-language": "Switch language",
  "english": "English",
  "german": "German"
}

Add another locale.

{
  "welcome": "Hallo und willkommen, {username}",
  "message": "Das ist meine Website. Mache dich hier gemütlich.",
  "bye": "Tschüss",
  "switch-language": "Sprache wechseln",
  "english": "Englisch",
  "german": "Deutsch"
}

That's all you need in terms of preparation.

Use

Svelte

Use the default export from @primate/i18n/svelte in your components. Since it exposes a store, subscribe to it with $.

<script>
  import t from "@primate/i18n/svelte";

  export let username;
</script>
<h1>{$t("welcome", { username })}</h1>

<p>{$t("message")}</p>

{$t("bye")}~

To create a language switcher, import locale and call locale.set with the new locale.

<script>
  import t from "@primate/i18n/svelte";
  import locale from "@primate/i18n/svelte/locale";

  export let username;
</script>
<h1>{$t("welcome", { username })}</h1>

<p>{$t("message")}</p>

{$t("bye")}~

<h3>{$t("switch-language")}</h3>
<div><a on:click={() => locale.set("en-US")}>{$t("English")}</a></div>
<div><a on:click={() => locale.set("de-DE")}>{$t("German")}</a></div>

React / Solid

Use the default export from @primate/i18n/react in your components. For Solid, use @primate/i18n/solid instead.

import t from "@primate/i18n/react";
// import t from "@primate/i18n/solid"; // for solid

export default function ({ username }) {
  return <>
    <h1>{t("welcome", { username })}</h1>

    <p>{t("message")}</p>

    {t("bye")}~
  </>;
}

To create a language switcher, import locale and call locale.set with the new locale.

import t from "@primate/i18n/react";
// import t from "@primate/i18n/solid"; // for solid
import locale from "@primate/i18n/react/locale"
// import locale from "@primate/i18n/solid/locale"; // for solid

export default function ({ username }) {
  return <>
    <h1>{t("welcome", { username })}</h1>

    <p>{t("message")}</p>

    {t("bye")}~

    <h3>{t("switch-language")}</h3>
    <div><a onClick={() => locale.set("en-US")}>{t("English")}</a></div>
    <div><a onClick={() => locale.set("de-DE")}>{t("German")}</a></div>
  </>;
}

Configuration options

directory

Default "locales"

Directory where the locale files reside.

locale

Default "en"

The default locale to be used, if the browser hasn't advertised a preferred language using Accept-Language header or the client hasn't already set a locale using the locale switcher. In all cases, if the desired locale cannot be found, this value will be used as a fallback.

Primate will issue a MissingDefaultLocale warning and disable this module if a translation file doesn't exist for this locale in directory.

Resources

• Repository
• Error list