Having issues incorporating vue-i18n into my app. Used this page as inspiration.
<b-navbar-nav class="ml-auto" >
<b-nav-item-dropdown :text="display_name" right>
<b-dropdown-item disabled>{{ $t('username') }}: {{ username }}</b-dropdown-item>
<b-dropdown-item disabled>Organisation: {{ organisation }}</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
Gives the error: Cannot read property '_t' of undefined at Proxy.Vue.$t
Tracking the error in Chrome devtools takes me to line 149 (the return statement) of vue-i18n.esm.js:
Vue.prototype.$t = function (key) {
var values = [], len = arguments.length - 1;
while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];
var i18n = this.$i18n;
return i18n._t.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this ].concat( values ))
};
I'm using vue-cli-3 webpack config and installed vue-i18n from npm and using as a plugin.
i18n.js (in src/plugins directory):
import Vue from 'vue/dist/vue.js';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const messages = {
'en': {
username: 'Username',
...
},
'se': {
username: 'Användarnamn',
...
}
};
export let i18n = new VueI18n({
locale: 'en', // set locale
fallbackLocale: 'se', // set fallback locale
messages, // set locale messages
});
main.js:
import Vue from 'vue/dist/vue.js'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'
import VueSpinners from 'vue-spinners'
import i18n from './plugins/i18n'
...
new Vue({
router,
i18n,
data() {
return store;
},
render: h => h(App)
}).$mount('#app')
Dependencies from package.json:
"dependencies": {
"axios": "^0.18.0",
"bootstrap-vue": "^2.0.0-rc.11",
"npm": "^6.5.0",
"ol": "^5.3.0",
"proj4": "^2.5.0",
"qs": "^6.6.0",
"vue": "^2.5.17",
"vue-i18n": "^8.8.1",
"vue-router": "^3.0.2",
"vue-spinners": "^1.0.2"
},
What do I need to do?
Ah, embarrassingly simple, I changed
import i18n from './plugins/i18n'
to
import {i18n} from './plugins/i18n'
and all works now.