Las mejores nuevas bibliotecas de interfaz de usuario de Vue 3 de 2021

- Andrés Cruz

Las mejores nuevas bibliotecas de interfaz de usuario de Vue 3 de 2021

Este artículo es una continuación de mi artículo anterior que muestra una lista de nueve magníficos marcos de interfaz de usuario de Vue 3. Estos marcos mejoran la experiencia de desarrollo, la capacidad de mantenimiento y el diseño final de su aplicación Vue.

Hoy hablaré sobre otros cinco marcos de interfaz de usuario de Vue 3 que nos ofrece un conjunto de componentes con un buen diseño listos para trabajar que ayudarán a crear interfaces sin esfuerzo o sus propios componentes. Además, algunos de estos marcos vienen con funciones, complementos y directivas que pueden abstraer toda una capa de complejidad en su interfaz de usuario, como la carga diferida, el desplazamiento infinito y la eliminación de rebotes, por nombrar algunos.

Oruga UI

Oruga
Oruga

La interfaz de usuario de Oruga  ha estado enviando componentes livianos y discretos desde Vue 2, una buena tendencia que continúa en la nueva versión de Vue 3.

Oruga proporciona componentes que se centran en la funcionalidad en lugar del estilo, lo que lo convierte en una base sólida sobre la que puede construir sus propios componentes.

En su sitio web, Oruga adopta una filosofía única: "[Queremos] que se concentre solo en los aspectos de UI/UX de su aplicación y que sea totalmente flexible a los cambios futuros sin tener que tocar una línea de JavaScript".

Esto ilustra que Oruga proporciona un entorno sin opiniones en el que puedes construir lo que quieras. Llevaron este pensamiento al siguiente nivel al proporcionar un interruptor de CSS en su sitio web; esta palanca tiene la capacidad de habilitar y deshabilitar su CSS personalizado en los documentos, lo que le permite ver componentes sin ninguno de los estilos predeterminados aplicados.

Seleccionaría Oruga como marco si estoy buscando un buen paquete de componentes extremadamente personalizables en los que pueda aplicar mi propio estilo o sistema de diseño. Además, incluso si quiero editar los estilos predeterminados, Oruga lo permite con un montón de variables CSS esperando recibir estilos personalizados para anular o mejorar. Oruga brinda una gran experiencia en términos de configuración y personalización.

Vuestic UI

Vuestic

Vuestic es conocido por crear uno de los paneles de administración de código abierto más hermosos para Vue. Se destacan en la escritura de código Vue mantenible y en la elaboración de componentes e interfaces ingeniosas.

El equipo ha anunciado recientemente la interfaz de usuario de Vuestic, su marco de interfaz de usuario de Vue 3, que contiene todos los componentes utilizados en la popular interfaz de usuario de administración de Vuestic y mucho más. Vuestic enfatiza su soporte listo para usar para la navegación con teclado, una característica apreciada en la comunidad frontend debido a la UX que proporciona.

Vuestic proporciona más de 50 componentes con características únicas y amplia capacidad de configuración. Con un diseño receptivo, estos componentes se adaptan a casi todas las pantallas. Vuestic se envía con soporte de traducción sin problemas y accesibilidad de teclado en todo el marco.

Vuestic ya se ha establecido como uno de los marcos de interfaz de usuario de Vue 3 más agradables estéticamente con su catálogo de hermosos componentes. Ahora están en buen camino para crear componentes mucho más complejos, como un selector de fechas o una tabla de datos, que seguramente se verá tan ingenioso como sus ofertas actuales.

Vuestic se adaptará perfectamente a su aplicación si desea crear componentes atractivos y funcionales. Los componentes responden por diseño y encajarán con cualquier tema gracias al alto nivel de personalización.

Native UI

Native UI VUE
Native UI VUE

Naive UI se anunció modestamente al mundo en Twitter, luego el creador de Vue lo retuiteó, lo que atrajo mucho tráfico a esta nueva biblioteca de componentes. Ahora, Naive UI tiene 4.7k estrellas bien merecidas en GitHub en menos de tres meses de existencia.

