Using https://github.com/kazupon/vue-i18n for localization
Vue.t() || $t() || trans() receive a string which is a key to be translated by vue-i18n
Hey guys! I'am trying the following code:
import Vue from 'vue'
export default {
task: {
status: [
{ id: 'pending', name: Vue.t('pending') },
{ id: 'done', name: 'Done' }
]
}
}
That is my state.js which is the state of my VUEX! When I try to use the Vue.t function I have the following error:
Uncaught TypeError: _vue2.default.t is not a function
My solution (which I don't think it's the best one also good for performance)
Let my state.js like that: import Vue from 'vue'
export default {
task: {
status: [
{ id: 'pending', name: 'pending' },
{ id: 'done', name: 'done' }
]
}
}
And I've done the following getters (vuex getter)
import { map } from 'lodash'
import { trans } from 'utils/helpers/translation' // helper for Vue.t(string)
export const getTaskStatus = ({ task }) => map(task.status, (obj) => {
return { id: obj.id, name: trans(obj.name) }
})
Anyone knows how is the best way to make it work?
1- main.js
2- App.vue: here I used buttons to change languages:
3-store > index.js: here I tried to use sore, mutation and actions to change local:
4- en.json / fa.json : some may ask for it:
... 4- fa.json is :
And it works like a charm.
Take a look at vuex-i18n library, it does what you are trying to do out of the box.