QPANC são as iniciais de Quasar PostgreSQL ASP NET Core.
- Source
- Introdução
- Parte I - ASP.NET - Inicializando os Projetos
- Parte 2 - PostgreSQL
- Parte 3 - ASP.NET - Registrando Serviços e Lendo Variáveis de Ambiente
- Parte 4 - ASP.NET - Entity Framework e ASP.NET Core Identity
- Parte 5 - ASP.NET - Documentação Interativa com Swagger
- Parte 6 - ASP.NET - Regionalização
- Parte 7 - ASP.NET - Autenticação e Autorização
- Parte 8 - ASP.NET - CORS
- Parte 9 - Quasar - Criação e Configuração do Projeto
- Parte 10 - Quasar - Configurações e Customizações
- Parte 11 - Quasar - Componentes - Diferença entre SPA e SSR
- Parte 12 - Quasar - Serviços
- Parte 13 - Quasar - Regionalização e Stores
- Parte 14 - Quasar - Consumindo a API
- Parte 15 - Quasar - Login
- Parte 16 - Quasar - Áreas Protegidas
- Parte 17 - Quasar - Registro
- Parte 18 - Docker - Maquina Virtual Linux
- Parte 19 - Docker - Registro e Build
- Parte 20 - Docker - Traefik e Publicação
- Demo Online
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
}
})
}
A partir deste ponto, você pode acessar o this.$root, this.$t, this.$router e this.$route de suas actions, mutations e getters.
Top comments (0)