Skip to content
Simple yet powerful 1kB i18n library for Vue.js
JavaScript
Branch: master
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 introduce FormatMessage component Mar 15, 2018
src add coverage report Mar 16, 2018
.editorconfig init Nov 18, 2017
.gitattributes
.gitignore add coverage report Mar 16, 2018
LICENSE init Nov 18, 2017
README.md add coverage report Mar 16, 2018
circle.yml update circle config Mar 16, 2018
package.json add coverage report Mar 16, 2018
yarn.lock add coverage report Mar 16, 2018

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

You can’t perform that action at this time.