title: Vuetify using VueI18n results in [Vue warn]: Error in render: "TypeError: Cannot read property '_t' of undefined"
body: <p>Implementing Vue i18n into Vuetify is failing. I think I've followed the guide fairly well. </p>
  
  <p>The below config results in the following error:</p>
  
  <blockquote>
    <p>[Vue warn]: Error in render: "TypeError: Cannot read property '_t' of undefined"</p>
  </blockquote>
  
  <p><strong>vuetify.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>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) =&gt; i18n.t(key, params),
      }
  });
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>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 =&gt; h(App)
  }).$mount('#app')
  </code></pre>
  
  <p><strong>i18n folder</strong></p>
  
  <pre><code>/i18n
      +i18n.js
      /locales
          +en.js
  </code></pre>
  
  <p><strong>i18n.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import en from './locales/en'
  
  export default {
      en
  }
  </code></pre>
  
  <p><strong>en.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export default {
      login: 'Login!'
  }
  </code></pre>
  
  <p><strong>component usage</strong></p>
  
  <pre><code>&lt;v-toolbar-title&gt;
      {{ $t('login') }}
  &lt;/v-toolbar-title&gt;
  </code></pre>
  
  <p><strong>Full stack trace</strong></p>
  
  <pre><code>[Vue warn]: Error in render: "TypeError: Cannot read property '_t' of undefined"
  
  found in
  
  ---&gt; &lt;Login&gt; at src/views/Login.vue
         &lt;App&gt; at src/App.vue
           &lt;Root&gt;
  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)
  </code></pre>
  
  <p>My goal is to extend Vuetify locals under VueI18n as answered here: <a href="https://stackoverflow.com/questions/59821458/use-both-vuetify-and-vue-i18n-translations">Use both Vuetify and Vue-i18n translations</a>.</p>
  
  <p>If I move the VueI18n definition and pass it to Vue constructor, this works. </p>
  
  <p>What is the preferred way to configure this functionality? </p>