# I18N

Plugin utilizado vue-i18n (opens new window)

# Instalação

Para instalar digite:

vue add i18n

// OU
vue ui //Pesquisar por este plugin e ir seguindo os passos

1
2
3
4

Será solicitado o idioma padrão, um de fallback, diretorio onde ficaram os arquivos de tradução e se serão arquivos separados ou um unico para as traduções.

Para ter maior controle sobre as traduções eu recomendo arquivos separados para uma maior manutenibilidade.

Após finalizar a instalação serão criados o arquivo i18n.js e um diretório locales .

Em i18n.js fica a configuração do plugin e em locales os arquivos de traduções.

nome_projeto/
├── public/
├── src/
│   ├── assets/
│   ├── locales/
│   │   ├── pt-BR.json
│   │   └── en.json
│   ├── components/
│   ├── mixins/
│   ├── plugins/
│   ├── store/
│   ├── views/
│   ├── App.vue
│   ├── main.js
│   ├── i18n.js
│   └── router.js
├── tests/
├── .editorconfig
├── .gitignore
├── package.json
└── README.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Será importado em main.js o arquivo i18n.js gerado pelo plugin.

Para deixar de uma forma mais organizada atualize o arquivo para o descrito aqui.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { myMixins } from './mixins'

// Arquivo de configuração do I18N
import i18n from './i18n'

Vue.config.productionTip = false

Vue.mixin(myMixins)

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Utilização

Para utilizar, vá até o arquivo desejado e dentre {} duplo digite $t('nomeChave')

<h1>{{ $t('welcomeMsg') }}</h1>

O $t especifica que estamos usando o plugin de internacionalização. O texto que queremos mostrar é o valor da chave welcomeMsg em nosso objeto de mensagem contido nos arquivos de tradução que se encontram em src/locales.

# Troca de idioma (Modo 1)

Para trocar de idioma podemos permitir que o usuario selecione o idioma desejado.

Uma boa maneira de permitir isso é por meio do pacote vue-flag-icon (opens new window).

Para instalar este pacote digite:

// NPM
npm install vue-flag-icon --save

// Yarn
yarn add vue-flag-icon

1
2
3
4
5

Para dizer ao Vue.js para usá-lo, no arquivo i18n.js importe o pacote e solicite logo depois do vue-i18n.

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import FlagIcon from 'vue-flag-icon'

Vue.use(VueI18n)
Vue.use(FlagIcon)

function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

No componente principal da aplicação, que costuma ser o App.vue vamos disponibilizar um bottão para os idiomas. Mas temos que definir um data para os idiomas.

data() {
  return {
    langs: ['pt-br', 'en']
  }
}

1
2
3
4
5

Ficando assim o App.vue .

<template>
  <div class="hello">
    <p>{{ $t('message') }}</p>
    <select v-model="$i18n.locale">
      <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</option>
    </select>      
   </div>
</template>

<script>
  import i18n from '@/plugins/i18n'

  export default {
    name: 'App',
    data () {
      return {
        langs: ['pt-br', 'en']
      }
    }
  }
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Para acessar o idioma atual ou alterar podemos usar o $i18n .

  functionX () {
    // Se ele foi importado globalmente (main.js) usar o this.$
    this.$i18n.locale = 'en'

    // Se ele foi importado em algum arquivo especifico usar o i18n
    i18n.locale = 'en'
  }

1
2
3
4
5
6
7

← Store Axios →