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?