Announcing vue-inter 3.0
Tags: vue, i18n, javascript, showdev
Published: 2018-03-16 06:54:01

---
title: Announcing vue-inter 3.0
published: true
description: Simple minimal blazing-fast i18n library for Vue.js
cover_image: https://i.loli.net/2018/03/16/5aab6e0573f9d.jpg
tags: 
    - vue
    - i18n
    - javascript
    - showdev
---

`vue-inter` is an i18n library that is made exclusively for Vue.js, weighs only 1kB in size.

Code always speaks louder than words, let me give an example:

Here's your app entry `index.js`:

```js
import Vue from 'vue'
import Inter from 'vue-inter'
import Greeting from './Greeting.vue'

Vue.use(Inter)

const inter = new Inter({
  locale: 'en',
  // Messages for other locales
  messages: {}
})

new Vue({
  inter,
  render: h => h(Greeting)
})
```

Typically you would directly write message for default locale in your view layer, so there's no need to define messages for default locale when creating the `inter` instance.

Here's your view `Greeting.vue`:

```vue
<template>
  <div>
    <format-message
      path="app.greeting"
      defaultMessage="Hello {name}!"
      :data="{name: 'egoist'}"
    />
  </div>
</template>
```

With this it will be rendered as follows:

```html
<div><span>Hello egoist!</span></div>
```

## Add a new locale

First you need to define relevant messages when creating the `inter` instance:

```js
new Inter({
  locale: urlQuery.lang || 'en',
  messages: {
    // e.g. Add `cn` for Chinese
    cn: {
      app: {
        greeting: '你好 {name}'
      }
    }
  }
})
```

Now visit `?lang=cn` and you will get:

```html
<div><span>你好 egoist!</span></div>
```

[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6n0wzjvj2k)

## Plural support

You can use [intl-messageformat](https://github.com/yahoo/intl-messageformat) for extra plural support:

```js
import IntlMessageFormat from 'intl-messageformat'

const inter = new Inter({
  template(message, data) {
    if (!data) return message
    const tpl = new IntlMessageFormat(message, this.currentLocale)
    return tpl.format(data)
  }
})
```

Now you can use such syntax in locale messages:

```vue
<format-message
  path="app.showApples"
  defaultMessage="You have {num, plural, 
    =0 {no apples.}
    =1 {one apple.}
    other {# apples.}
  }"
  :data="{num: 10}"
/>
```

Note that you may need to [polyfill `Intl`](https://github.com/yahoo/intl-messageformat#intl-dependency) and [load locale data for non-English languages](https://github.com/yahoo/intl-messageformat#loading-intl-messageformat-in-a-browser).

## Use the API directly

You can directly access your Inter instance as `this.$inter` in your component, e.g.:

```js
// Switch to `cn` locale
this.$inter.setCurrentLocale('cn')
```

See [API](https://github.com/egoist/vue-inter#api) for more details.


## Differences with vue-i18n

- vue-inter is simple, minimal and blazing fast, 980B compared to vue-i18n's 5kB in size (gzipped)
- Plural/Datetime support is optional in vue-inter (that's why it's so small!)

---

## Links:

- [vue-inter](https://github.com/egoist/vue-inter#api)
- [codesandbox demo](https://codesandbox.io/s/vvky0nov6l)
- [my twitter @_egoistlily](https://twitter.com/_egoistlily)