Simple yet powerful 1kB i18n library for Vue.js
yarn add vue-inter
CDN: UNPKG | jsDevlir (available as
window.VueInter)
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
messagesat given
path, then we fallback to
defaultMessageif not found.
You can use intl-messageformat instead of our default
templateoption 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) } })
Type:
string
true
Find locale message at given path, or fallback to
defaultMessagebelow.
Type:
string
Type:
object
Type:
string
object
span
An HTML tag or Vue component.
const inter = new Inter({ // Current locale locale: 'en',// Messages for each locale messages: { en: LocaleMessages, zh: LocaleMessages },
// Message templating template: Template })
A
LocaleMessagestype is:
interface LocaleMessages { /** The value is a string or a function that returns a string */ [path: string]: string | (...data: any[]) => string }
While a
Templatetype is:
type Template = (this: Inter, message: string, ...data: any[]) => string
Format a message from given path in
messagesfor 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' } )
Set current locale, e.g.:
inter.setCurrentLocale('fr')
Return current locale, e.g.:
inter.currentLocale //=> 'fr'
Set localeData for a locale, e.g.:
inter.setLocaleData('es', espanaLocaleData)
Return a list of available locales, e.g.:
inter.availableLocales //=> ['fr', 'es']
The Inter instance.
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
vue-inter © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).
egoist.moe · GitHub @EGOIST · Twitter @_egoistlily