nuxt example implementation

[AbbasHasani]

hi
trying to add vuex-i18n to my nuxt project no luck so far .
i'm getting this error message,

Cannot set property $i18n of [object Object] which has only a getter

my code so far :

import Vue from 'vue'
import Vuex from 'vuex'
// load and register the vuex i18n module
import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js'

const doDebug = process.env.NODE_ENV !== 'production'

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

Vue.use(
  vuexI18n.plugin,
  store,
  {
    onTranslationNotFound: function (locale, key) {
      console.warn(`vuex-i18n :: Key '${key}' not found for locale '${locale}'`)
    }
  })

  import { english } from '~/static/i18n/en.json'
  import { farsi } from '~/static/i18n/fa.json'
  
  Vue.i18n.add('en', english);
  Vue.i18n.add('fa', farsi);
  
Vue.i18n.set('fa')
Vue.i18n.fallback('fa')

export default store

[tikiatua]

Hi @AbbasHasani

Thank you for reporting this issue. The plugin is adding the property $i18n to the Vue prototype, to make the translations accessible in all components. It seems to me, that your issue might be related to one of the following:

ankurk91/vue-loading-overlay#6
vuejs/vuex#255
vuejs/vuex#255

Please check if you are using the latest versions of vue, vuex, nuxt and vuexI18n and also check if "use strict" for your code is set in your code.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only

[tikiatua]

And please make sure, that you add your exported store to the main vue instance of your application

new Vue({
  el: '#app',
  render: h => h(App),
  router,
  store
})