vue-inter

by egoist

egoist / vue-inter

Simple yet powerful 1kB i18n library for Vue.js

197 Stars 11 Forks Last release: over 2 years ago (v3.0.0) MIT License 50 Commits 12 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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
:

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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.