Introdu��o ao Quasar: Um Framework Vue.js

O Quasar � um framework Vue.js e sem d�vidas � uma das melhores soluç�es para criar aplicaç�es. Com ele podemos construir aplicaç�es incr�veis e leves. Ele possui suporte para navegadores, dispositivos m�veis, e aplicativos desktops, uma �tima documentaç�o, com v�rios exemplos, � muito f�cil de aprender, f�cil personalizaç�o de seus componentes e o mais importante, � baseado em Vue.js.

Instalaç�o e configuraç�o

Para instalar o Quasar podemos usar o npm ou Yarn, como pode ser visto nos C�digos 1 e 2.

npm install -g @quasar/cli

C�digo 1. Utilizando o npm para instalar o Quasar

 
  yarn global add @quasar/cli

C�digo 2. Utilizando o Yarn para instalar o Quasar

Ap�s a instalaç�o, vamos rodar o comando do C�digo 3 para criar um projeto Quasar.

quasar create <nome_do_projeto>

C�digo 3. Criando um projeto Vue.js utilizando o Quasar

Ao rodar o comando, ele nos far� algumas perguntas como pode ser visto na Figura 1.

Figura 1. Perguntas feitas quando criamos um novo projeto

Ap�s responder as perguntas começar� a fazer o download do projeto. Esse comando cria uma aplicaç�o com uma estrutura de pastas bem parecida com um projeto Vue.js (componentes, views) e o vue-router instalado e configurado.

Veja na Figura 2 a estrutura padr�o das pastas criadas pelo Quasar.

Figura 2. Estrutura inicial criada pelo Quasar

Finalizado o download, entre na pasta que foi criado o projeto e rode o comando do C�digo 4.

quasar dev

C�digo 4. Executando a aplicaç�o

Esse comando far� o build da nossa aplicaç�o na porta http://localhost:8080. Veja na Figura 3 a aplicaç�o criada sendo executada no navegador.

Figura 3. Aplicaç�o sendo executada no navegador

Utilizando o Quasar

O Quasar tem uma gama de componentes Vue.js prontos para serem usados e configurados atrav�s de props, slots e eventos.

Veremos alguns exemplos de como utiliz�-los. Neste primeiro exemplo, vamos utilizar uma tabela como pode ser visto na Figura 4.

Figura 4. Exemplo de uma tabela criada utilizando o Quasar

Para replicar o exemplo da tabela, limpe o arquivo index.vue e insira o C�digo 5.


  <template>
   <div class="q-pa-md">
     <q-table title="Usu�rios" :rows="rows" :columns="columns" row-key="nome" />
   </div>
  </template>
   
  <script>
  import { defineComponent } from "vue";
   
  export default defineComponent({
   name: "Usu�rios",
   data() {
     return {
       rows: [
         {
           nome: "Luiz Medeiros",
           email: "luiz@email.com",
           telefone: 999999999,
           funcao: "Programador",
         },
         {
           nome: "Rebeca Maria",
           email: "rebeca@email.com",
           telefone: 2222222222,
           funcao: "Web Designer",
         },
         {
           nome: "Lucas Santos",
           email: "lucas@email.com",
           telefone: 3333333333,
           funcao: "Programador Android",
         },
       ],
       columns: [
         {
           name: "nome",
           align: "left",
           label: "Nome",
           field: "nome",
           sortable: true,
         },
         {
           name: "email",
           align: "left",
           label: "E-mail",
           field: "email",
           sortable: true,
         },
         {
           name: "telefone",
           align: "left",
           label: "Telefone",
           field: "telefone",
           sortable: true,
         },
         {
           name: "funcao",
           align: "left",
           label: "Funç�o",
           field: "funcao",
           sortable: true,
         },
       ],
     };
   },
  });
  </script>

C�digo 5. Exemplo de c�digo que exibe uma tabela utilizando o Quasar

Entenda como o c�digo foi criado: na linha 3 chamamos o componente q-table, que � o componente do Quasar para renderizar uma tabela. Nele passamos algumas props, como rows (linhas da tabela), columns (o cabeçalho da tabela), title para mostrar um t�tulo no componente (essa props n�o � obrigat�ria), e por fim o row-key com o nome. A propriedade row-key deve ser �nica.

Estrutura das colunas

A estrutura da props columns, que no caso s�o os cabeçalhos da nossa tabela, tem que ser um array de objetos, onde cada objeto representa uma coluna. A estrutura desse objeto � a seguinte:

name: identificaç�o da coluna, deve ser �nico, usado pelo Quasar na paginaç�o e ordenaç�o dos dados;
align: alinhamento da label, que pode ser left, right ou center (opcional);
label: o nome que aparecer� no cabeçalho;
field: para determinar o valor de qual linha da propriedade rows ele pegar�;
sortable: define se queremos que essa coluna tenha a opç�o de ordenaç�o (opcional).

Existem outras configuraç�es para as columns, como required, style, classes e format. Vale a pena conferir na documentaç�o.

Quasar Plugins

Outro recurso legal do Quasar s�o os seus plugins, que s�o instalados no projeto sem precisar executar um comando no terminal. Veja alguns exemplos de plugins dispon�veis:

