I'm currently working on a Vue.js project to create a multi-language website, but I'm struggling with how to access and utilize the i18n constant. I've attempted using the eventBus approach, but it doesn't seem to be the right solution for me. My project also involves using vue-router.
Navbar.vue
<template>
<a v-on:click="changeLocale">EN</a>
</template>
<script>
export default {
methods: {
changeLocale: function() {
console.log("es");
i18n.locale = "es";
}
}
};
</script>
main.js
import VueI18n from 'vue-i18n';
import VueRouter from 'vue-router';
import App from './App.vue';
import {routes} from './routes.js';
import {messages} from './i18n.js';
Vue.use(VueRouter);
Vue.use(VueI18n);
const router = new VueRouter({
routes,
mode: 'history'
});
const i18n = new VueI18n({
locale: 'en',
messages
});
new Vue({
el: '#app',
router,
i18n,
render: h => h(App)
});
App.vue
<template>
<div>
<navbar></navbar>
<router-view></router-view>
<footer-part></footer-part>
</div>
</template>
<script>
import Navbar from './components/site/Navbar.vue';
import Footer from './components/site/Footer.vue';
export default {
components: {
'navbar' : Navbar,
'footer-part' : Footer
}
}
</script>