Vuetify y Vue aplicaciones profesionales

Cuando te decides a programar una aplicación en Vue, una de las siguientes preguntas que te haces es cómo vas a diseñar tus interfaces. En este artículo se habla de Vuetify como herramienta para diseñar interfaces de usuario vistosas y profesionales junto a Vue.

Introducción

Vuetify es un framework CSS diseñado para ser utilizado con Vue.Js. Este framework sigue los patrones de Material Design especificados por Google. El framework te proporciona un listado de herramientas muy extenso para poder crear tus aplicaciones con un diseño muy atractivo y visual.

Código

Instalación de Vuetify

En primer lugar hay que instalar Vuetify en el proyecto.

npm add vuetify --save

El segundo punto es decirle a Vue que utilice Vuetify. Este código se debe de añadir en el fichero principal del proyecto (main.js).

// main.js

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

Por último, hay que tener en cuenta que para que funcionen todos los componentes de Vuetify correctamente, hay que añadir el componente <v-app>. Es cierto que no todos necesitan de este componente inicial, pero es recomendable utilizarlo como raíz para utilizar el resto de componentes.

<v-app>
  <!-- All components... -->
</v-app>

Utilizar componentes Vuetify

En el ejemplo que se presenta a continuación, se puede ver cómo se utilizan algunos de los componentes de Vuetify. Este ejemplo es un diseño sencillo y rápido de una tarjeta que contiene una imágen, un título y dos botones de acciones.

Los componentes utilizados de Vuetify en el ejemplo son: App, Container, Btn, Card, Img, Spacer y algún slot auxiliar del componente Card.

¿Por qué utilizar Vuetify?

Comunidad activa

Este framework puede presumir de tener una comunidad muy activa. Te ayudan a solucionar tus problemas con soporte online, sin necesidad de esperar a respuestas como antiguamente en Stack Overflow. Esto se consigue con un chat online en donde cualquiera puede preguntar y responder en tiempo real. Además, muchas veces los propios desarrolladores del framework están dando soporte.

Actualizaciones continuas

Puedo decir por experiencia propia que desde que utilizo este framework ha habido un listado de mejoras constantes. Semanalmente se realizan actualizaciones. Además, la mejor noticia es que el número de versión que hace referencia a resolver errores crece muy poco frente al número que especifica nuevas funcionalidades. Esto se traduce en una mejora constante en sus componentes y también en que se incrementa el listado de componentes disponibles.

Sintaxis semántica

Vuetify está construido desde inicio con una serie de patrones de nomenclatura bien definidos y cada uno de los componentes o propiedades se han nombrado con de forma natural. De esta forma, la sintaxis es fácil de recordar y aprender.

Todas estas características se traduce en que los nuevos desarrolladores se pueden incorporar rápidamente y ser productivos. Es más, cuando se introducen nuevos componentes, la mitad de sus propiedades ya las conoces de otros componentes de la librería y comprendes su funcionamiento sin necesidad de leer la documentación.

Soporte para SSR y PWA

Esta librería también da soporte al Server Side Rendering. Si estás preodupado en el posicionamiento de tu página web, puedes estar seguro de que no hay ningún problema con los componentes de la librería. Además, si la aplicación la haces junto a Nuxt.Js, la integración es muy sencilla y el SSR es bastante transparente sin necesidad de
configuraciones complejas .

Conclusión

Voy a ser muy breve, esta librería te permite realizar componentes en Vue de una forma muy sencilla y expresiva. Esto significa que tus interfaces van a tener un aspecto profesional sin necesidad de tener un conocimiento avanzado de CSS. Por lo tanto, la recomiendo encarecidamente para utilizarla junto a VueJs.