A lo largo de estos últimos meses, he escrito diversos artículos en este blog sobre VueJS, pero no he precisado de ningún framework específico de VueJS para el front-end, y en este caso, el que he utilizado casi desde el principio ha sido Vuetify, que no es sino un entorno de componentes Material Design para hacer más sencillo el desarrollo de tus apps con VueJs.
La versión 1.x
Hasta hace bien poco, la versión 1.x era la que estaba operativa, y la que siempre he utilizado, pero desde final de Julio de 2019 ya está publicada la versión 2, con nuevas mejoras. De momento, cómo la que conozco es la versión 1, es de la que hablaré en esta entrada.
Básicamente, Vuetify se caracteriza por incluir una hoja de estilos y código Javascript. Es bastante libiana, sobre todo, en comparación con el rendimiento que ofrece. En realidad, tiene varias partes importantes, que lo pueden hacer similar a Bootstrap (otro clásico de manejandodatos.es), en especial el tema del grid, pero también tiene diferencias, como es la disponibilidad de ciertos componentes, listos para usar y muy en la onda de VueJS.
Aunque en las primeras versiones, muchas de las posibilidades eran “copias” de Bootstrap, con el paso de las versiones han ido desarrollando nuevas cosas y dejando obsoletas otras. Una de ellas es el caso de Jumbotrons, obsoletos.
Cómo empezar con el framework Vuetify
Sin duda, la mejor forma de empezar a trabajar con Vuetify es con algunos formatos preparados (application layouts), donde te descargas el código completo, y a partir de ahí, vas creando tu propo estilo. Dispone de varios modelos, desde formularios de login, a dashboards de varios estilos casi listos para empezar a complicar con tus componentes.
Parece una “chorrada” eso de empezar copiando, pero a la larga, es la mejor forma de comprender cómo funciona lo más básico de Vuetify para que tu aplicación te quede perfecta!
Lo que más me ha gustado
Sin duda, disponer de una paleta increible de colores junto con Material Design son los puntos fuertes de este framework, además de tener preparado un buen número de componentes, algunos más simples, y otros bastante complejos. Personalmente, me ha gustado los badgets, todo lo relativo a formularios, en especial, los pickers de fechas, y lo fácil que es crear menus.
La versión 2 del framework Vuetify
Sin duda, un acierto este framework que tiene cambios sustanciales en la versión 2, y que aún no he utilizado. El motivo es que la compatibilidad entre versiones no es inmediata y cambian muchas cosas, desde el setup hasta la implementación en VueJS.
En mi caso, no sólo es la configuración porque no he utilizado herramientas de NodeJS, sino el acceso a las librerias directamente, lo que dificulta la tarea.
Cómo dicha migración no es inmediata, debo de reconocer que han trabajado muy mucho la información de errores, y que en pocas semanas han ido corrigiendo problemas iniciales de la versión 2 que los usuarios reportan. El proyecto está más vivo que nunca, con multitud de nuevas propuestas, y mejorando cosas, y sobre todo, haciendo fácil tareas complejas, algo que es de valorar, como los parallax o carruseles, botones flotantes, y muchas cosas más.
En los próximos artículos relacionados con VueJS, sí que haré uso de Vuetify (puedes seguir también con la parte 2 y la parte 5 de mejoras), y podrás leer con ejemplo incluido, cómo utilizar alguna de las plantillas predefinidas de Vuetify para tus necesidades.
Happy coding!