Adding translations directly to store about vuex-i18n HOT 6 CLOSED

Aha. Now I understand. I will look into this.

from vuex-i18n.

Hi @OmgImAlexis,

I finally got around to look into this issue.

We actually apply some transformations to the locale data to flatten the information. This is done in the function flattenTranslations in vuex-i18n-store.js. We could export this function from the package to let you flatten the translation data on your own and then just set it on the store directly.

from vuex-i18n.

Hi @OmgImAlexis,

This is somewhat possible. However you need to tell the es6 module system what the default export from your json translation file should be (and change the filename to js).

// in english.js
const localizations = {
  "message": "your message"
};

export default localizations;

Maybe there is another method to directly import the json as object, but I need to look into that somewhat further. The methhod above is how we use the plugin.

from vuex-i18n.

Ah I was less meaning that side of it and more towards being able to this everything up in that file and then just have a single thing to export as I'd like to have just Vue.use(vuexI18n.plugin, i18nstore); in my main.js file with i18nstore being the file from the top post.

from vuex-i18n.

@tikiatua was this closed because it was added or for another reason?

from vuex-i18n.

Hi @OmgImAlexis,

I closed the issue because – as it seems to me – handling the locale data this way would encourage a somewhat not so good practice of including all the different locale translations directly up front instead of loading only the necessary locale data.

Basically the vuexi18n-plugin will only create a vuex-module to handle the locale data (see screenshot below). So you should be able to add the translation by just initializing the plugin in your store file.

import Vue from 'vue';
import Vuex from 'vuex';

import english from './translations/english.json';
import german from './translations/german.json';
import french from './translations/french.json';

const debug = process.env.NODE_ENV !== 'production';

const store = new Vuex.Store({
    strict: debug
});

// load and register the vuex i18n module
import vuexI18n from 'vuex-i18n';
Vue.use(vuexI18n.plugin, store);

// register the locales
Vue.i18n.add('en', english);
Vue.i18n.add('ge', german);
Vue.i18n.add('fr', french);

// Set the start locale to use
Vue.i18n.set('en');

export default store;

An even better option – in my opinion – would be to return a closure from the store file that you could use to initialize the store. You could pass the Vue object directly to this function and would thus be able to keep the Vue import out of your store entirely.

import Vuex from 'vuex';

import english from './translations/english.json';
import german from './translations/german.json';
import french from './translations/french.json';

const debug = process.env.NODE_ENV !== 'production';

const store = new Vuex.Store({
    strict: debug
});

// init method to be called from the main script
const initStore = function(Vue) {
    Vue.i18n.add('en', english);
    Vue.i18n.add('ge', german);
    Vue.i18n.add('fr', french);

   // Set the start locale to use
   Vue.i18n.set('en');
}

export default initStore;

// --- in main.js ----

// load and register the vuex i18n module
import Vue from 'vue';
import vuexI18n from 'vuex-i18n';
Vue.use(vuexI18n.plugin, store);

import initStore from './store';
const store = initStore(Vue);

var app = new Vue({
    store,
    ...
})

It would also be possible to directly set the locale data in the i18n vuex object in the store (see screenshot below). But you need to apply the flattenTranslations function to your locale data first, to prepare the structure for use by the plugin – the function is currently not exported, but you could find it in the file vuex-i18n-store.js on line 104 (to do a first test).

Please let me know, if any of those approaches work for you.

from vuex-i18n.