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: