vue-i18n-mixin

Simple internationalisation mixin for Vue.js

Installation

npm install --save vue-i18n-mixin

Usage

In the Vue Model

var root = new Vue({
    mixins: [
        require('vue-i18n-mixin')
    ],
 
    data: {
        locale: 'en'
    },
 
    translations: {
        header: {
            title: {
                en: 'Hello',
                fr: 'Bonjour'
            }
        }
    },
 
    created: function() {
        // If you need to dynamically create the translations
        this.$options.translations = {
            // ...
        };
    },
 
    ready: function() {
        var title;
 
        // You can translate in the VM
        title = this.translate('header.title'); // Will return 'Hello'
 
        // You can force a locale
        title = this.translate('header.title', 'fr'); // Will return 'Bonjour'
 
        // You can use the shorthand
        title = this.t('header.title')
    }
});

In a view

<h1 v-text="translate('header.title')"></h1>
 
<h1 v-text="t('header.title')"></h1>
 
<h1 v-text="t('header.title', 'fr')"></h1>
 
<h1>{{ t('header.title') }}</h1>