Sadot Hernández

En los últimos años, Vue.js ha avanzado firmemente, convirtiéndose en un fuerte competidor para competir con Angular y React. Si observamos el crecimiento de Vue, se relaciona con la simplicidad del framework, la disponibilidad de bibliotecas, componentes y materiales de aprendizaje para fortalecer el ecosistema. Además, Vue también viene con un buen conjunto de bibliotecas de componentes de interfaz de usuario para elegir.

Este artículo se centrará en 2 excelentes bibliotecas de componentes de interfaz de usuario creadas para Vue, que se destacan del resto.

Vuetify

Source: https://vuetifyjs.com/en/

Vuetify es otro framework UI de usuario basado en Vue.js, y proporciona un conjunto de componentes claros y reutilizables para que los desarrolladores creen soluciones con una agradable experiencia de usuario. Al igual que, Bootstrap Vue, Vuetify es compatible con casi todos los navegadores web y ofrece templates para desarrollo web, aplicaciones web progresivas, desarrollo móvil y también para el desarrollo de aplicaciones de escritorio.

Vuetify sigue los estándares del diseño de materiales.

Sin embargo, para algunos, estos estándares pueden parecer un poco estrictos. Además, practicar el diseño de materiales trae algunas ventajas como la reutilización y la estandarización de estilos para los usuarios. Aparte de eso, Vuetify proporciona un conjunto de diseños dinámicos para personalizar su aplicación y variables SASS para personalizar componentes.

Si consideramos las estadísticas de GitHub, Vuetify tiene más de 27900 estrellas en su repositorio con más de 550 colaboradores. Taigbot, qfl-stack, FinTech Consortium, Bitting bit son algunas de las empresas líderes que utilizan Vuetify como su marco de interfaz de usuario.

• Pros
  • Componentes reutilizables.
  • Gran variedad de componentes.
  • Compatibilidad del navegador.
  • Diseños de materiales.
  • Gran comunidad y buena documentación.
  • Actualizaciones constantes.

• Contras
  • Si no le gustan mucho el material designs que ofrece, es posible que Vuetify no sea la mejor opción.
  • La personalización es un poco más complicada.

Bootstrap Vue

Source: https://bootstrap-vue.org/

Bootstrap se puede nombrar como el framework de front-end más famoso utilizado en sitios web y aplicaciones web. BootstrapVue es una versión personalizada de bootstrap que fue desarrollada para Vue JS. BootstrapVue contiene más de 85 componentes, más de 45 complementos, directivas, temas y más de 1100 íconos disponibles. BootstrapVue también incluye una implementación detallada del componente bootstrap 4 y el sistema de cuadrículas.

Ser parte de la familia Bootstrap le ha permitido a BootstrapVue usar elementos de arranque regulares como componentes de Vue.

Si estas familiarizado con Bootstrap, la curva de aprendizaje será relativamente corta y obtendrá una ventaja en su uso.

Ophigo, Channext Platform, Keymentics pueden ser reconocidas como las principales empresas que utilizan BootstrapVue, y el repositorio de GitHub tiene más de 12000 estrellas con casi 300 colaboradores bajo su nombre.

• Pros
  • Diseño receptivo para dispositivos móviles.
  • Peinado rápido y sencillo.
  • Solo puede importar componentes, grupos, componentes y directivas específicos.
  • Marcado automatizado de accesibilidad WAI-ARIA.
  • Funcionalidades modernas adquiridas de Bootstrap.
  • Cree temas con variables SCSS y opciones globales.
  • Gran comunidad y documentaciones.

• Contras
  • La personalización es un poco más complicada.

Comparando las Bibliotecas

Después de revisar las características de estás dos bibliotecas, estas bibliotecas brindan un conjunto de servicios en común o similar para uso general. Si estás buscando una biblioteca de interfaz de usuario para un proyecto Vue.js a pequeña escala o personal, cualquiera de ellas le conviene. Además, hay algunas características avanzadas que debemos tener en cuenta cuando se trata de proyectos a gran escala.

Source: https://vuetifyjs.com/en/introduction/why-vuetify/

De acuerdo con la comparación anterior, podemos ver que Vuetify es la mejor opción para aplicaciones a gran escala o de nivel empresarial, mientras que BootstrapVue asegura el segundo lugar.

Sin limitarnos a la comparación anterior, veamos algunas estadísticas de las tendencias de GitHub y NPM.

Source: https://www.npmtrends.com/vuetify-vs-bootstrap-vue

El gráfico anterior muestra las estadísticas de las tendencias de NPM donde podemos ver el número de descargas de cada paquete de NPM durante los últimos 6 meses. Podemos ver claramente que Vuetify y BootstrapVue se han descargado de igual manera.

En general, lo que puedo concluir es que Vuetify sería la mejor opción para tu proyecto Vue JS si está familiarizado con Material UI. De lo contrario, será mejor optar por BootstrapVue.