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

First, we find message from

messages

path

defaultMessage

Plural support

You can use intl-messageformat instead of our default

template

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)
  }
})

Components

Props

path

Type:

string

true

Find locale message at given path, or fallback to

defaultMessage

defaultMessage

Type:

string

data

Type:

object

tag

Type:

string

object

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

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

While a

Template

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

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

Format a message from given path in

messages

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