DEV Community

Tobias Mesquita for Quasar Framework Brasil

Posted on

QPANC - Parte 13 - Quasar - Regionalização e Stores

QPANC são as iniciais de Quasar PostgreSQL ASP NET Core.

27 Configuração do i18n

Agora que já configuramos a persistência dos dados relativos ao cliente, podemos configurar os parâmetros de internacionalização.

Para tal, vá até o boot i18n (ele deve ter sido criado durante a criação do projeto, caso não tenha sido, você deverá adiciona-lo agora):

QPANC.App/src/boot/i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from 'src/i18n'
import { Quasar } from 'quasar'

Vue.use(VueI18n)

export default ({ Vue, app, store }) => {
  const fallback = Quasar.lang.isoName
  const locale = store.getters['app/locale'] || fallback
  Quasar.lang.set(locale)
  const i18n = new VueI18n({
    locale: locale,
    fallbackLocale: fallback,
    messages
  })

  app.i18n = i18n
}

28 Troca de Idioma

Para alternar entre um idioma e outro, é bem simples, basta seta o idioma desejado no i18n e no lang do quasar. iremos construir um componente bem simples, que irá permitir que o usuário escolha o idioma desejado.

Como primeiro passo, iremos adicionar à pasta statics alguns ícones, no caso a bandeira do Brasil e a dos Estados Unidos. você pode conseguir estes arquivos no site Flat Icon

Então crie a pasta locale em QPANC.App/src/components e adicione os arquivos index.js, index.vue e index.sass

QPANC.App/src/components/locale/index.js

export default {
  name: 'LocaleComponent',
  data () {
    return {
      fab: false
    }
  },
  computed: {
    locale () {
      return this.$store.getters['app/locale']
    },
    icon () {
      return `img:statics/flags/${this.locale}.svg`
    }
  },
  methods: {
    async set (locale) {
      this.$store.commit('app/localeUser', locale)
      this.$i18n.locale = locale
      const lang = await import('quasar/lang/' + locale)
      this.$q.lang.set(lang)
    }
  }
}

QPANC.App/src/components/locale/index.sass

.component-locale
  .q-btn--fab .q-btn__wrapper
    padding: 0
    .q-fab__icon-holder,
    img
      width: 56px
      height: 56px
  .q-btn--fab-mini .q-btn__wrapper
    padding: 0
    img
      width: 40px
      height: 40px

QPANC.App/src/components/locale/index.vue

<template>
  <q-page-sticky position="bottom-right" class="component-locale" :offset="[18, 18]">
    <q-fab v-model="fab" :label="$t('locale.title')" external-label vertical-actions-align="right" :icon="icon" direction="up" >
      <q-fab-action label-position="left" icon="img:statics/flags/pt-br.svg" @click="set('pt-br')" :label="$t('locale.ptbr')" external-label />
      <q-fab-action label-position="left" icon="img:statics/flags/en-us.svg" @click="set('en-us')" :label="$t('locale.enus')" external-label />
    </q-fab>
  </q-page-sticky>
</template>

<script src="./index.js"></script>
<style src="./index.sass" lang="sass"></style>

A troca de idioma é realizada no seguinte trecho de código:

    async set (locale) {
      this.$store.commit('app/localeUser', locale)
      this.$i18n.locale = locale
      const lang = await import('quasar/lang/' + locale)
      this.$q.lang.set(lang)
    }

Como você deve ter percebido, este componente usa alguns textos localizados, então precisamos atualizar os arquivos JSON utilizados pelo i18n.

Quasar.App/src/i18n/en-us/index.js

export default {
  locale: {
    title: 'Idiom',
    ptbr: 'Portuguese',
    enus: 'English'
  }
}

Quasar.App/src/i18n/pt-br/index.js

export default {
  locale: {
    title: 'Idioma',
    ptbr: 'Português',
    enus: 'Inglês'
  }
}

Agora precisamos registrar este componente, para tal, crie o boot components

quasar new boot components

QPANC.App/quasar.config.js

module.exports = function (ctx) {
  return {
    boots: [
      'components'
    ]
  }
}

QPANC.App/src/boot/components.js

import Vue from 'vue'

Vue.component('locale-switch', () => import('components/locale/index.vue'))

E por fim, adicione este componente aos layouts main e clean

<template>
  <q-layout id="layout-clean" view="lHh Lpr lFf" class="bg-main">
    <!-- ... -->
    <locale-switch></locale-switch>
  </q-layout>
</template>

E então podemos executar a aplicação e realizar alguns testes. Como sugestão, abra a tela de Login, envie um usuário/senha incorretos, troque o idioma e tente novamente. A aplicação deverá alternar entre os dois idiomas, assim como a API deve retornar os erros no mesmo idioma que a aplicação.

Alt Text

29 Injetando o Global bus, i18n e router na store

Em uma aplicação SSR, como devemos manter o isolamento os serviços e recursos, não podemos exportar e consequentemente importar recursos de forma global.

Porém, é comum que precisemos acessar as rotas, os textos localizados, ou até mesmo emitir e escutar eventos.

Neste caso, podemos criar um arquivo de boot, e injetar estes recursos direto na store.:

quasar new boot store

E claro, não esqueça de adicionar ele ao quasar.config.js > boots. Apenas lembre-se que este boot deve ser colocado após o i18n.

QPANC.App/quasar.config.js

module.exports = function (ctx) {
  return {
    boots: [
      'i18n',
      'store'
    ]
  }
}

E agora, a implementação deste boot.:

QPANC.App/src/boot/store.js

export default async ({ app, store, router }) => {
  store.$router = router
  Object.defineProperty(store, '$t', {
    get () {
      return app.i18n.t.bind(app.i18n)
    }
  })
  Object.defineProperty(store, '$route', {
    get () {
      return router.route
    }
  })
  Object.defineProperty(store, '$root', {
    get () {
      return router.app.$root
    }
  })
}

A partir deste ponto, você pode acessar o this.$root, this.$t, this.$router e this.$route de suas actions, mutations e getters.

Discussion (0)