https://github.com/wolfchamane/amjs-vue-utils
Collection of plugins and utils for any VueJS project
https://github.com/wolfchamane/amjs-vue-utils
Last synced: about 1 year ago
JSON representation
Collection of plugins and utils for any VueJS project
- Host: GitHub
- URL: https://github.com/wolfchamane/amjs-vue-utils
- Owner: Wolfchamane
- License: mit
- Created: 2021-08-14T17:09:19.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-09-25T16:56:29.000Z (over 4 years ago)
- Last Synced: 2025-01-22T17:14:35.530Z (over 1 year ago)
- Language: JavaScript
- Size: 582 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @amjs/vue-utils
Collection of plugins and utils for any VueJS project.
## Installation
```bash
$ npm i --save @amjs/vue-utils
$ npm i --save vue
```
## i18n
Define a collection of texts:
```javascript
// i18n/en_GB.js
export default {
labels : {
hello : 'Hello',
welcome : 'Hello {{name}}',
children : [ 'child', 'children' ]
}
}
```
```javascript
// i18n/es_ES.js
export default {
labels : {
hello : 'Hola',
welcome : 'Hola {{name}}',
children : [ 'niño', 'niños' ]
}
}
```
Use plugin to use the default collection:
```javascript
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:
```javascript
import spanish from 'i18n/es_ES';
Vue.prototype.$_i18n.add('es_ES', spanish);
```
### Use specific collection:
```javascript
Vue.prototype.$_i18n.use('en_GB');
```
### Configure and use specific collection:
```javascript
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.
```vue
// Hello.vue
{{$_tr('labels.hello'}}
{{$_tr('labels.welcome', { user : 'Foo' })}}
In {{$_i18n.current}} child is "{{$_trn('labels.child', 0)}}".
but children is "{{$_trn('labels.child', 1)}}".
```
For example, is current collection-in-use is `es_ES`, above template will render as:
```html
Hola
Hola Foo!
In es_ES child is "niño".
but children is "niños".
```