search

martinlindhe / laravel-vue-i18n-generator

Generates a vue-i18n compatible include file from your Laravel translations
MIT License
306 stars 207 forks source link

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

Closed Konafets closed 6 years ago

Konafets commented 7 years ago

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>
martinlindhe commented 7 years ago

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

Abonive commented 6 years ago

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 commented 6 years ago

@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