Conheça o Vuetify, o framework para Material Design no Vue JS

Uma tendência que tem aumentado nos últimos anos é o uso de bibliotecas e frameworks CSS para o desenvolvimento de sites e sistemas de maneira mais rápida e otimizada. É bem provável que você já tenha ouvido falar ou até mesmo trabalhado com frameworks como Bootstrap, Materialize ou Bulma. Eles são uma prova dessa tendência e também mostram como tais frameworks podem nos ajudar bastante na questão da produtividade.

Também existem muitas bibliotecas que possuem esse mesmo objetivo, mas que são voltadas para frameworks JavaScript. Um exemplo disso é o Vuetify. Ele foi criado em 2016 com o objetivo de fornecer uma série de componentes estilizados para aplicações Vue JS, baseando-se no Material Design.

Neste artigo iremos aprender a instalar essa biblioteca em um projeto Vue, além de criar o nosso primeiro código com o Vuetify, que será uma tela de login em um sistema administrativo

Iniciando Novo Projeto

O Vuetify precisa ser adicionado a um projeto Vue. Por isso, iremos iniciar um novo projeto do zero com o vue-cli.

Para começar, vamos instalar a ferramenta Vue CLI, por meio do comando abaixo:

npm install -g @vue/cli

Com essa ferramenta de linha de comando instalada, podemos iniciar um novo projeto em Vue. Iremos criar um projeto chamado hcode-admin, executando o seguinte comando no Terminal:

vue create hcode-admin

Ao executar esse comando, o processo de criação será iniciado e precisaremos responder algumas perguntas. A primeira questão é se desejamos utilizar uma conexão mais estável para uma instalação mais rápida. Iremos digitar “Y” e pressionar Enter:

Em seguida iremos selecionar qual versão do Vue iremos utilizar, além das ferramentas que usaremos para a compilação do projeto. Iremos escolher a versão 2 pois, até a data deste artigo, o Vuetify não funciona com o Vue 3. Assim, basta pressionar Enter:

Com isso a criação de nosso projeto será iniciada:

Após alguns segundos, veremos a mensagem de sucesso abaixo:

Ela informa que a criação do projeto deu certo e agora estamos prontos para iniciar o seu desenvolvimento.

Adicionando o Vuetify ao Projeto

Iremos agora adicionar o Vuetify ao nosso projeto. Primeiramente iremos acessar a pasta do projeto com o comando cd hcode-admin.

Em seguida iremos executar o comando abaixo:

vue add vuetify

Um novo processo de instalação será iniciado e precisaremos responder algumas novas perguntas.

A primeira questão será se desejamos realizar a instalação sem antes adicionar os nossos arquivos ao Git. Iremos escolher “y” e pressionar Enter:

Em seguida precisamos escolher qual será o preset de nosso Vuetify. Vamos escolher o preset padrão. Assim, basta pressionar Enter:

O download e adição do Vuetify ao projeto serão iniciados. Após alguns segundos, veremos a mensagem abaixo:

Essa mensagem informa que a instalação do Vuetify foi um sucesso!

Podemos agora iniciar o servidor de nosso projeto. Para isso basta executar o seguinte comando:

npm run serve

Ao acessar o endereço http://localhost:8080/ em nosso navegador, veremos o seguinte resultado:

Vemos assim que o Vuetify já está sendo reconhecido em nosso projeto. Bem simples, não acha?

Vamos agora começar a desenvolver a estrutura de nosso formulário de login usando essa biblioteca

Conhecendo Primeiros Componentes do Vuetify

A primeira coisa que iremos fazer é excluir o arquivo de componente chamado HelloWorld.vue, localizado em src/components.

Em seguida iremos criar neste mesmo diretório um arquivo chamado AdminForm.vue. Esse nome segue a recomendação do próprio Vue de informar nomes compostos aos nossos componentes.

Além disso, é importante lembrar que uma aplicação Vue utiliza a estrutura de um Single File Component. Isso significa que o HTML, CSS e JavaScript do componente ficam no mesmo arquivo.

A estrutura HTML deste componente inicialmente será a seguinte:

