Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/javisperez/vuetranslate
VueJS plugin for translations
https://github.com/javisperez/vuetranslate
language locales multilingual translation vue-translate vuejs
Last synced: 4 days ago
JSON representation
VueJS plugin for translations
- Host: GitHub
- URL: https://github.com/javisperez/vuetranslate
- Owner: javisperez
- License: mit
- Created: 2016-08-23T16:14:25.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T02:28:27.000Z (almost 2 years ago)
- Last Synced: 2024-10-14T01:35:58.726Z (28 days ago)
- Topics: language, locales, multilingual, translation, vue-translate, vuejs
- Language: JavaScript
- Size: 142 KB
- Stars: 82
- Watchers: 4
- Forks: 18
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## VueTranslate
A VueJS (1.x, 2.0+) plugin for basic translations.
### What is this?
Is a plugin to handle basic translations for your components, it adds a mixin and a directive to handle it the most comfortable way.
### Like Vue-i18n?
Yes and no, Vue-i18n is a great plugin and is a lot more complete than this. This handle translations too, but is a more basic idea and smaller file (is just *one* file!).
### What to expect?
Just translations, it is that simple.
## Example
```js
import Vue from 'vue';
import VueTranslate from 'vue-translate-plugin';
Vue.use(VueTranslate);
var myComp = Vue.extend({
template: `
{{ t('Hello World') }}
How are you?
`,
mounted() {
// Define what language you want to use.
// This can be called in something like a header with a language selector menu
// Or any other case, doesn't need to be called in all components, but
// at least in one, so it sets the global language of the plugin
this.$translate.setLang('es_DO');
},
// The translations itself, keyed by language or anything else you one
locales: {
es_DO: {
'Hello World': 'Hola Mundo',
'How are you?': 'Como estás?'
}
}
});
var vm = new Vue({
el: '#app',
components: {myComp},
template: `
`
});
```
## Usage
### Loading translations
You can do this in three different ways:
- A `locales` option in your component:
```js
Vue.component({
...
locales: {
spanish: {
'hello world': 'hola mundo'
}
},
...
})
```
- Inside a component's method:
```js
Vue.component({
methods: {
loadMysuperTranslation() {
this.$translate.setLocales({
spanish: {
'hello world': 'hola mundo'
}
});
}
}
});
```
- Globally when loading the plugin:
```js
Vue.use(VueTranslate);
Vue.locales({
spanish: {
'hello world': 'hola mundo'
}
});
```
### Changing the language to use
Use the `setLang` method of the `$translate` property, like this:
```js
Vue.component({
methods: {
showAppInSpanish() {
this.$translate.setLang('spanish');
}
}
});
```
### Events
You can listen to custom events emitted by the `$translate` property:
```js
this.$translate.$on('language:changed', language => {
console.log('The user choose '+language);
})
```
### Parameters
You can use the method `textWithParams` if you would like to insert parameters in your translation strings.
```js
this.$translate.textWithParams('translation.string', {
keyA: 'Glenn',
keyB: 'John'
})
{{ tWithParams('translation.string', { keyA: 'Glenn', keyB: 'John' }) }}
// In locales.js
'translation.string': 'My name is %keyA%. My brother is named %keyB%.'
// Result
'My name is Glenn. My brother is named John.'
```
##### language:init
When the first language is set.
##### language:changed
When the language to use was changed from the previous value.
##### language:modified
Everytime a language is changed, either is the first time or not.
##### locales:loaded
When locales are loaded either by any of the 3 options