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

[MRVDH]

I followed the documentation and read every issue related to this error, but still couldn't fix it. For some reason it can't translate it, but it doesn't tell me why. It only outputs this line into the console:
Cannot translate the value of keypath 'language_option'. Use the value of keypath as default.

vue & vue-i18n version

2.6.10, 8.11.2

Full code:

https://github.com/MRVDH/mapping-north-korea/tree/2-Add-multi-language-support/client

Reduced code:

main.js:

import Vue from 'vue';
import Vuetify from 'vuetify';
import VueI18n from 'vue-i18n';
import App from './App';
import router from './router';
import 'vuetify/dist/vuetify.min.css';

Vue.config.productionTip = false;

Vue.use(Vuetify);
Vue.use(VueI18n);

/* eslint-disable no-new */
new Vue({
    i18n: {
        fallbackLocale: 'en'
    },
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
});

Component file:

<template>
    <v-toolbar app>
        <v-btn @click.stop="toggleLanguage()">
            {{ $t('language_option') }}
        </v-btn>
    </v-toolbar>
</template>

<i18n>
{
  "en": {
    "language_option": "한국어"
  },
  "ko": {
    "language_option": "English"
  }
}
</i18n>

<script>
export default {
    name: 'Example',
    data () {
        return {
            locale: 'en'
        };
    },
    methods: {
        toggleLanguage: function () {
            console.log('toggle!');
        }
    }
};
</script>

[Silbad]

Yo,
Before data(), define locale

this.$i18n.locale = 'en';

And replace {{ $t('language_option') }} by {{ $t('message.language_option') }}

[MRVDH]

What do you mean "Before data()"?
If I put it before export default or inside data () { } before the return it says Uncaught TypeError: Cannot set property 'locale' of undefined.
I also tried putting it in main.js but that didn't work either.

[Silbad]

Oh sorry before return of data :

    data: function() {
        this.$i18n.locale = 'en';
        return {
            locale: 'en'
        };
    },

[MRVDH]

Unfortunately this has no effect either. 😞
Same warning in the console and same result.

ps. The documentation says that I don't need to use messages. in front of the messages when it comes to single file components. https://kazupon.github.io/vue-i18n/guide/sfc.html#basic-usage

[Silbad]

I see... Strange, it works for me...
I f you make a "console.log" of this.$i18n, locale is defined ?

[MRVDH]

yes :) 'en'

[Silbad]

Other leads
=> you use webpack with vue-loader and vue-i18n-loader ?
=> try by encapsulating the content of your template by a div (https://kazupon.github.io/vue-i18n/guide/sfc.html#basic-usage)

[MRVDH]

I'm using them both yeah. Encapsulating in a div does not work either. Could it be a configuration error?

I'm using
[email protected]
@kazupon/[email protected]

I'm going to update to vue-loader v15, however there is no migration guide for v13 to v14, only v14 to v15, so I hope it's gonna be okay

[MRVDH]

Yup fixed it by using vue CLI 3

[alexeigs]

I still face the same issue despite the steps described. Warnings are not silenced and I keep getting the following, when locale en is active. No issues when de is active.

[vue-i18n] Value of key 'Hi, nice to meet you' is not a string! 2 vue-i18n.esm.js:32
[vue-i18n] Cannot translate the value of keypath 'Hi, nice to meet you'. Use the value of keypath as default.

Setup:

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  formatFallbackMessages: true,
  silentFallbackWarn: true,
  messages
})

_en.ts_

export default {
  Common: {
    about_us: 'About us',
  }
}

_de.ts_

export default {
  Common: {
    about_us: 'Über uns',
  },
  'Hi, nice to meet you': 'Hallo, schön dich kennenzulernen'
}

[geantas]

In case anyone else had something similar but couldn't a solution.
I had similar issue where I was always getting the translation warning on the initial load of application, although everything got translated. I didn't realize I had to set default locale before the initialization of app:

i18n.locale = store.state.locale.selectedLocale; // setting the initial locale

const app = new Vue({ // initializing application
  el: '#app',
  router,
  store,
  i18n,
}).$mount('#app');

@Silbad 's comment gave me a hint what might be wrong.