<template>
    <v-container class="grey lighten-3" id="login-page">
        <v-row class="d-flex justify-center">
            <v-col
                cols="6"
            >
                <v-img src="../assets/hcode.svg" id="hcode-image"></v-img>
            </v-col>

        </v-row>
    </v-container>
</template>

Explicando: <template> é a tag usada pelo Vue para iniciar o HTML do componente. O componente <v-container> é usado para criar um container em nossa página, muito similar ao que já conhecemos do Bootstrap.

O componente <v-row> é usado para criar uma linha do Grid System em nosso site. Esse conceito é usado para organizar o conteúdo de nossa página em até 12 colunas, algo que também já é conhecido do Bootstrap. O componente <v-col> tem o objetivo de definir tais colunas. Para isso ele usa a propriedade cols, onde informamos o número de colunas que a linha irá possuir. Em nosso caso informamos o número 6, o que define que esse componente irá ocupar metade da área de nosso site. Mas, como definimos a classe d-flex e justify-center para o componente <v-row>, o Vuetify irá usar o conceito CSS de Flexbox para centralizar nosso conteúdo na página.

Também aproveitamos para definir o componente <v-img>, usado para renderizar uma imagem no navegador. Nós iremos usar uma imagem da Hcode para este exemplo.

Antes de realizar o nosso teste, vamos apenas adicionar alguns estilos aos nossos elementos, através da tag <style>, usada em um Single File Component para definir o CSS da página:

<style scoped>
    #login-page {
        margin-top: 10px;
    }
    #hcode-image {
        margin: 20px 0;
    }
</style>

Adicionamos o atributo scoped a essa tag para que apenas a página atual seja afetada pelos estilos e não a aplicação inteira.

Agora, ao acessar o nosso navegador, vemos o seguinte:

Excelente, nossa imagem e container já estão aparecendo!

Adicionando Tabs

É muito prático quando vemos em uma página de login tanto a opção para realizar o login como também para criar um novo usuário. Iremos fazer isso em nosso exemplo, criando abas, ou tabs, para essas ações.

O componente usado para isso é o <v-tabs>. Sua estrutura inicial será a seguinte:

<v-tabs
    fixed-tabs
    background-color="blue-grey lighten-5"
    color="black"
    v-model="tabsForm"
>

</v-tabs>

A propriedade fixed-tabs define que nosso componente irá ocupar completamente o espaço da tela em que ele está inserido. A propriedade background-color define a cor de fundo do elemento, que foi escolhida da paleta de cores do Vuetify. A propriedade color define a cor do texto.

A propriedade v-model é padrão do Vue. Neste contexto ela é usada para que a troca dos elementos ocorra de acordo com a aba que clicarmos.

Precisamos dessa forma criar uma propriedade em nossa instância do Vue chamada tabsForm. Podemos definir um valor nulo para ela. Nossa tag <script> ficará da seguinte forma:

<script>
    export default {
        name: 'AdminForm',
        data: () => ({
            tabsForm: null
        })
    }
</script>

Podemos agora adicionar os itens de nossas abas ao HTML. Para isso iremos utilizar o componente <v-tab>, no singular. As abas ficarão com a seguinte estrutura:

<v-tab
    key="register"
>
    Cadastrar
</v-tab>
<v-tab
    key="login"
>
    Fazer Login
</v-tab>

Uma propriedade importante que precisamos dar atenção é a propriedade key, pois ela será usada mais tarde para fazer a relação entre a aba de nossas tabs e seu conteúdo.

Até o momento nosso código está da seguinte forma:

Agora, ao acessar nosso projeto, vemos que ele está da seguinte forma:

Agora nossas abas estão corretamente definidas!

Criando Formulários de Cadastro e Login 

O próximo passo é criar a estrutura de nossos formulários e então relacioná-los com nossas abas.

Para isso iremos criar mais um componente <v-row>, que irá representar uma nova linha em nosso site. Dentro deste componente iremos fazer uso do componente <v-tabs-item>, que tem o objetivo de definir o conteúdo de nossas abas.

Nosso código ficará assim:

<v-row class="d-flex justify-center">
    <v-col cols="4">
        <v-tabs-items
            v-model="tabsForm"
            cols="3
        >
        </v-tabs-items>
    </v-col>
</v-row>

