Vue: vue-i18n: Cannot translate the value of keypath, Use the value of keypath as default

Question

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,
});

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 JavaScript files for Tagalog and Cebuano languages in the same format.

How can I fix this issue?

Answer 1

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,
  },
});

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"
  },
}