Cannot translate the value of keypath 'message.hello'. Use the value of keypath as default. #29

Konafets · 2017-10-11T12:40:22Z

I encountered that error above and read all issue reports at kazupon/vue-i18n repo. The error happens apparently because the Vue instance is loaded before the localization.

One guy pointed to vuex-i18n, another translation lib. I gave it a shot and this worked like a charm. The best thing: I could use the generated localization files from this package with vuex-i18n. Here is my setup:

import store from './vuex';
import vuexI18n from 'vuex-i18n';
Vue.use(vuexI18n.plugin, store);

import Locales from './vue-i18n-locales.generated.js';
Vue.i18n.add('en', Locales.en);
Vue.i18n.add('de', Locales.de);

// set the start locale to use
Vue.i18n.set(Laravel.locale);

const app = new Vue({
    store, // inject store into all children
    el: '#app',
});

The Laravel.locale comes from my Layout:

<head>
    <!-- Header stuff -->
  
    <!-- Scripts -->
    <script>
        const Laravel = {
            csrfToken: "{{ csrf_token() }}",
            locale: "{{ config('app.locale') }}"
        };
    </script>
</head>

The text was updated successfully, but these errors were encountered:

martinlindhe · 2017-10-13T05:44:15Z

Nice find, we should update the README with info about this!

Abonive · 2018-02-19T21:55:46Z

So, I got around this error, like this.

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Locales from './vue-i18n-locales.generated.js'

Vue.use(VueI18n)

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

const app = new Vue({
  i18n,
  el: '#app',
})

I've tried changing the language to other than English, selecting the Vue root instance in devtools and running

$vm0.$i18n.locale = 'es'

and it works fine.

martinlindhe · 2018-02-19T23:15:03Z

@Abonive Something similar is already documented in the README (a default language needs to be set):

import Vue from 'vue';
import VueInternalization from 'vue-i18n';
import Locales from './vue-i18n-locales.generated.js';

Vue.use(VueInternalization);

Vue.config.lang = 'en';

...

Also gonna close this, as documented solutions is implemented in #31 and #34

Konafets mentioned this issue Oct 11, 2017

error Vue.locale is not a function #27

Closed

Naoray mentioned this issue Nov 10, 2017

store.registerModule is not a function #33

Closed

JValck mentioned this issue Feb 2, 2018

Improving the README #40

Closed

martinlindhe closed this as completed Feb 19, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot translate the value of keypath 'message.hello'. Use the value of keypath as default. #29

Cannot translate the value of keypath 'message.hello'. Use the value of keypath as default. #29

Konafets commented Oct 11, 2017 •

edited

Loading

martinlindhe commented Oct 13, 2017

Abonive commented Feb 19, 2018

martinlindhe commented Feb 19, 2018 •

edited

Loading

Cannot translate the value of keypath 'message.hello'. Use the value of keypath as default. #29

Cannot translate the value of keypath 'message.hello'. Use the value of keypath as default. #29

Comments

Konafets commented Oct 11, 2017 • edited Loading

martinlindhe commented Oct 13, 2017

Abonive commented Feb 19, 2018

martinlindhe commented Feb 19, 2018 • edited Loading

Konafets commented Oct 11, 2017 •

edited

Loading

martinlindhe commented Feb 19, 2018 •

edited

Loading