Loading Bar - exibe uma barra de progresso enquanto � feita requisiç�es Ajax;
Dialog: exibe um modal na tela;
Local/Session Storage Plugins: armazena localmente dados;
Notify: exibe mensagens animadas na forma de notificaç�o.

Vamos usar como exemplo o plugin Notify, que � �til para alertar sobre um evento. Primeiro precisamos instal�-lo e para isso v� at� o arquivo quasar.conf.js na raiz do projeto e procure pelo array plugins. Registre o nome do plugin dentro dele como mostra o C�digo 6.


  �
      plugins: [
          'Notify'
      ]
  ...

C�digo 6. Inserindo o nome do plugin (Notify) no array plugins

Pronto, o plugin Notify j� est� instalado sem precisar rodar um comando no npm ou Yarn para isso. Para us�-lo v� at� o componente que deseja usar e faça a importaç�o do plugin, como mostra o C�digo 7.

import { Notify } from 'quasar'

C�digo 7. Importando o Notify

Para mostrar a notificaç�o basta utilizar o m�todo exibido no C�digo 8.

Notify.create('Operaç�o Realizada com Sucesso!')

C�digo 8. Utilizando o Notify

Veja no C�digo 9 um exemplo completo de como utilizar o plugin em um componente.


  <template>
   <div class="q-pa-md">
     <q-btn color="purple" @click="showNotify" label="Show Notification" />
   </div>
  </template>
   
  <script>
  import { Notify } from 'quasar'
   
  import { defineComponent } from 'vue'
  export default defineComponent({
   name: 'Plugin',
   data(){
     return {
   
     }
   },
   methods: {
     showNotify(){
       Notify.create('Operaç�o Realizada com Sucesso!')
     }
   }
  })
  </script>

C�digo 9. Exemplo de um componente que utiliza o plugin Notify

A seguir vamos entender o que cada linha est� fazendo:

Linha 3: inserimos um bot�o (componente q-btn do Quasar), que ao ser clicado chama o m�todo showNotify;
Linha 8: importamos o plugin Notify;
Linha 19: criamos o m�todo showNotify, que ser� chamado pelo bot�o (q-btn);
Linha 20: chamamos o plugin Notify.create e passamos para ele a mensagem que queremos exibir.

Ao clicar no bot�o a mensagem vai aparecer na tela como pode ser visto na Figura 5.

Figura 5. Mensagem sendo exibida no navegador

Podemos tamb�m passar algumas configuraç�es para o plugin, como por exemplo, alterar a cor da notificaç�o como mostra o C�digo 10.


  Notify.create({
         type: "info",
         message: "Operaç�o Realizada com sucesso",
  });

C�digo 10. Alterando a cor da notificaç�o

Ou at� mesmo, a posiç�o da notificaç�o na tela, como mostra o C�digo 11.

Notify.create({
         position: 'top-right',
         type: "info",
         message: "Operaç�o Realizada com sucesso",
});

C�digo 11. Alterando a posiç�o da notificaç�o na tela

Veja exemplos de outras configuraç�es dispon�veis para o plugin notify:

icon: announcement - adiciona um icon � mensagem;
timeout: 2500 - � o tempo em milissegundos para a notificaç�o sumir;
html: true - caso queiramos usar HTML na mensagem;
progress: true - mostra uma barra de progresso de quando a mensagem desaparecer�.

Voc� pode consultar mais configuraç�es e exemplos na documentaç�o do Quasar.

Builds no Quasar

Como mencionado antes, o Quasar tem suporte para v�rias plataformas, e tem dois tipos de builds para cada uma delas (desenvolvimento e produç�o) e tudo � feito pela linha comando.

Veja os comandos usados para builds em desenvolvimento:

quasar dev - cria uma aplicaç�o padr�o em SPA;
quasar dev --port=8000 - define a porta;
quasar dev -m ssr - cria uma aplicaç�o SSR (server side render);
quasar dev -m pwa - cria uma aplicaç�o PWA (progressive web application);
quasar dev -m android - cria uma aplicaç�o Android;
quasar dev -m ios - cria uma aplicaç�o iOS;
quasar dev -m electron - cria uma aplicaç�o Electron.

Para criar aplicaç�es para produç�o s�o os mesmos comandos, s� que substitu�mos a palavra dev por build, exemplo: quasar build, que cria uma aplicaç�o SPA pronta para produç�o.

Conclus�o

O Quasar � a soluç�o n�mero 1 para projetos Vue.js, pois possui uma gama de componentes e suporte a v�rias aplicaç�es. Podemos construir PWA, SSR, aplicativos para Android e iOS com o mesmo c�digo e tudo atrav�s do seu CLI, com uma linha comando. Al�m disso, possui uma comunidade bastante ativa e tamb�m uma documentaç�o muito bem escrita, valendo a pena dar uma conferida.

Confira tamb�m

O que � Vue.js?

Curso

Sua primeira aplicaç�o

Curso

Apresentando o Node.js

V�deo

Conhe�a Quasar: framework Vue.js

Neste artigo iremos aprender sobre o Quasar, uma poderosa ferramenta baseada em Vue.js que nos permite criar aplicações híbridas (web, mobile, desktop, PWA) com apenas um código e sem precisar de bibliotecas pesadas para isso.