I am currently working on implementing internationalization in my Vue.js project using Vue I18n.
Although I've been following the documentation found at , I encountered the following error message:
[Vue warn]: Error in render: "TypeError: i18n is undefined"
found in
---> <MainNavBar> at src/components/MainNavBar.vue
<VApp>
<App> at src/App.vue
<Root> vue.runtime.esm.js:619
TypeError: "i18n is undefined"
$t vue-i18n.esm.js:167
render MainNavBar.vue:33
VueJS 42
<anonymous> main.js:18
js app.js:6991
__webpack_require__ app.js:724
fn app.js:101
0 app.js:7304
__webpack_require__ app.js:724
<anonymous> app.js:791
<anonymous> app.js:1 vue.runtime.esm.js:1887
VueJS 45
<anonymous> main.js:18
js app.js:6991
__webpack_require__ app.js:724
fn app.js:101
0 app.js:7304
__webpack_require__ app.js:724
<anonymous> app.js:791
<anonymous> app.js:1
It's puzzling to me why i18n is showing as "undefined", even though I have installed it through NPM following the documentation.
Could someone provide assistance with this issue?
I have already tried searching for a solution online, but unfortunately, I haven't had any luck.
In order to aid in troubleshooting this problem, below is the code that I am currently using.
Thank you kindly.
MainNavBar.vue
<i18n>
{
"en": {
"home": "Home"
},
"pt": {
"home": "Início"
}
}
</i18n>
<template>
...
< li class = "nav-item">
<router-link class="nav-link" to='/home'>
< i class="fa fa-home"></i> {{ $t('home') }}
</router-link>
</li>
...
</template>
<script>
export default {
data () {
return {
locale: 'en'
}
},
watch: {
locale (val) {
this.$i18n.locale = val
}
}
}
</script>
main.js
import 'vuetify/dist/vuetify.min.css'
import Vue from 'vue'
import Vuetify from 'vuetify'
import VueI18n from 'vue-i18n'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.use(Vuetify)
Vue.use(VueI18n)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
vue.config.js
const merge = require('deepmerge')
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options =>
merge(options, {
loaders: {
i18n: '@kazupon/vue-i18n-loader'
}
})
)
}
}
package.json
{
"name": "executive_frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"jquery": "^3.3.1",
"material-design-icons-iconfont": "^4.0.5",
"ol": "^5.3.1",
"popper.js": "^1.14.7",
"vue": "^2.6.7",
"vue-i18n": "^8.10.0",
"vue-router": "^3.0.1",
"vuetify": "^1.5.6",
"vuex": "^3.0.1"
},
"devDependencies": {
"@kazupon/vue-i18n-loader": "^0.3.0",
"@vue/cli-plugin-babel": "^3.4.0",
"@vue/cli-plugin-e2e-nightwatch": "^3.4.0",
"@vue/cli-plugin-eslint": "^3.4.0",
"@vue/cli-plugin-unit-jest": "^3.4.0",
"@vue/cli-service": "^3.4.0",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"deepmerge": "^3.2.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.21"
}
}