TypeError: Cannot read property '_t' of undefined

[mhetreramesh]

I'm getting following error when I'm trying using translations in the component. TypeError: Cannot read property '_t' of undefined

Here is my setup:

import Vue from 'vue';

import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated';

Vue.use(VueInternationalization);

const lang = 'en';

const i18n = new VueInternationalization({
    locale: lang,
    messages: Locale
});

import MainComponent from './components/MainComponent.vue';

import router from './router';

new Vue(Vue.util.extend({ router }, MainComponent), i18n).$mount('#app');

& I'm trying using in the component like {{ this.$t('message.frontend.home') }} or {{ $t('message.frontend.home') }}

both times I'm getting same error.

[martinlindhe]

Have you generated the files with php artisan vue-i18n:generate ? Is message.frontend.home set?

[mhetreramesh]

Yes I've generated file from php artisan command & when I checked in the file there is a JSON data.

Here is the data from vue-i18n-locales.generated.js:

export default {
    "de": {
        "frontend": {
            "home": "Zuhause",
            "about": "Über",
            "top_destinations": "Top-Ziele",
            "recently_added": "Kürzlich hinzugefügt"
        }
    },
    "en": {
        "frontend": {
            "home": "Home",
            "about": "About",
            "top_destinations": "Top Destinations",
            "recently_added": "Recently Added"
        }
    }
}

[martinlindhe]

Okay, you need to address the translation correctly then, based on the file you paste it should be {{ $t('frontend.home') }}, (drop the "message." part). Or rearrange the hierarchy with more folders.

[mhetreramesh]

I've tried using {{ $t('frontend.home') }} but still the same issue. I've pasted the complete error below, you might get some more idea about it. I've also checked on vue-i18n issues list for any similar issue but I didn't found any with solutions.

app.js:1082 [Vue warn]: Error in render: "TypeError: Cannot read property '_t' of undefined"

found in

---> <MainHeader> at resources/js/components/Partials/MainHeader.vue
       <Root>
warn @ app.js:1082
logError @ app.js:2226
globalHandleError @ app.js:2221
handleError @ app.js:2210
Vue._render @ app.js:5035
updateComponent @ app.js:3277
get @ app.js:3631
Watcher @ app.js:3620
mountComponent @ app.js:3284
Vue.$mount @ app.js:9029
Vue.$mount @ app.js:11428
init @ app.js:4626
createComponent @ app.js:6097
createElm @ app.js:6044
createChildren @ app.js:6171
createElm @ app.js:6073
patch @ app.js:6619
Vue._update @ app.js:3149
updateComponent @ app.js:3277
get @ app.js:3631
Watcher @ app.js:3620
mountComponent @ app.js:3284
Vue.$mount @ app.js:9029
Vue.$mount @ app.js:11428
scope @ app.js:12102
__webpack_require__ @ app.js:20
Object.defineProperty.value @ app.js:12044
__webpack_require__ @ app.js:20
(anonymous) @ app.js:63
(anonymous) @ app.js:66
app.js:2230 TypeError: Cannot read property '_t' of undefined
    at Proxy.Vue.$t (app.js:33286)
    at Proxy.render (app.js:26340)
    at VueComponent.Vue._render (app.js:5033)
    at VueComponent.updateComponent (app.js:3277)
    at Watcher.get (app.js:3631)
    at new Watcher (app.js:3620)
    at mountComponent (app.js:3284)
    at VueComponent.Vue.$mount (app.js:9029)
    at VueComponent.Vue.$mount (app.js:11428)
    at init (app.js:4626)

[martinlindhe]

Your issue is with how you use vue-i18n and how you address your translation strings.

If you are new to these packages, you should start out with a simple example, then add packages one by one. Make sure you have vue-i18n working in isolation first.

I'm going to close this as you are having setup issues and not experiencing a bug in this software.

[mhetreramesh]

You are right the problem was with my setup!

Thanks for your help though :)

The problem was with dependency injection. I had to do like:

new Vue(Vue.util.extend({ router, i18n }, MainComponent)).$mount('#app');