vuex-i18n-remote

This is a small package that can be used to load translations from a remote server.

This is best used with grouped short key based translations (ei. home.welcome -> 'This is a welcome message.'), so that you can load groups of translations at a time.

Requirements

• vuex-i18n ^1.13.0
• vue-axios ^2.1.0

Usage

import Vue from 'vue';
import Vuex from 'vuex';
import Axios from 'axios';
import VuexI18nRemote from "vuex-i18n-remote"; // file from vuex-i18n-remote plugin

// ...setup Axios default config

// use Vuex
Vue.use(Vuex);

// setup store
const store = new Vuex.Store({
    // ...config options
});

// setup vuex-i18n-remote
Vue.use(VuexI18nRemote, {
    url: 'translations', // translations uri
    axios: Axios, // axios object
    store: store, // store instance
    storeModuleName: 'i18n', // store module name
    commonKeys: [ // common keys
        'common',
    ],
});

const app = new Vue({
    el: '#app',
    store,
});

Once the library is installed, vuex-i18n will also be installed.

Options

| Key | Description | Default | | --------------------- | --------------------------------------------------------------------------------------------------------- | --------------------------- | | url | This is the URL where the translations will be fetched from. | translations | | store | This is the Vuex store to be used to store the translations. | new Vuex.Store({}) | | storeModuleName | This is the store module name used to store the translations | i18n | | axios | The Axios instance used for the http requests | Axios | | commonKeys | This is an array of common keys that should be loaded by default if no option is specified by the method. | [] | | onTranslationNotFound | Callback used if translation is not found | function (locale, key) {} |

Methods

Once loaded the plugin will add the following methods to Vue.

Global

Options

| Key | Description | Default | | --------- | --------------------------------- | --------------------------------- | | key | The key to get from the server | commonKeys set above | | locale | The locale to be used | locale from Vue.i18n.locale() |

Usage

Vue.i18nRemote.load(key, locale);

Instance

Options

| Key | Description | Default | | --------- | --------------------------------- | --------------------------------- | | key | The key to get from the server | commonKeys set above | | locale | The locale to be used | locale from Vue.i18n.locale() |

Usage

this.$i18nRemote.load(key, locale);