{{ $t('key') }} dies

I am not able to use $t in any view. Looks like a Bug.

TypeError: Cannot read property '_t' of undefined
    at Proxy.Vue.$t (vue-i18n.esm.js:178)
    at Proxy.render (app.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options:24)
    at VueComponent.Vue._render (vue.esm.js:3545)
    at VueComponent.updateComponent (vue.esm.js:4063)
    at Watcher.get (vue.esm.js:4476)
    at new Watcher (vue.esm.js:4465)
    at mountComponent (vue.esm.js:4070)
    at VueComponent.Vue.$mount (vue.esm.js:9047)
    at VueComponent.Vue.$mount (vue.esm.js:11941)
    at init (vue.esm.js:3124)

// app.js

import Vue from 'vue';

// use
import VueI18n from './vue-config-i18n.js';
Vue.use(VueI18n);
...

new Vue({
	el: '#app',
	template: '<app/>',

	// Register App Component
	components: {
		app: App
	}
});

// vue-config-i18n.js
import VueI18n from 'vue-i18n';

import lang_de from '@/lang/de.json'; // gets imported.

export default {
	install (Vue, options) {

		Vue.use(VueI18n);

		let i18n = new VueI18n({
			locale: 'de',
			fallbackLocale: 'de',
		});

		(async ()=>{
			let lang = 'de';
			
			//let msgs = await import('@/lang/'+lang+'.json');
			let msgs = lang_de;

			if (msgs) {
				i18n.setLocaleMessage(lang, msgs.default || msgs);
				i18n.lang = lang;

				console.log('i18n loaded lang', lang);
			}
			else {
				console.warn('i18n did not load lang', lang);
			}
		})();
	}
}

// app.vue
<template>
  <div>
    {{ $t('hello') }}
  </div>
</template>

// ./lang/de.json
{
	"hello": "Hallo Welt"
}

[beau-gosse]

FWIW the module approach doesn’t seem to work. The setup that worked for me (with Vue CLI) is instantiating VueI18n inside main.js.

// main.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  }
}

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

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

[BananaAcid]

@kazupon so you say, the module is not compatible to the Vue’s default method of Vue.use(..plugin..) ? As I did show above (app.js) what I tried. What ever $mount is for, is does not match the vue guide. I would not have asked, and would not be the only one having trouble, if the vue-i18n docs would be crystal clear on this.

Could you please at least consider explaining the difference to why it is not like in the guide? I might then be able to adapt your code.