svelte-i18n-light

Lightweight internationalization and translation for svelte

Usage no npm install needed!

<script type="module">
  import svelteI18nLight from 'https://cdn.skypack.dev/svelte-i18n-light';
</script>

README

Lightweight I18N for Svelte Apps

Usage

  1. create a translation file:

translations.js


export default {
  en: {
      hello: "hello world"
  },
  de: {
      hello: "hallo Welt"
  }

  1. Initialize the dictionary & hook to language selection:
import { dict, locale, t } from "svelte-i18n-light";
    import translations from "translations";
    $: languages = Object.keys(translations);
    $: dict.set(translations);


....

function selectLang(e) {
    let langElem = e.target;
    $locale = langElem.innerHTML;
    handleMenuOpen();
}


....


{#each languages as lang}
    <li
        on:click={selectLang}
        >
        <p class:font-bold={$locale == lang}>
            {lang}
        </p>
    </li>
{/each}

  1. Translate in any component
<script>
  import { t } from 'svelte-i18n-light'
</script>

{$t('hello')}