vue-inter

Install

yarn add vue-inter

CDN: UNPKG | jsDevlir (available as window.VueInter)

Usage

App entry index.js:

import Inter  from 'vue-inter'
import App from './App.vue'
 
Vue.use(Inter)
 
const inter = new Inter({
  locale: 'en',
  // Define messages for other locales
  messages: {}
})
 
new Vue({
  inter,
  render: h => h(App)
})

Root component App.vue:

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

First, we find message from messages at given path, then we fallback to defaultMessage if not found.

Plural support

You can use intl-messageformat instead of our default template option to add plural support:

import IntlMessageFormat from 'intl-messageformat'
 
const inter = new Inter({
    template(message, data) {
        const tpl = new IntlMessageFormat(message, this.currentLocale)
        return tpl.format(data)
    }
})

Components

<FormatMessage>

Props

path

Type: string
Required: true

Find locale message at given path, or fallback to defaultMessage below.

defaultMessage

Type: string

data

Type: object

tag

Type: string object
Default: span

An HTML tag or Vue component.

API

Instance API

Create Instance

const inter = new Inter({
  // Current locale
  locale: 'en',
 
  // Messages for each locale
  messages: {
    en: LocaleMessages,
    zh: LocaleMessages
  },
 
  // Message templating
  template: Template
})

A LocaleMessages type is:

interface LocaleMessages {
  /** The value is a string or a function that returns a string */
  [path: string]: string | (...data: any[]) => string
}

While a Template type is:

type Template = (this: Inter, message: string, ...data: any[]) => string

inter.formatMessage({ path, defaultMessage }, [data])

Format a message from given path in messages for current locale:

inter.formatMessage({ path: 'app.hello' }, { name: 'egoist' })
 
// Or fallback to `defaultMessage` when message was not found
// at given path
inter.formatMessage({ 
  path: 'not.exists.path',
  defaultMessage: 'Hello {name}'
}, { name: 'egoist' })

inter.setCurrentLocale(locale)

Set current locale, e.g.:

inter.setCurrentLocale('fr')

inter.currentLocale

Return current locale, e.g.:

inter.currentLocale
//=> 'fr'

inter.setLocaleData(locale, localeData)

Set localeData for a locale, e.g.:

inter.setLocaleData('es', espanaLocaleData)

inter.availableLocales

Return a list of available locales, e.g.:

inter.availableLocales
//=> ['fr', 'es']

Component injection

$inter

The Inter instance.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

vue-inter © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).

egoist.moe · GitHub @EGOIST · Twitter @_egoistlily