3

I am using Vue, and I want to show three languages. English, Tagalog and Cebuano.

Now I have the error

Cannot translate the value of keypath 'NavbarMobile.home'. Use the value of keypath as default.

I checked if the plugin is working by console.log(this.$i18n.locale). And the result was "en". "en" is my default language, English.

Is this issue is coming from my configuration?

NavbarMobile.js

 <b-list-group-item :to="{name:'Home'}"  active class="flex-column align-items-start home-item">
                                <div class="d-flex w-100 justify-content-between">
                                    <!-- Home -->
                                    {{ $t('NavbarMobile.home') }}
                                </div>
                            </b-list-group-item>

main.js

import Vue from 'vue'
import i18n from './lang/lang';
import App from './App.vue'
import router from './router'
import store from './store'

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

lang.js

import Vue from 'vue'
import english from './en.js'
import tagalog from './tg.js'
import cebuano from './ce.js'
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  lazy:true,
  locale: "en",
  "en" : english,
  "tg" : tagalog,
  "ce" : cebuano,
  //silentTranslationWarn: process.env.NODE_ENV === 'development'
});

export default {
    i18n
}

en.js

const english = {
"en": {
"NavbarMobile": {
            "home": "Home",
            "pro": "Pro version",
            "contact": "Contact",
            "help": "Help",
            "profile": "Profile",
            "login": "Login",
            "logout": "Logout",
            "terms and conditions": "Terms and conditions",
            "follow us": "Follow us"
        },
}
}
export default {
    english
}

I have the same format js files for Tagalog and Cebuano languages.

How can I fix this issue?

Yohei Umezu
  • 421
  • 1
  • 6
  • 30

1 Answers1

7
  1. You are using VueI18n incorrectly, translations need to be passed into messages property
  2. Object passed into messages property need to have locale codes at 1st level only, now you have it twice (in constructor and in en.js)
const i18n = new VueI18n({
  lazy:true,
  locale: "en",
  messages: {
    "en" : english,
    "tg" : tagalog,
    "ce" : cebuano,
  },
  //silentTranslationWarn: process.env.NODE_ENV === 'development'
});

en.js

export default {
  "NavbarMobile": {
            "home": "Home",
            "pro": "Pro version",
            "contact": "Contact",
            "help": "Help",
            "profile": "Profile",
            "login": "Login",
            "logout": "Logout",
            "terms and conditions": "Terms and conditions",
            "follow us": "Follow us"
        },
}
Michal Levý
  • 33,064
  • 4
  • 68
  • 86
  • Sorry, but the issue is not solved. I think const english = {} export default { english } has to be used. – Yohei Umezu Mar 05 '21 at 10:47
  • Your usage of `export` is wrong. By doing `export default { i18n }`, you are exporting new object with `i18n` property instead of exporting `i18n` instance. Just use `export default i18n` – Michal Levý Mar 05 '21 at 11:12