@amjs/vue-utils
v0.1.1
Published
Collection of plugins and utils for any VueJS project
Downloads
5
Readme
@amjs/vue-utils
Collection of plugins and utils for any VueJS project.
Installation
$ npm i --save @amjs/vue-utils
$ npm i --save vue
i18n
Define a collection of texts:
// i18n/en_GB.js
export default {
labels : {
hello : 'Hello',
welcome : 'Hello {{name}}',
children : [ 'child', 'children' ]
}
}
// i18n/es_ES.js
export default {
labels : {
hello : 'Hola',
welcome : 'Hola {{name}}',
children : [ 'niño', 'niños' ]
}
}
Use plugin to use the default collection:
import english from 'i18n/es_GB';
import { i18nPlugin } from '@amjs/vue-utils';
import Vue from 'vue';
const locale = 'en_GB';
Vue.use(i18nPlugin, { locale, english });
Add new collections:
import spanish from 'i18n/es_ES';
Vue.prototype.$_i18n.add('es_ES', spanish);
Use specific collection:
Vue.prototype.$_i18n.use('en_GB');
Configure and use specific collection:
import italian from 'i18n/it_IT';
Vue.prototype.$_i18n.config('it_IT', italian);
Using keys:
Use global keys $_tr
and $_trn
to obtain collection-in-use text values.
// Hello.vue
<template>
<h1>{{$_tr('labels.hello'}}</h1>
<p>{{$_tr('labels.welcome', { user : 'Foo' })}}</p>
<p>
In {{$_i18n.current}} child is "{{$_trn('labels.child', 0)}}".<br/>
but children is "{{$_trn('labels.child', 1)}}".
</p>
</template>
For example, is current collection-in-use is es_ES
, above template will render as:
<h1>Hola</h1>
<p>Hola Foo!</p>
<p>
In es_ES child is "niño".<br/>
but children is "niños".
</p>