Internationalization library for Svelte
Go to file
Christian Kaisermann 31b556bc3f feat: 🎸 make getClientLocale tree-shakeable
BREAKING CHANGE: It's now needed to explicitly import the `getClientLocale` method to use
its heuristics when setting the initial locale. This makes the method
and its helpers to be tree-shakeable.

```js
import { init, getClientLocale } from 'svelte-i18n'

init({
  initialLocale: getClientLocale({ ... })
})
```
2020-02-03 11:24:50 -03:00
.github
docs feat: 🎸 make getClientLocale tree-shakeable 2020-02-03 11:24:50 -03:00
example
src feat: 🎸 make getClientLocale tree-shakeable 2020-02-03 11:24:50 -03:00
test feat: 🎸 make getClientLocale tree-shakeable 2020-02-03 11:24:50 -03:00
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitignore chore: 🤖 oops, fix actual build-time types being git ignored 2020-01-23 10:32:56 -03:00
.nvmrc
.prettierrc
CHANGELOG.md chore(release): v2.3.1 🎉 2020-01-29 11:47:19 -03:00
LICENSE
package.json chore: 🤖 add lint-staged and husky 2020-01-29 11:49:28 -03:00
README.md
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