https://github.com/javisperez/vuetranslate
VueJS plugin for translations
https://github.com/javisperez/vuetranslate
language locales multilingual translation vue-translate vuejs
Last synced: 3 months 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 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T02:28:27.000Z (almost 3 years ago)
- Last Synced: 2024-12-06T18:11:56.934Z (11 months 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
- awesome-vue - vue-translate-plugin - VueJS plugin for translations. (Components & Libraries / Utilities)
- awesome-vue-refactor - vue-translate ★11
- awesome-vue-zh - Vue - 翻译 - 插件 - 用于翻译的VueJS插件. (公用事业 / 国际化)
- awesome-vue - vue-translate-plugin ★66 - VueJS plugin for translations. (Utilities / i18n)
- awesome-vue - vue-translate-plugin - VueJS plugin for translations (Utilities [🔝](#readme))
- awesome-vuejs - vue-translate ★1
- awesome-vue - vue-translate-plugin - VueJS plugin for translations. (Utilities / i18n)
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