2

Seguindo a documentação do vue-i18n consegui configurar a tradução em minha aplicação problema que estou preso a somente 2 linguagens, como consigo adicionar mais traduções? segue as configurações atuais:

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.vue

<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>

1 Resposta 1

3

amigo, é só adicionar os idiomas na propriedade fallbackLocale em formato de Array:

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;

no arquivo App.vue você adiciona no Data esse trecho:

data() {
    return {
      languages: [
        { flag: "us", language: "en", title: "English" },
        { flag: "es", language: "es", title: "Español" },
        { flag: "pt", language: "pt", title: "Português" }
      ]
    };
  },

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .