Vuetify using VueI18n results in [Vue warn]: Error in render: "TypeError: Cannot read property '_t' of undefined"

Viewed 274

Implementing Vue i18n into Vuetify is failing. I think I've followed the guide fairly well.

The below config results in the following error:

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

vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import VueI18n from "vue-i18n"
import messages from "../i18n/i18n"

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

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

export default new Vuetify({
    lang: {
        t: (key, ...params) => i18n.t(key, params),
    }
});

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify';
import store from './store';

Vue.config.productionTip = false

new Vue({
  //created, 
  store,
  router,
  vuetify: vuetify,
  render: h => h(App)
}).$mount('#app')

i18n folder

/i18n
    +i18n.js
    /locales
        +en.js

i18n.js

import en from './locales/en'

export default {
    en
}

en.js

export default {
    login: 'Login!'
}

component usage

<v-toolbar-title>
    {{ $t('login') }}
</v-toolbar-title>

Full stack trace

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

found in

---> <Login> at src/views/Login.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js:619
vue.runtime.esm.js:1888 TypeError: Cannot read property '_t' of undefined
    at Proxy.Vue.$t (vue-i18n.esm.js:192)
    at Proxy.render (Login.vue?81ae:33)
    at VueComponent.Vue._render (vue.runtime.esm.js:3548)
    at VueComponent.updateComponent (vue.runtime.esm.js:4066)
    at Watcher.get (vue.runtime.esm.js:4479)
    at new Watcher (vue.runtime.esm.js:4468)
    at mountComponent (vue.runtime.esm.js:4073)
    at VueComponent.push../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount (vue.runtime.esm.js:8415)
    at init (vue.runtime.esm.js:3118)
    at merged (vue.runtime.esm.js:3301)

My goal is to extend Vuetify locals under VueI18n as answered here: Use both Vuetify and Vue-i18n translations.

If I move the VueI18n definition and pass it to Vue constructor, this works.

What is the preferred way to configure this functionality?

0 Answers
Related