Incluye más de 70 componentes extremadamente bien elaborados que pueden adaptarse perfectamente a casi cualquier tipo de aplicación Vue 3. Los componentes de Naive son eficientes, extremadamente personalizables y cuentan con soporte TypeScript de primera clase para ofrecer una excelente experiencia de desarrollo.

El sitio web de documentación es fácil de navegar y tiene entradas de personalización completas para ayudar a los desarrolladores a obtener una vista previa de cómo se verán los componentes dentro de su propio tema. Puede jugar con las opciones para crear su propio tema completo con patrones de color y fuentes. Este tema personalizado se puede descargar y agregar fácilmente a su aplicación para anular los valores predeterminados.

Dentro de la gran biblioteca de componentes de Naive, todos ellos se pueden sacudir en forma de árbol, admiten temas oscuros y claros, y brindan accesorios y eventos extensos para crear un esqueleto para su propio componente complejo o para integrarse sin problemas en su propia aplicación.

Naive incluye casi todo lo que uno puede necesitar para desarrollar una aplicación madura de Vue 3. Cada componente es rápido y consistente, y los componentes de visualización de datos se envían con excelentes capacidades de carga diferida.

Seleccionaría Naive para potenciar mi aplicación Vue sin comprometer la velocidad ni ninguno de mis componentes existentes.

Varlet UI

Varlet UI es una biblioteca de componentes móviles de Material Design para Vue 3. Se puede considerar como una versión compatible y orientada a dispositivos móviles del conocido marco de interfaz de usuario de Vuetify.

Varlet se envía con 40 componentes livianos y de alta calidad, y cuenta con excelente compatibilidad con TypeScript, SSR e internacionalización. Varlet se apoya en Material Design, que ya está muy bien establecido en experiencias móviles, dando a sus usuarios un paso adelante en el proceso de aprender cómo funcionan los componentes.

Los componentes de Varlet son ligeros y accesibles. Además, Varlet ofrece una guía de configuración de IDE y una extensión para mejorar la productividad del desarrollador.

Varlet es mi elección si me gustaría tener componentes de diseño de materiales hermosos y responsivos con un sesgo hacia las interfaces de usuario móviles.

Vant UI

Vant UI ofrece más de 65 componentes ligeros y reutilizables. Los componentes de Vant son conocidos por estar adaptados para uso móvil y por su capacidad de ser totalmente personalizables. Vant es un fuerte competidor del marco Ionic, que ofrece componentes raros como entradas de contraseña, cuentas regresivas, extracción para actualizar, notificaciones y más.

Después de navegar por el catálogo de componentes de Vant, está claro que se enfocan en dispositivos más pequeños pero se mantienen lo suficientemente flexibles como para extenderse a las aplicaciones web.

Vant tiene un extenso sitio web de documentación, que presenta numerosas demostraciones, API de eventos, API de tragamonedas, ejemplos de código e incluso casos extremos. Vant también ofrece componentes escritos para ayudar a completar el código y admite SSR, temas e internacionalización, lo que lo convierte en una solución infalible para la mayoría de los desarrolladores.

Vant sería increíble si alguna vez necesitas crear una aplicación que se vea genial en dispositivos móviles. Estos componentes encajan perfectamente en cualquier PWA y hacen que su aplicación web se sienta nativa sin muchas complicaciones.

Conclusión

A medida que Vue crece exponencialmente, genera orgánicamente mejores bibliotecas y marcos debido al hecho de que los autores tienen una API poderosa, de alto rendimiento y extensa en la que apoyarse. Ahora los desarrolladores pueden idear formas más ingeniosas para facilitar la creación de interfaces de usuario al tiempo que rompen la mayoría de los límites que encontraron anteriormente.

Debido al agudo enfoque de Vue hacia los detalles que más importan a los desarrolladores frontend (experiencia del desarrollador, rendimiento, reactividad y administración de estado, por nombrar algunos), es seguro decir que vale la pena monitorear de cerca todo el ecosistema de Vue en los próximos años.

Articulo original;
https://blog.logrocket.com/best-new-vue-3-ui-libraries-2021/

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.