Conoce Vuetify, el marco para Material Design en Vue JS

Una tendencia que ha aumentado en los últimos años es el uso de bibliotecas y frameworks CSS para el desarrollo de sitios y sistemas de manera más rápida y optimizada. Es muy probable que ya hayas oído hablar o incluso trabajado con frameworks como Bootstrap, Materialize o Bulma. Ellos son una prueba de esta tendencia y también muestran cómo tales frameworks pueden ayudarnos mucho en cuestión de productividad.

También existen muchas bibliotecas que tienen este mismo objetivo, pero que están orientadas a frameworks JavaScript. Un ejemplo de esto es Vuetify. Fue creado en 2016 con el objetivo de proporcionar una serie de componentes estilizados para aplicaciones Vue JS, basándose en Material Design.

En este artículo aprenderemos a instalar esta biblioteca en un proyecto Vue, además de crear nuestro primer código con Vuetify, que será una pantalla de inicio de sesión en un sistema administrativo.

Iniciando Nuevo Proyecto

Vuetify necesita ser agregado a un proyecto Vue. Por eso, iniciaremos un nuevo proyecto desde cero con vue-cli.

Para comenzar, vamos a instalar la herramienta Vue CLI, a través del siguiente comando:

npm install -g @vue/cli

Con esta herramienta de línea de comandos instalada, podemos iniciar un nuevo proyecto en Vue. Crearemos un proyecto llamado hcode-admin, ejecutando el siguiente comando en la Terminal:

vue create hcode-admin

Al ejecutar este comando, se iniciará el proceso de creación y necesitaremos responder algunas preguntas. La primera pregunta es si deseamos usar una conexión más estable para una instalación más rápida. Vamos a escribir “Y” y presionar Enter:

A continuación, seleccionaremos qué versión de Vue deseamos usar, además de las herramientas que utilizaremos para la compilación del proyecto. Elegiremos la versión 2, ya que, hasta la fecha de este artículo, Vuetify no funciona con Vue 3. Así que simplemente presionaremos Enter:

Con esto, la creación de nuestro proyecto será iniciada:

Después de algunos segundos, veremos el mensaje de éxito a continuación:

Informa que la creación del proyecto fue exitosa y ahora estamos listos para iniciar su desarrollo.

Agregando Vuetify al Proyecto

Ahora vamos a agregar Vuetify a nuestro proyecto. Primero, accederemos a la carpeta del proyecto con el comando cd hcode-admin.

A continuación, ejecutaremos el comando a continuación:

vue add vuetify

Se iniciará un nuevo proceso de instalación y necesitaremos responder algunas nuevas preguntas.

La primera pregunta será si deseamos realizar la instalación sin antes agregar nuestros archivos a Git. Elegiremos “y” y presionaremos Enter:

A continuación, necesitamos elegir cuál será el preset de nuestro Vuetify. Vamos a elegir el preset por defecto. Así que simplemente presionaremos Enter:

La descarga y adición de Vuetify al proyecto serán iniciadas. Después de algunos segundos, veremos el mensaje a continuación:

Este mensaje informa que la instalación de Vuetify fue un éxito!

Ahora podemos iniciar el servidor de nuestro proyecto. Para eso, simplemente necesitamos ejecutar el siguiente comando:

npm run serve

Al acceder a la dirección http://localhost:8080/ en nuestro navegador, veremos el siguiente resultado:

Así vemos que Vuetify ya está siendo reconocido en nuestro proyecto. Muy simple, ¿verdad?

Ahora vamos a comenzar a desarrollar la estructura de nuestro formulario de inicio de sesión utilizando esta biblioteca.

Conociendo Primeros Componentes de Vuetify

La primera cosa que vamos a hacer es eliminar el archivo de componente llamado HelloWorld.vue, localizado en src/components.

A continuación, crearemos en este mismo directorio un archivo llamado AdminForm.vue. Este nombre sigue la recomendación del propio Vue de informar nombres compuestos a nuestros componentes.

Además, es importante recordar que una aplicación Vue utiliza la estructura de un Single File Component. Esto significa que el HTML, CSS y JavaScript del componente están en el mismo archivo.

La estructura HTML de este componente inicialmente será la siguiente:

<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: