Wondering what’s next for npm?Check out our public roadmap! »

vue-translate-plugin

1.3.1 • Public • Published

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

Install

npm i vue-translate-plugin

DownloadsWeekly Downloads

3,819

Version

1.3.1

License

MIT

Unpacked Size

35.5 kB

Total Files

15

Last publish

Collaborators

  • avatar