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 { default as t, locale } from "@primate/i18n/svelte";

  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 { default as t, locale } from "@primate/i18n/react";
// import { default as t, locale } from "@primate/i18n/solid"; // 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.

Error list

Empty Locale Directory

Level Warn

The locales directory is empty, module is disabled.

Populate this directory with locales.

Missing Default Locale

Level Warn

The default locale locale was not found in the locale directory, module is disabled.

Create a translation for the default locale in the locale directory.

Missing Locale Directory

Level Warn

The locales directory is missing, module is disabled.

Create this directory and populate it with locales.

Resources

• Repository