2
Following the documentation of vue-i18n
I managed to configure the translation in my application problem that I am stuck to only 2 languages, how can I add more translations? follows the current settings:
i18n.js
import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const messages = {
en: {
welcomeMsg: "Welcome to Your Vue.js App"
},
es: {
welcomeMsg: "Bienvenido a tu aplicación Vue.js"
}
};
const i18n = new VueI18n({
locale: "en",
fallbackLocale: "es",
messages
});
export default i18n;
App.
<template>
<div id="app">
<div>
<button
v-for="entry in languages"
:key="entry.title"
@click="changeLocale(entry.language)"
>{{entry.title}}</button>
</div>
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import i18n from "@/plugins/i18n";
export default {
name: "app",
components: {
HelloWorld
},
data: () => ({
languages: [
{ language: "en", title: "English" },
{ language: "es", title: "Español" }
]
}),
methods: {
changeLocale(locale) {
i18n.locale = locale;
}
}
};
</script>