Add more than one translation to vue-i18n
Following the documentation of vue-i18n
I was able to configure the translation in my application problem that I am stuck to only 2 languages, how can I add more translations? follow 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.View
<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>
2
1 answers
Friend, just add the languages in the fallbackLocale property in Array format:
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"
},
pt: {
welcomeMsg: "Bem vindo a sua aplicação vue.js"
},
};
const i18n = new VueI18n({
locale: "en",
fallbackLocale: ["es", 'pt'],
messages
});
export default i18n;
In the App file.vue you add in date this snippet:
data() {
return {
languages: [
{ flag: "us", language: "en", title: "English" },
{ flag: "es", language: "es", title: "Español" },
{ flag: "pt", language: "pt", title: "Português" }
]
};
},
3
Author: Anderson Saraiva, 2019-07-02 14:49:32