0

Having a main.js -> App.vue -> router/index.js -> Index.vue

In Index.vue I am trying to run vue-i18n (7.8.0) where the data would be provided by VueX store as:

// ...
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

export default {
   name: 'index',
    // ...
    computed: {
    ...mapGetters({
      language: 'getLanguage',
      translations: 'getTranslations'
    }),
  },
  i18n: new VueI18n({
    locale: language,
    messages: translations,
  }),
  // ...
}

In store.js, the update of setLanguage and setTranslations is working fine, however i18n parameters at initialisation are not reactive. While defining with fixed values in newVueI18n the translations are working fine. I am sure that the mistake is on my side but did not find any different implementation approach. Could please anyone clarify and suggest a correct approach? (if possible I would like to stay at the coding implementation as it is now)

Excuse me if I am exaggerating but while implementing the i18n component I was wondering how to access the main Vue Instance from the component (Index.vue) and how to trigger a setter on the i18n module for it's constructor parameters? Thank you!

Francis
  • 475
  • 1
  • 6
  • 17
  • Try adding the i18n as options to the root Vue instance constructor in your main.js where you mount the Vue instance to an element in your page. – Prashant Jun 16 '18 at 07:39

1 Answers1

0

I was able to implement the translation feature with: vuex-i18n (works like a charm).

Francis
  • 475
  • 1
  • 6
  • 17