VueJS + Vuetify: Crea interfaces de usuario reutilizables
En este post te ayudaremos a conocer, una de las librerías más utilizadas, del framework Vue.js. Uno de los más utilizados entre la comunidad de desarrolladores. Seguramente sabrás que Vue.js es un framework de JS, muy conocido por su versatilidad y facilidad de aprendizaje.
Vue.js está especialmente enfocado a la creación de interfaces de usuario y se encuentra entre los frameworks de frontend más utilizados, compitiendo en cuota de mercado con otros, muy conocidos, como Angular o React.
Por otro lado, Vue.js presenta multitud de bibliotecas que añaden o amplían funcionalidades. Estas nuevas características nos ayudan a abstraernos del código, puramente nativo, y a desarrollar aplicaciones con más calidad, rapidez y sobre todo creando componentes reutilizables. Este es el caso de una de sus bibliotecas más famosas, Vuetify, especialmente diseñada para la creación de interfaces de usuarios.
En definitiva, para el desarrollo frontend, cada día tiene menos sentido codificar HTML, JS, y CSS en estado puro, pues con los frameworks se realizan aplicaciones más robustas escalables, y en menor tiempo. Estos framework se organizan en componentes, una especie de plantillas que están listas para usar, que simplemente debemos adaptar a las necesidades y funcionalidades de la aplicación.
Obviamente, como desarrollador debes conocer las bases del desarrollo, incluso llegará el momento de modificar los diferentes componentes para cumplir con las necesidades que se planteen. Los frameworks han llegado para quedarse, al menos en la rama frontend, y pronto todo desarrollador deberá trabajar con uno o varios de ellos, si realmente quiere progresar en el mundo IT.
Qué es Vue.js y por qué es tan popular
Vue.js es un framework open source de JavaScript, que nos permite la creación de interfaces de usuario y aplicaciones de una sola página (single-page application o SPA, en inglés), de una forma muy sencilla. Fue creado, o desarrollado, por un ex empleado de Google, Evan You, en el año 2014. Con respecto a otros frameworks, la curva de aprendizaje es baja, si conoces los fundamentos de JavaScript. Además, es muy sencillo de utilizar ya que podemos utilizar este framework simplemente con la inclusión de sus dependencias mediante CDN.
Una de las características fundamentales de Vue.js es el trabajo con componentes. Un componente Vue.js, es un elemento en el cual se encapsula código reutilizable. Dentro de cada componente podemos encontrar fragmentos de código HTML, JavaScript o CSS. Esta característica permite modular los proyectos, haciendo muy fácil la escalabilidad de los mismos. Así mismo, si surge la necesidad, se puede reemplazar un componente por otro de una forma muy simple.
Otras de las características que definen a Vue.js, es la reactividad. La aplicación reacciona al cambio de eventos modificando el DOM de nuestra página, todo esto sin que sea necesaria la recarga de la página. Aspecto fundamental en la mejora de usabilidad y experiencia de los usuarios.
Aunque pienses que otros frameworks ya poseen estos aspectos, Vue.js se ha vuelto tan popular porque ha sabido implementar lo mejor de otros frameworks, eliminado todo aquello que no aporta valor. Dejando libertad a los desarrolladores para personalizar totalmente los proyectos, generando un mayor control. Como beneficio directo, disponemos de aplicaciones muy livianas con una velocidad de carga mucho superior a otros proyectos realizados en otros frameworks.
Qué es Vuetify
Vuetify es una biblioteca de Vue.js destinada a la creación de interfaces de usuario que implementa componentes de usabilidad listos para usar, combina las bondades de Vue.js y Material Design.
Material Design es una norma para el diseño enfocado en la visualización en móviles con el sistema operativo Android, además de su implementación en plataformas web. Esta norma fue implementada por Google en junio de 2014. La unión de estas dos tecnologías, permiten acelerar el desarrollo de aplicaciones web complejas, incorporando una gran cantidad de componentes.
Vuetify ordena el layout de nuestra página mediante el sistema grid, el cual se ajusta a una gran cantidad de resoluciones de pantalla. Dispone de una enorme librería de componentes que incluye elementos desde botones, sliders, diferentes tipos de inputs, a componentes más avanzados como card, que nos permitirán habilitar toda una serie de componentes para interactuar con los usuarios.
Todos los componentes pueden configurarse con distintas opciones para cambiar por completo su estética y comportamiento. Existe una gran variedad de configuraciones, con diferentes funciones para ordenación de componentes, estilos de texto, colores, iconos, sombras, diálogos, animaciones, incluso funciones de soporte touch, para dispositivos móviles.
El objetivo primordial de este framework es proporcionar a los desarrolladores las herramientas que necesitan para crear experiencias de usuario enriquecedoras y atractivas.
De otro lado, Vuetify adopta un primer enfoque de diseño móvil, lo que significa que la aplicación simplemente funciona de inmediato, ya sea en un teléfono, tableta u ordenado de escritorio.
Los datos del repositorio de GitHub, muestran el gran interés y nivel de actividad que presenta esta librería en la comunidad de desarrolladores frontend. Con más de 5.000 forks y 31.000 estrellas, que muestran el gran interés de esta librería entre la comunidad de desarrolladores frontend.
Además, cuenta con decenas de sponsors, muchas de ellas empresas reputadas del sector, que realizan donaciones para garantizar la evolución de este proyecto y su continuidad. Estas circunstancias aportan grandes garantías a los desarrolladores web en cuanto a mantenimiento y evolución se refiere. Por último, tiene el respaldo de una comunidad muy activa, a la que podemos recurrir si tenemos dudas o sugerencias.
Cómo instalar Vuetify en Vue.js
Una de las ventajas de Vuetify y Vue.js es la facilidad de integración, instalación y uso, en unos pocos pasos tendrás listo tu proyecto para empezar a codificar.
Si necesitas implementar Vuetify en un proyecto Vue.js, tienes varias formas, aunque para entornos de producción la integración mediante CDN está desaconsejada.
Instalación mediante Vue.js Cli
Si utilizas Vue.js Cli (interfaz de línea de comandos Vue.js), solo debes teclear en la terminal, el siguiente comando:
vue.js create my-app
Después debes agregar al directorio del proyecto, y añadir Vuetify, tecleando el comando:
vue add Vuetify.
Listo, ya disponemos Vuetify, como se puede apreciar es fácil y muy rápido.
Instalación mediante Vue.js UI
Vuetify también puede ser instalado mediante Vue.js UI, la nueva aplicación de interfaz de Vue.js Cli. Para utilizar este método simplemente teclea el siguiente comando en la terminal de comandos.
vue ui
Se abrirá una nueva ventana en tu navegador, buscamos en la opción de plugin el término Vuetify, hacemos clic y comenzará la instalación.
Instalación mediante Webpack
Como sabrás muchos desarrolladores utilizan webpack como una herramienta de compilación. Lo que nos permite añadir en un archivo todas las dependencias a los elementos que forman parte de tu proyecto de desarrollo.
Para instalar Vuetify dentro de webpack, en primer lugar, necesitamos añadir las dependencias de nuestro proyecto:
yarn add Vuetify
# OR
npm install Vuetify
yarn add sass@~1.32 sass-loader deepmerge -D
# OR
npm install sass@~1.32 sass-loader deepmerge -D
Una vez instaladas, debemos localizar el fichero webpack.config.js, dentro de nuestro directorio de trabajo, y copiar el siguiente código:
module.exports = {
module: {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'Vue.js-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader@^7.0.0
options: {
implementation: require('sass'),
indentedSyntax: true // optional
},
// Requires >= sass-loader@^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
indentedSyntax: true // optional
},
},
},
],
},
],
}
}
Posteriormente, creamos un fichero de plugin para Vue.js en la ruta: src/plugins/Vuetify.js con el siguiente contenido:
import Vue.js from 'Vue.js'
import Vuetify from 'Vuetify'
import 'Vuetify/dist/Vuetify.min.css'
vue.js.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
If using Vuetify-loader use the content below:
// src/plugins/Vuetify.js
import Vue.js from 'Vue.js'
import Vuetify from 'Vuetify/lib'
vue.js.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Navega hasta el punto de entrada de tu aplicación y realiza la instancia del objeto Vuetify:
import Vue.js from 'Vue.js'
import Vuetify from '@/plugins/Vuetify' // path to Vuetify export
new Vue.js({
Vuetify,
}).$mount('#app')
Y listo, ya tienes otra forma, eso sí un poco más larga, de disponer de Vuetify en tu proyecto de Vue.js.
Integrar Vuetify mediante un CDN
Simplemente agregamos en nuestro código HTML las dependencias al CDN, algo parecido a este código, en el que se integra tanto Vue.js como Vuetify por CDN.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/Vuetify@2.x/dist/Vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>Hello world</v-container>
</v-main>
/v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/Vue.js@2.x/dist/Vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/Vuetify@2.x/dist/Vuetify.js"></script>
<script>
new Vue.js({
el: '#app',
Vuetify: new Vuetify(),
})
</script>
</body>
</html>
Esta última opción está desaconsejada en entornos de producción, debido a la gestión de de dependencias por futuras actualizaciones, versiones, etc. Para un entorno de aprendizaje o pruebas es más que satisfactorio.
Componentes Vuetify
Los componentes de Vuetify son la unidad básica de trabajo, este framework tiene una serie de componentes predefinidos, que nos ayudan a crear diferentes botones y bloques que ayudan a crear interfaces de usuario más intuitivas y altamente atractivas para los usuarios de nuestra aplicación.
En este sentido, en la página oficial del proyecto Vuetify, se puede obtener información de los diversos componentes junto a opciones de configuración y personalización.
En este post mostramos varios ejemplos, para que puedas evaluar su potencialidad.
Tarjetas o cards
Son un elemento de usabilidad básico, nos ayudan a organizar el contenido y mostrar información a los usuarios de una forma limpia y concisa. Este es un ejemplo básico de tarjeta o Card en Vuetify, que implementar la v-card de Vue.js, ampliando sus funcionalidades.
Para añadir este componente, en nuestro proyecto Vue.js simplemente agregamos las siguientes líneas de código.
<v-card
disabled
elevation="2"
></v-card>
<template>
<v-carousel v-model="model">
<v-carousel-item
v-for="(color, i) in colors"
:key="color"
>
<v-sheet
:color="color"
height="100%"
tile
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
Slide {{ i + 1 }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</template>
La inclusión de elementos de Vuetify no puede ser más simple, y esto solo es el principio, pues podemos configurar absolutamente todo, de una forma sencilla y rápida, y sobre todo reutilizable, porque podemos crear componentes personalizados que podemos utilizar en multitud de vistas.
Carrousel
El componente v-carousel expande el componente de v-window de Vue.js, proporcionando funciones adicionales destinadas a mostrar imágenes funciones de deslizamiento y animación.
Para agregar un componente de tipo Carrusel, simplemente hay que agregar el siguiente código:
<template>
<v-carousel v-model="model">
<v-carousel-item
v-for="(color, i) in colors"
:key="color"
>
<v-sheet
:color="color"
height="100%"
tile
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
Slide {{ i + 1 }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</template>
Calendar
El componente v-calendar se utiliza para mostrar información en una vista diaria, semanal, mensual o de categoría.
¿Cuántas veces, hemos desarrollado, una aplicación de tareas y hemos visto la complejidad de trabajar con tareas, eventos, incluyendo librerías externas y teniendo que leer toda la documentación?
Con Vuetify, este aspecto está solucionado, la creación de un calendario de eventos con filtros, ordenación, … de forma compleja como la siguiente imagen, suponen la adición de, aproximadamente, unas 60 líneas de código a nuestro proyecto.
Tablas
El componente v-data-table se utiliza para mostrar datos en forma de tablas. Las características incluyen clasificación, búsqueda, paginación, edición de contenido y selección de filas. Todo esto de una forma muy sencilla y sin necesidad de recursos externos.
Obtener una tabla como la que muestra la siguiente imagen es muy sencillo, obteniendo funciones avanzadas de forma automática:
Estos ejemplos muestran las potencialidades de Vuetify y sus componentes, así como la facilidad de integración. Con unas pocas líneas dispondremos en nuestra aplicación de estructuras de manejo de la información complejas, olvidándonos de incluir librerías externas, junto a su configuración e incrementando considerablemente el tamaño. la complejidad y mantenimiento de nuestra aplicación. Todos estos componentes disponen de un alto grado de personalización, que permite adaptarlo a nuestro proyectos y necesidades.
Recursos para Vuetify
Para terminar Vuetify, dispone de una zona de recursos, algunos de pago y otros gratuitos. Se pueden encontrar kit de desarrollos, prototipos en Figma o incluso dashboards completos para su uso, además podemos obtener recursos premium o con características avanzadas a un precio muy competitivo, y que otorga la base para adaptarlo a tus necesidades y funcionalidades.
Por ejemplo, se ofrece este dashboard gratuito, con una gran cantidad de características ya implementadas, que permite disponer de una base bastante potente para desarrollar nuestra interfaz de usuario:
¿Recuerdas que una de las bondades de vuetify era que funciona para multitud de dispositivos?
Aquí tienes este ejemplo, para la resolución de pantalla de un iPhone X, perfecta para su utilización en dispositivos móviles.
En este post, te hemos ofrecido una breve introducción a Vue.js y a la librería o framework, para la creación de interfaces de usuario, Vuetify. El área del desarrollo Frontend no para de crecer y, cada vez más, es posible la creación de proyectos complejos con unas pocas líneas de código.
¿Cuántas veces hemos desarrollado una aplicación y no hemos contemplado el diseño responsive hasta el final? Pues este aspecto lo puedes olvidar con esta librería, por defecto ya está preparado para la visualización en todo tipo de dispositivos de forma correcta.
¿Te surgen dudas? La comunidad Vue.js es una de las más activas en la red, con múltiples recursos y canales de comunicación, no tendrás problemas en crear casi cualquier aplicación que te plantees.
Por último, te recordamos que en OpenWebinars dispones de cursos sobre Vue.js que te ayudarán a introducirte en el mundo del desarrollo frontend.
También te puede interesar...
Curso de Introducción al diseño de interfaz de Usuarios (UI)
Este curso de UI es una completa introducción al diseño de la interfaz de usuario, que te permitirá aprender las bases del diseño visual y …
