Using kazupon/vue-i18n inside a state of Vuex
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
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?
vue.js translation vuejs2 vuex
add a comment |
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?
vue.js translation vuejs2 vuex
add a comment |
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?
vue.js translation vuejs2 vuex
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?
vue.js translation vuejs2 vuex
vue.js translation vuejs2 vuex
asked Jan 9 '17 at 21:33
Gustavo BissolliGustavo Bissolli
71311028
71311028
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Take a look at vuex-i18n library, it does what you are trying to do out of the box.
add a comment |
1- main.js
import Vue from 'vue';
import Vuex from 'vuex';
import App from './App';
import { store } from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
2- App.vue: here I used buttons to change languages:
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<div>
<h1>{{ "index.title" | translate }}</h1>
<p>{{ $t("index.content", {"type": "nice"}) }}</p>
</div>
<div>
<h1>{{ "home.title" | translate }}</h1>
<p>{{ $t("home.content", {"type": "nice"}) }}</p>
</div>
<div>
<h1>{{ "product.title" | translate }}</h1>
<p>{{ $t("product.content", {"type": "nice"}) }}</p>
<p>{{ $t("product.unit", {"type": "nice"}) }}</p>
</div>
<button @click="setLang('fa')">پارسی</button>
<button @click="setLang('en')">English</button>
<button @click="setLang('ar')">العربیه</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
posts: ,
errors:
}
},
methods:{
setLang(lang){
this.$store.dispatch('changeCulture', lang)
}
},
created () {
this.$store.dispatch('changeCulture', 'en')
}
}
</script>
3-store > index.js: here I tried to use sore, mutation and actions to change local:
import Vue from 'vue';
import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import translationsEn from '../locals/en.json';
import translationsFa from '../locals/fa.json';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
fallback:'en',
locale:''
},
mutations: {
setCulture(state, payload){
state.locale = payload
Vue.i18n.set(state.locale);
}
},
actions: {
changeCulture ({commit}, payload, adad) {
commit('setCulture',payload)
}
},
getters: {
language (state) {
return state.locale
}
}
})
Vue.use(vuexI18n.plugin, store);
Vue.use(vuexI18n.plugin, store);
Vue.i18n.add('en', translationsEn);
Vue.i18n.add('fa', translationsFa);
Vue.i18n.set('fa')
4- en.json / fa.json : some may ask for it:
{
"index":{
"title": "Hello ",
"content": "This is some {type} content"
},
"home":{
"title": "About us",
"content": "Node developing team"
},
"product":{
"title": "Produc",
"content": "Select one product",
"unit":"unit"
}
}
... 4- fa.json is :
{
"index":{
"title": "سلام ",
"content": "به دنیای کد خوش آمدید"
},
"home":{
"title": "درباره ما",
"content": "تیم برنامه نویسی نود"
},
"product":{
"title": "محصولات",
"content": "یک محصول را انتخاب کنید",
"unit":"واحد شمارش"
}
}
And it works like a charm.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41557351%2fusing-kazupon-vue-i18n-inside-a-state-of-vuex%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Take a look at vuex-i18n library, it does what you are trying to do out of the box.
add a comment |
Take a look at vuex-i18n library, it does what you are trying to do out of the box.
add a comment |
Take a look at vuex-i18n library, it does what you are trying to do out of the box.
Take a look at vuex-i18n library, it does what you are trying to do out of the box.
answered May 3 '17 at 12:55
Nicolas Del ValleNicolas Del Valle
588614
588614
add a comment |
add a comment |
1- main.js
import Vue from 'vue';
import Vuex from 'vuex';
import App from './App';
import { store } from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
2- App.vue: here I used buttons to change languages:
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<div>
<h1>{{ "index.title" | translate }}</h1>
<p>{{ $t("index.content", {"type": "nice"}) }}</p>
</div>
<div>
<h1>{{ "home.title" | translate }}</h1>
<p>{{ $t("home.content", {"type": "nice"}) }}</p>
</div>
<div>
<h1>{{ "product.title" | translate }}</h1>
<p>{{ $t("product.content", {"type": "nice"}) }}</p>
<p>{{ $t("product.unit", {"type": "nice"}) }}</p>
</div>
<button @click="setLang('fa')">پارسی</button>
<button @click="setLang('en')">English</button>
<button @click="setLang('ar')">العربیه</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
posts: ,
errors:
}
},
methods:{
setLang(lang){
this.$store.dispatch('changeCulture', lang)
}
},
created () {
this.$store.dispatch('changeCulture', 'en')
}
}
</script>
3-store > index.js: here I tried to use sore, mutation and actions to change local:
import Vue from 'vue';
import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import translationsEn from '../locals/en.json';
import translationsFa from '../locals/fa.json';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
fallback:'en',
locale:''
},
mutations: {
setCulture(state, payload){
state.locale = payload
Vue.i18n.set(state.locale);
}
},
actions: {
changeCulture ({commit}, payload, adad) {
commit('setCulture',payload)
}
},
getters: {
language (state) {
return state.locale
}
}
})
Vue.use(vuexI18n.plugin, store);
Vue.use(vuexI18n.plugin, store);
Vue.i18n.add('en', translationsEn);
Vue.i18n.add('fa', translationsFa);
Vue.i18n.set('fa')
4- en.json / fa.json : some may ask for it:
{
"index":{
"title": "Hello ",
"content": "This is some {type} content"
},
"home":{
"title": "About us",
"content": "Node developing team"
},
"product":{
"title": "Produc",
"content": "Select one product",
"unit":"unit"
}
}
... 4- fa.json is :
{
"index":{
"title": "سلام ",
"content": "به دنیای کد خوش آمدید"
},
"home":{
"title": "درباره ما",
"content": "تیم برنامه نویسی نود"
},
"product":{
"title": "محصولات",
"content": "یک محصول را انتخاب کنید",
"unit":"واحد شمارش"
}
}
And it works like a charm.
add a comment |
1- main.js
import Vue from 'vue';
import Vuex from 'vuex';
import App from './App';
import { store } from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
2- App.vue: here I used buttons to change languages:
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<div>
<h1>{{ "index.title" | translate }}</h1>
<p>{{ $t("index.content", {"type": "nice"}) }}</p>
</div>
<div>
<h1>{{ "home.title" | translate }}</h1>
<p>{{ $t("home.content", {"type": "nice"}) }}</p>
</div>
<div>
<h1>{{ "product.title" | translate }}</h1>
<p>{{ $t("product.content", {"type": "nice"}) }}</p>
<p>{{ $t("product.unit", {"type": "nice"}) }}</p>
</div>
<button @click="setLang('fa')">پارسی</button>
<button @click="setLang('en')">English</button>
<button @click="setLang('ar')">العربیه</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
posts: ,
errors:
}
},
methods:{
setLang(lang){
this.$store.dispatch('changeCulture', lang)
}
},
created () {
this.$store.dispatch('changeCulture', 'en')
}
}
</script>
3-store > index.js: here I tried to use sore, mutation and actions to change local:
import Vue from 'vue';
import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import translationsEn from '../locals/en.json';
import translationsFa from '../locals/fa.json';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
fallback:'en',
locale:''
},
mutations: {
setCulture(state, payload){
state.locale = payload
Vue.i18n.set(state.locale);
}
},
actions: {
changeCulture ({commit}, payload, adad) {
commit('setCulture',payload)
}
},
getters: {
language (state) {
return state.locale
}
}
})
Vue.use(vuexI18n.plugin, store);
Vue.use(vuexI18n.plugin, store);
Vue.i18n.add('en', translationsEn);
Vue.i18n.add('fa', translationsFa);
Vue.i18n.set('fa')
4- en.json / fa.json : some may ask for it:
{
"index":{
"title": "Hello ",
"content": "This is some {type} content"
},
"home":{
"title": "About us",
"content": "Node developing team"
},
"product":{
"title": "Produc",
"content": "Select one product",
"unit":"unit"
}
}
... 4- fa.json is :
{
"index":{
"title": "سلام ",
"content": "به دنیای کد خوش آمدید"
},
"home":{
"title": "درباره ما",
"content": "تیم برنامه نویسی نود"
},
"product":{
"title": "محصولات",
"content": "یک محصول را انتخاب کنید",
"unit":"واحد شمارش"
}
}
And it works like a charm.
add a comment |
1- main.js
import Vue from 'vue';
import Vuex from 'vuex';
import App from './App';
import { store } from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
2- App.vue: here I used buttons to change languages:
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<div>
<h1>{{ "index.title" | translate }}</h1>
<p>{{ $t("index.content", {"type": "nice"}) }}</p>
</div>
<div>
<h1>{{ "home.title" | translate }}</h1>
<p>{{ $t("home.content", {"type": "nice"}) }}</p>
</div>
<div>
<h1>{{ "product.title" | translate }}</h1>
<p>{{ $t("product.content", {"type": "nice"}) }}</p>
<p>{{ $t("product.unit", {"type": "nice"}) }}</p>
</div>
<button @click="setLang('fa')">پارسی</button>
<button @click="setLang('en')">English</button>
<button @click="setLang('ar')">العربیه</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
posts: ,
errors:
}
},
methods:{
setLang(lang){
this.$store.dispatch('changeCulture', lang)
}
},
created () {
this.$store.dispatch('changeCulture', 'en')
}
}
</script>
3-store > index.js: here I tried to use sore, mutation and actions to change local:
import Vue from 'vue';
import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import translationsEn from '../locals/en.json';
import translationsFa from '../locals/fa.json';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
fallback:'en',
locale:''
},
mutations: {
setCulture(state, payload){
state.locale = payload
Vue.i18n.set(state.locale);
}
},
actions: {
changeCulture ({commit}, payload, adad) {
commit('setCulture',payload)
}
},
getters: {
language (state) {
return state.locale
}
}
})
Vue.use(vuexI18n.plugin, store);
Vue.use(vuexI18n.plugin, store);
Vue.i18n.add('en', translationsEn);
Vue.i18n.add('fa', translationsFa);
Vue.i18n.set('fa')
4- en.json / fa.json : some may ask for it:
{
"index":{
"title": "Hello ",
"content": "This is some {type} content"
},
"home":{
"title": "About us",
"content": "Node developing team"
},
"product":{
"title": "Produc",
"content": "Select one product",
"unit":"unit"
}
}
... 4- fa.json is :
{
"index":{
"title": "سلام ",
"content": "به دنیای کد خوش آمدید"
},
"home":{
"title": "درباره ما",
"content": "تیم برنامه نویسی نود"
},
"product":{
"title": "محصولات",
"content": "یک محصول را انتخاب کنید",
"unit":"واحد شمارش"
}
}
And it works like a charm.
1- main.js
import Vue from 'vue';
import Vuex from 'vuex';
import App from './App';
import { store } from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
2- App.vue: here I used buttons to change languages:
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<div>
<h1>{{ "index.title" | translate }}</h1>
<p>{{ $t("index.content", {"type": "nice"}) }}</p>
</div>
<div>
<h1>{{ "home.title" | translate }}</h1>
<p>{{ $t("home.content", {"type": "nice"}) }}</p>
</div>
<div>
<h1>{{ "product.title" | translate }}</h1>
<p>{{ $t("product.content", {"type": "nice"}) }}</p>
<p>{{ $t("product.unit", {"type": "nice"}) }}</p>
</div>
<button @click="setLang('fa')">پارسی</button>
<button @click="setLang('en')">English</button>
<button @click="setLang('ar')">العربیه</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
posts: ,
errors:
}
},
methods:{
setLang(lang){
this.$store.dispatch('changeCulture', lang)
}
},
created () {
this.$store.dispatch('changeCulture', 'en')
}
}
</script>
3-store > index.js: here I tried to use sore, mutation and actions to change local:
import Vue from 'vue';
import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import translationsEn from '../locals/en.json';
import translationsFa from '../locals/fa.json';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
fallback:'en',
locale:''
},
mutations: {
setCulture(state, payload){
state.locale = payload
Vue.i18n.set(state.locale);
}
},
actions: {
changeCulture ({commit}, payload, adad) {
commit('setCulture',payload)
}
},
getters: {
language (state) {
return state.locale
}
}
})
Vue.use(vuexI18n.plugin, store);
Vue.use(vuexI18n.plugin, store);
Vue.i18n.add('en', translationsEn);
Vue.i18n.add('fa', translationsFa);
Vue.i18n.set('fa')
4- en.json / fa.json : some may ask for it:
{
"index":{
"title": "Hello ",
"content": "This is some {type} content"
},
"home":{
"title": "About us",
"content": "Node developing team"
},
"product":{
"title": "Produc",
"content": "Select one product",
"unit":"unit"
}
}
... 4- fa.json is :
{
"index":{
"title": "سلام ",
"content": "به دنیای کد خوش آمدید"
},
"home":{
"title": "درباره ما",
"content": "تیم برنامه نویسی نود"
},
"product":{
"title": "محصولات",
"content": "یک محصول را انتخاب کنید",
"unit":"واحد شمارش"
}
}
And it works like a charm.
answered Mar 14 '18 at 7:21
Ahmad EbrahimiAhmad Ebrahimi
4010
4010
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41557351%2fusing-kazupon-vue-i18n-inside-a-state-of-vuex%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown