Internationalization library for Svelte
Go to file
2020-02-06 14:37:27 -03:00
.github chore: 🤖 test on latest node (for Intl purposes) 2019-11-28 23:16:05 -03:00
docs Remove v2 docs and test 2020-02-06 14:37:27 -03:00
example Update example init 2020-02-06 14:37:17 -03:00
src refactor: 💡 split getClientLocale into multiple utilities 2020-02-03 13:33:03 -03:00
test Remove v2 docs and test 2020-02-06 14:37:27 -03:00
.babelrc
.editorconfig
.eslintignore
.eslintrc test: 💍 add tests for formatters 2019-11-27 13:26:18 -03:00
.gitignore chore: 🤖 bump package json version 2020-02-03 11:24:50 -03:00
.nvmrc chore: 🤖 change nvmrc version 2019-11-28 23:19:05 -03:00
.prettierrc
CHANGELOG.md chore(release): v3.0.1 🎉 2020-02-03 13:33:33 -03:00
LICENSE
package-lock.json Update package-lock 2020-02-06 14:15:54 -03:00
package.json refactor: 💡 split getClientLocale into multiple utilities 2020-02-03 13:33:03 -03:00
README.md chore: 🤖 link readme to the getting started 2020-02-03 13:35:42 -03:00
rollup.config.js feat: 🎸 add runtime typings 2020-01-23 10:11:04 -03:00
tsconfig.json feat: 🎸 add runtime typings 2020-01-23 10:11:04 -03:00
yarn.lock chore: 🤖 add lint-staged and husky 2020-01-29 11:49:28 -03:00

npm version

svelte-i18n

Internationalization for Svelte.

svelte-i18n helps you localize your app using the reactive tools Svelte provides. By using stores to keep track of the current locale, dictionary of messages and to format messages, we keep everything neat, in sync and easy to use on your svelte files.

Requirements

  • Node: >= 11.15.0
  • Browsers: Chrome 38+, Edge 16+, Firefox 13+, Opera 25+, Safari 8+.
<script>
  import { _ } from 'svelte-i18n'
</script>

<h1>{$_('page.home.title')}</h1>

<nav>
  <a>{$_('page.home.nav', { default: 'Home' })}</a>
  <a>{$_('page.about.nav', { default: 'About' })}</a>
  <a>{$_('page.contact.nav', { default: 'Contact' })}</a>
</nav>
// en.json
{
  "page": {
    "home": {
      "title": "Homepage",
      "nav": "Home"
    },
    "about": {
      "title": "About",
      "nav": "About"
    },
    "contact": {
      "title": "Contact",
      "nav": "Contact Us"
    }
  }
}

Go see the documentation