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.

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