Vue-i18n: Cannot translate the value of keypath 'message.welcome'. Use the value of keypath as default.

[polikin]

vue & vue-i18n version

"vue": "^2.0.1",
"vue-i18n": "^7.3.2",

Reproduction Link

github: https://github.com/polikin/vuejs-boilerplate

Steps to reproduce

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router/index';
import i18n from './locale/index';

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App },
    router,
    i18n
}).$mount('#app'); //mount the router on the app

locale/index.js

import Vue from 'vue';
import VueI18n from 'vue-i18n'
import messages from './message';

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  messages
});

locale/message.js

export default [
    {
        en: {
            message: {
                welcome: 'Welcome'
            }
        },
        fr: {
            message: {
                welcome: 'Bonjour'
            }
        }
    }
];

export default i18n;

What is Expected?

Hello.vue
<p>{{ $t("message.welcome") }}</p> should render 'Welcome'`

What is actually happening?

I get this error: vue-i18n.common.js:16 [vue-i18n] Cannot translate the value of keypath 'message.welcome'. Use the value of keypath as default.

[Miguel-Herrero]

Hi @polikin I had this problem until I read this comment. My problem was that I renamed the messages property (exactly like in the comment). Renaming it made the thing work.

Maybe your problem is related with exporting the translations. I notice that you don't export default i18n in your locale/index.jsand I've different messages file:

const messages = {
  en: {
    home: {
      someString: 'Una cadena de texto'
    }
  },
  es: {
    home: {
      someString: 'A string of text'
    }
  }
}

export default messages

Hope it helps! :)

[polikin]

Thanks, it's working.

[richirich999]

Hello, I am setting up i18n in same way but getting warnings for the same, but its translating all the words though. Can anyone help me with this.

[DanielWaltherCode]

I experienced the same problem and in my case it was caused by referencing variables that were not available at page load. I used a variable I fetched from my API as a translation key and since this was not immediately available I got warning messages (but once the api call went through the string was translated correctly).

Adding a simple v-if to check if the variable was set got rid of the warning message.