javisperez / Vuetranslate

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

import Vue from 'vue';
import VueTranslate from 'vue-translate-plugin';

Vue.use(VueTranslate);

var myComp = Vue.extend({
	template: `<div>
	        {{ t('Hello World') }}
	        <span v-translate>How are you?</span>
	    </div>`,

    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: `<div>
	    <my-comp></my-comp>
	</div>`
});

Usage

Loading translations

You can do this in three different ways:

• A locales option in your component:

Vue.component({
	...
	locales: {
		spanish: {
			'hello world': 'hola mundo'
		}
	},
	...
})

• Inside a component's method:

Vue.component({
	methods: {
		loadMysuperTranslation() {
			this.$translate.setLocales({
				spanish: {
					'hello world': 'hola mundo'
				}
			});
		}
	}
});

• Globally when loading the plugin:

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:

Vue.component({
	methods: {
		showAppInSpanish() {
			this.$translate.setLang('spanish');
		}
	}
});

Events

You can listen to custom events emitted by the $translate property:

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.

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