Internationalization library for Svelte
Go to file
Christian Kaisermann 1ea650860c chore(release): v2.0.1 🎉
2019-11-24 00:21:17 -03:00
.github chore: 🤖 change minimum test version 2019-11-22 13:51:18 -03:00
example fix: 🐛 fallback behaviour and simplify API contact points 2019-11-24 00:21:17 -03:00
src chore(release): v2.0.1 🎉 2019-11-24 00:21:17 -03:00
test fix: 🐛 fallback behaviour and simplify API contact points 2019-11-24 00:21:17 -03:00
.babelrc Namespace i18n store methods with "i18n" property 2018-08-08 20:17:08 -03:00
.editorconfig I'm sorry Typescript, it's not you... 2018-08-07 18:53:07 -03:00
.eslintignore feat: 🎸 add waitInitialLocale helper 2019-11-22 13:51:18 -03:00
.eslintrc refactor: 💡 rewrite to typescript 2019-11-22 13:51:18 -03:00
.gitignore docs: ✏️ link to wiki 2019-11-22 13:51:18 -03:00
.nvmrc docs: ✏️ link to wiki 2019-11-22 13:51:18 -03:00
.prettierrc refactor: 💡 separation of a lot of concerns 2019-11-22 13:51:18 -03:00
CHANGELOG.md chore(release): v2.0.1 🎉 2019-11-24 00:21:17 -03:00
LICENSE 👶 Initial commit 2018-07-25 22:50:55 -03:00
package-lock.json chore(release): v2.0.1 🎉 2019-11-24 00:21:17 -03:00
package.json chore(release): v2.0.1 🎉 2019-11-24 00:21:17 -03:00
README.md docs: ✏️ add tiny example to readme 2019-11-22 15:07:20 -03:00
rollup.config.js WIP - add Lang.svelte component 2019-11-22 13:51:18 -03:00
tsconfig.json refactor: 💡 rewrite to typescript 2019-11-22 13:51:18 -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 12+, 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 to documentation