Internationalization library for Svelte
Go to file
Christian Kaisermann f8b0fe8bbe chore(release): v2.2.0 🎉
2020-01-06 22:36:55 -03:00
.github chore: 🤖 test on latest node (for Intl purposes) 2019-11-28 23:16:05 -03:00
example Update example files 2019-11-29 19:47:05 -03:00
src fix: 🐛 make message formatter default to current locale 2020-01-06 22:36:31 -03:00
test feat: add low level API to get access to the formatters (#31) 2020-01-06 22:36:04 -03:00
.babelrc Namespace i18n store methods with "i18n" property 2018-08-08 20:17:08 -03:00
.editorconfig
.eslintignore feat: 🎸 add waitInitialLocale helper 2019-11-22 13:51:18 -03:00
.eslintrc test: 💍 add tests for formatters 2019-11-27 13:26:18 -03:00
.gitignore docs: ✏️ link to wiki 2019-11-22 13:51:18 -03:00
.nvmrc chore: 🤖 change nvmrc version 2019-11-28 23:19:05 -03:00
.prettierrc refactor: 💡 separation of a lot of concerns 2019-11-22 13:51:18 -03:00
CHANGELOG.md chore(release): v2.2.0 🎉 2020-01-06 22:36:55 -03:00
LICENSE
package-lock.json chore(release): v2.1.1 🎉 2019-12-02 20:20:24 -03:00
package.json chore(release): v2.2.0 🎉 2020-01-06 22:36:55 -03:00
README.md refactor: 💡 readme 2019-12-02 23:41:34 -03:00
rollup.config.js WIP - add Lang.svelte component 2019-11-22 13:51:18 -03:00
tsconfig.json chore(release): v2.1.1 🎉 2019-12-02 20:20:24 -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