Perceba que novamente fizemos uso da propriedade v-model="tabsForm", para realizar a conexão entre as abas e seus respectivos conteúdos.

Vamos agora adicionar nosso primeiro item das abas, que será um formulário de cadastro. O conteúdo dessa estrutura será o seguinte:

<v-tab-item
    key="register"
>
    <v-form class="text-center grey lighten-3">

        <v-text-field
            v-model="name"
            label="Name"
            :rules="nameRules"
            required
        ></v-text-field>

        <v-text-field
            v-model="email"
            label="Email"
            :rules="emailRules"
            required
        ></v-text-field>

        <v-text-field
            v-model="password"
            label="Senha"
            type="password"
            :rules="passwordRules"
            required
        ></v-text-field>

        <v-btn
            color="success"
            class="justify-space-between"
        >
            Registrar
        </v-btn>

    </v-form>
</v-tab-item>

Explicando: a propriedade key usada no componente <v-tab-item> é usada para relacionarmos a primeira aba com o formulário de cadastro. O componente <v-fom> é usado para criar nosso formulário.

O componente <v-text-field> é usado para criar os inputs de nosso formulário, onde nosso usuário poderá informar seus dados.

Ao acessar nosso projeto novamente, vemos o seguinte resultado:

Nosso formulário foi criado com sucesso. Contudo, perceba que a validação de email não está funcionando, pois estamos informando um formato errado e nenhum erro é retornado. Para resolver essa questão, iremos fazer uso de uma propriedade chamada rules, que foi definida em nosso componente. Ela representa algumas regras para validação do formulário.

Iremos agora retornar ao nosso código e definir o seguinte na tag <script>:

nameRules: [
    value => !!value || 'O nome é obrigatório',
    value => (value && value.length >= 3) || 'O nome deve ter no mínimo 3 caracteres',
    value => (value &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; value.length <= 10) || 'O nome deve ter menos do que 10 caracteres'
],
emailRules: [
    value => !!value || 'O e-mail é obrigatório',
    value => /.+@.+\..+/.test(value) || 'O e-mail não é válido',
],
passwordRules: [
    value => !!value || 'A senha é obrigatória',
    value => (value &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; value.length >= 5) || 'A senha deve ter no mínimo 5 caracteres'
]

Cada array está identificado com o contexto em que sua validação será aplicada. Na validação nameRules estamos garantindo que o nome seja informado e tenha entre 3 e 10 caracteres. A validação emailRules certifica que o email seja informado e que possua o formato correto. E por fim a validação passwordRules garante que a senha será informada e que terá no mínimo 5 caracteres.

Com isso nosso código JavaScript ficará da seguinte forma:

Assim, ao acessar nosso site e informar dados inválidos, veremos um erro, como podemos ver na imagem abaixo:

Por fim precisamos apenas adicionar o segundo formulário à nossa lista de tabs. Iremos fazer isso com o seguinte código:

<v-tab-item
    key="login"
>

    <v-form class="text-center grey lighten-3">

        <v-text-field
            v-model="email"
            label="Email"
            :rules="emailRules"
            required
        ></v-text-field>

        <v-text-field
            v-model="password"
            label="Senha"
            type="password"
            :rules="passwordRules"
            required
        ></v-text-field>

        <v-btn 
            color="primary"
            class="justify-space-between"
        >
            Acessar
        </v-btn>

    </v-form>

</v-tab-item>

Perceba que esse formulário possui uma propriedade key diferente, pois se referencia a uma outra ação em nossa página. Contudo, ele está usando as mesmas funções de validação através da propriedade rules.

Quando acessamos novamente nosso projeto, vemos o seguinte resultado:

Dessa forma, se desejar mudar de uma aba para outra, irá funcionar normalmente ?!

Conclusão

Neste artigo criamos nosso primeiro projeto usando o Vuetify. Você pode conferir o código desenvolvido em nosso GitHub.

Esperamos que essa matéria possa ter te ajudado a entender o que é essa biblioteca e como ela pode nos ajudar em nossos projetos em Vue. Se desejar aprender mais sobre esse incrível framework, não deixe de conferir nosso Curso Completo de Vue JS ?.

Até o próximo artigo!