Add more than one translation to Vue-i18n

Question

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>

Answer 1

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.See file 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" }
      ]
    };
  },