:globe_with_meridians: svelte-simple-i18n

Light internationalization support for svelte.

:book: Documentation

• Try a demo on CodeSandbox.

• API Reference on github pages.

Install

yarn add svelte-simple-i18n
# or
npm i svelte-simple-i18n

Usage

1. Prepare a language object.

// lang.js

export const enUS = 'en-US';
export const hiIn = 'hi-IN';
export const esMX = 'es-MX';

export const lang = {
  [enUS]: {
    onlyHere: 'only exists in english',
    foo: {
      baz: 'Translation in English',
    },
  },
  [hiIn]: {
    foo: {
      baz: 'हिंदी में अनुवाद',
    },
  },
  [esMX]: {
    foo: {
      baz: 'Traducción en español',
    },
  },
};

2. Create i18n module.

// i18n.js

import { lang, hiIN, enUS } from './lang';

export const { t, locale } = createI18n({
  messages: lang,
  locale: hiIN,
  fallbackLocale: enUS,
});

3. Use in you components.

<script>
  import { t, locale } from './i18n';
  import { esMX } from './lang';

  function changeLocale() {
    $locale = esMX;
  }
</script>

<div>
  {$locale}
  <!--= hi-IN -->

  {$t('foo.baz')}
  <!--= हिंदी में अनुवाद -->

  <!-- fallback -->
  {$t('onlyHere')}
  <!--= only exists in english -->

  <button on:click="{changeLocale}">Change Locale</button>
</div>