svelte-i18n/README.md

svelte-i18n

Internationalization for Svelte

Usage

On the store

import i18n from 'svelte-i18n'
import { Store } from 'svelte/store'

/** i18n(svelteStore, { dictionary }) */
let store = new Store()

store = i18n(store, {
  dictionary: {
    'pt-BR': {
      message: 'Mensagem',
      greeting: 'Olá {name}, como vai?',
      greetingIndex: 'Olá {0}, como vai?',
      meter: 'metros | metro | metros',
      book: 'livro | livros',
      messages: {
        alert: 'Alerta',
        error: 'Erro',
      },
    },
    'en-US': {
      message: 'Message',
      greeting: 'Hello {name}, how are you?',
      greetingIndex: 'Hello {0}, how are you?',
      meter: 'meters | meter | meters',
      book: 'book | books',
      messages: {
        alert: 'Alert',
        error: 'Error',
      },
    },
  },
})

/**
 * Extend the initial dictionary.
 * Dictionaries are deeply merged.
 * */
store.i18n.extendDictionary({
  'pt-BR': {
    messages: {
      warn: 'Aviso',
      success: 'Sucesso',
    },
  },
  'en-US': {
    messages: {
      warn: 'Warn',
      success: 'Success',
    },
  },
})

/** Set the initial locale */
store.i18n.setLocale('en-US')

On templates

Basic usage

<div>
  {$_('message')}: {$_('messages.success'))}
  <!-- Message: SUCCESS-->
</div>

Interpolation

<div>
  <!-- Named interpolation -->
  {$_('greeting', { name: 'John' }))}
  <!-- Hello John, how are you?-->

  <!-- List interpolation -->
  {$_('greetingIndex', ['John']))}
  <!-- Hello John, how are you?-->
</div>

Pluralization

<div>
  0 {$_.plural('meter', 0))}
  <!-- 0 meters -->

  1 {$_.plural('meter', 1))}
  <!-- 1 meter -->

  100 {$_.plural('meter', 100))}
  <!-- 100 meters -->

  0 {$_.plural('book', 0))}
  <!-- 0 books -->

  10 {$_.plural('book', 10))}
  <!-- 10 books -->
</div>

Utilities

<div>
  {$_.upper('message'))}
  <!-- MESSAGE -->

  {$_.lower('message'))}
  <!-- message -->

  {$_.capital('message'))}
  <!-- Message -->

  {$_.title('greeting', { name: 'John' }))}
  <!-- Hello John, How Are You?-->
</div>