Simple yet powerful 1kB i18n library for Vue.js
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.editorconfig
.gitattributes
.gitignore
LICENSE
README.md
circle.yml
package.json
yarn.lock

README.md

vue-inter

NPM version NPM downloads CircleCI codecov donate chat

Edit vue-inter example

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) {
    if (!data) return message
    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