Simple translation mixin for Vue.js
JavaScript
Latest commit ddc730e Apr 8, 2015 @rayfranco Rename plugin
Permalink
Failed to load latest commit information.
.gitignore Init Apr 8, 2015
LICENSE Init Apr 8, 2015
README.md Rename plugin Apr 8, 2015
index.js Init Apr 8, 2015
package.json Rename plugin Apr 8, 2015

README.md

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>