PrimeVue | La biblioteca de componentes de interfaz de usuario de próxima generación

Rate this content
Bookmark

PrimeVue es una popular biblioteca de componentes de interfaz de usuario para Vue 3 que cuenta con más de 80 componentes, modo sin estilo con presets de Tailwind CSS, propiedades de paso, tematización agnóstica al diseño, iconos, bloques y plantillas.

PrimeVue es una de las bibliotecas de interfaz de usuario más populares en el ecosistema de Vue.

La charla comienza con una descripción general del conjunto de características y se adentra en los detalles de cada uno de los puntos de contenido a continuación:

- Descripción general

- Mejores prácticas de desarrollo de componentes de interfaz de usuario

- Suite de componentes - API de paso

- Tematización agnóstica al diseño

- Modo sin estilo

- Presets de Tailwind CSS

- Iconos/Bloques/Plantillas

- Generación de temas desde Figma

- Hoja de ruta

Çağatay Çivici
Çağatay Çivici
24 min
25 Apr, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

PrimeVue es una completa suite de componentes de interfaz de usuario con más de 90 componentes, incluyendo selectores de fecha, botones, tablas y cuadrículas. Ofrece flexibilidad a través de modos estilizados y sin estilo, permitiendo la personalización mediante tokens de diseño o Tailwind. PrimeVue cumple con WCAG y admite el diseño Material. La próxima versión 4 introduce una nueva API de tematización utilizando variables CSS, e incluye características como el cambio de modo oscuro y la integración con Figma. El equipo tiene planes de lanzar un Diseñador de IU, componentes avanzados y un Constructor de IU de arrastrar y soltar en el futuro.

1. Introducción a Prime Vue

Short description:

Hola, bienvenidos a la presentación sobre Prime Vue, la suite de componentes de interfaz de usuario de próxima generación. Tenemos más de 90 componentes, incluyendo selectores de fecha, botones, tablas y cuadrículas. También ofrecemos accesibilidad incorporada, modos estilizados y sin estilo, plantillas de Vue.js, bloques de Prime y un kit de interfaz de usuario de Figma. La mayoría de estos son gratuitos y de código abierto bajo la licencia MIT. Nuestro modelo de negocio se basa en complementos. Prime Vue es la biblioteca de interfaz de usuario más completa y sigue mejorando.

En esta charla, cubriré Prime Vue y cómo Vue.js nos ayudó a construir esta biblioteca de interfaz de usuario completa.

Entonces, sobre Prime Tech, la empresa detrás de Prime Vue, en realidad somos un proveedor de bibliotecas de componentes de interfaz de usuario, eso es lo único que hacemos. Comenzó con Prime Faces para Java, y ahora tenemos la versión de Angular, Prime NG, Prime React y finalmente, el tema de hoy, Prime Vue. En total, tenemos más de 150 millones de descargas en todo el mundo, y nuestras bibliotecas se están volviendo cada vez más populares cada día. Estos son de código abierto, gratuitos de usar y nuestro modelo de negocio se basa en algunos complementos.

Entonces, lo que tenemos en Prime Vue, tenemos más de 90 componentes, desde selectores de fecha, hasta botones, hasta componentes avanzados como tablas y cuadrículas, y también tenemos la accesibilidad incorporada en la que hemos trabajado arduamente. Además, ofrecemos el modo estilizado y el modo sin estilo. El modo estilizado es la biblioteca de interfaz de usuario regular que proporciona temas persistentes. Y el modo sin estilo te permite abordarlo de la manera que desees para darle estilo. También tenemos las plantillas de Vue.js en caso de que desees comenzar algo listo y bloques de Prime, más de 400 bloques en caso de que desees copiar y pegar secciones de interfaz de usuario en tus páginas para construir la tuya propia. Y para tus diseñadores, tenemos el Kit de interfaz de usuario de Figma. Así que muchas cosas. Y la mayoría de estos están bajo la licencia MIT, toda la biblioteca de componentes está bajo la licencia MIT, y los complementos pagados son como esos bloques y plantillas de Vue.js, por lo que no hay barrera de pago. Así que creo que es la biblioteca de interfaz de usuario más completa en este momento, y cada día mejora más y más.

2. Explorando las características de Prime Vue

Short description:

Hemos estado trabajando en Prime Vue desde 2008 y ha evolucionado para cubrir una amplia gama de requisitos. Con el Modo sin estilo y el Modo estilizado, puedes personalizar los componentes según tus necesidades. La biblioteca ofrece eventos, devoluciones de llamada y plantillas para una fácil integración de la interfaz de usuario. Admite el modo sin cabeza para reemplazar la interfaz de usuario predeterminada y puedes dar estilo a los componentes con Tailwind o cualquier otro marco preferido. Hay más de 90 componentes gratuitos disponibles, con licencia MIT, con un enfoque en la accesibilidad. Tenemos nuestro propio sistema de diseño y también admitimos el diseño Material. La biblioteca cumple con WCAG y proporciona soporte de teclado y compatibilidad con lectores de pantalla. La elección entre el modo estilizado y sin estilo depende de tus preferencias.

Entonces, comencemos esto, quiero decir, hemos estado trabajando en esta biblioteca de interfaz de usuario desde 2008, así que 16 años ahora, y hemos visto muchas tendencias venir y pasar. Y la pregunta sigue siendo, ¿qué hace que un componente de interfaz de usuario sea bueno? Y la respuesta es que no hay una única respuesta, en realidad. Lo que funciona para alguien puede no funcionar para otra persona. Así que hemos adoptado un enfoque diferente con Prime Vue. Intentamos cubrir mucho terreno. Por eso introdujimos el Modo sin estilo y el Modo estilizado. Pero en su núcleo, tenía que ser accesible. Tenía que ser personalizable porque estás creando estos componentes no para ti mismo, no para un requisito específico, sino para uso público, uso común. Así que tiene que cubrir muchos requisitos. Proporcionamos muchos eventos, devoluciones de llamada para que te conectes y muchas plantillas para proporcionar tu propia interfaz de usuario. La mayoría de los componentes proporcionan el modo sin cabeza, para que puedas reemplazar la interfaz de usuario personalizada. Y en caso de que estés usando algo como Tailwind, también puedes darles estilo con Tailwind. O si te gusta algo más, quiero decir, es realmente, realmente flexible y bastante completo, como mencioné. Así que más de 90 componentes, desde tablas hasta menús desplegables, calendarios, todos estos son gratuitos y con licencia MIT. Tenemos nuestro propio sistema de diseño, pero también puedes usarlo con otro estilo, como mencioné, de lo cual hablaré en detalle.

Lo principal es la accesibilidad. Quiero decir, creo que es algo pasado por alto, en su mayoría por los autores de bibliotecas de componentes de interfaz de usuario, desafortunadamente, pero hay leyes y muchos requisitos específicos últimamente. Y hemos invertido mucho tiempo, un par de meses en esto para cumplir con WCAG. Utilizamos HTML semántico tanto como podemos. Si eso no funciona, si es demasiado limitante, recurrimos a filas de área y atributos. Y en cuanto a los colores, nos aseguramos de que los colores cumplan con los requisitos de accesibilidad. Y el soporte de teclado es para usuarios que no pueden usar los punteros y el mouse, o simplemente prefieren usar el teclado. Los lectores de pantalla también están disponibles en caso de que tu usuario requiera un lector de pantalla para interactuar con tu página. Y eso es lo principal al respecto. Prime Vue está diseñado para ser accesible. Verás que algunas bibliotecas de componentes dependen de ciertos estilos, como Material, pero en Prime Vue, tenemos nuestro propio diseño. Pero también puedes cambiarlo a otro diseño, como Material. De hecho, tenemos temas para el diseño Material y también un par de temas basados en lo que ha creado nuestro equipo de diseño. Y la pregunta sigue siendo, ¿estilizado o sin estilo? Esa es la pregunta común que recibimos constantemente. El modo estilizado te proporciona componentes preestablecidos para elegir.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
Cuando pensamos en Vuex, Pinia, o tiendas en general, a menudo pensamos en la gestión de estado y los patrones Flux, pero no solo las tiendas no siempre siguen el patrón Flux, ¡hay mucho más en las tiendas que las hace valer la pena usar! Plugins, Devtools, renderizado en el lado del servidor, integraciones TypeScript... Vamos a sumergirnos en todo más allá de la gestión de estado con Pinia con ejemplos prácticos sobre plugins y Devtools para sacar el máximo provecho de tus tiendas.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Explica sobre la refactorización del código base de NuxtJS y los desafíos que enfrenta para implementar Vue 3, Vite y otros paquetes.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 puede sonar aún nuevo para muchos usuarios, pero en realidad ya ha sido lanzado hace más de un año. ¿Cómo evolucionó Vue 3 durante este período? ¿Por qué tardó tanto en ponerse al día el ecosistema? ¿Qué aprendimos de este proceso? ¿Qué viene después? ¡Discutiremos estas preguntas en esta charla!
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
React Advanced Conference 2021React Advanced Conference 2021
47 min
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
Top Content
Los sistemas de diseño buscan aportar consistencia al diseño de una marca y hacer que el desarrollo de la interfaz de usuario sea productivo. Las bibliotecas de componentes con una API bien pensada pueden facilitar esto. Pero, ¡a veces una elección de API puede accidentalmente sobrepasar y ralentizar al equipo! Hay un equilibrio allí... en algún lugar. Exploremos algunos de los problemas y posibles soluciones creativas.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
Rust es un nuevo lenguaje para escribir código de alto rendimiento, que puede ser compilado a WebAssembly, y ejecutado dentro del navegador. En esta charla se te guiará sobre cómo puedes integrar Rust, dentro de una aplicación Vue, de una manera que es sencilla y fácil. Con ejemplos de cómo interactuar con Rust desde JavaScript, y algunas de las trampas a tener en cuenta.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
El creador de Vue js da una actualización sobre las nuevas características de la tecnología.

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Construye un Tablero Rico en Datos y Hermoso con la Rejilla de Datos de MUI X y Joy UI
React Summit 2023React Summit 2023
137 min
Construye un Tablero Rico en Datos y Hermoso con la Rejilla de Datos de MUI X y Joy UI
Top Content
WorkshopFree
Sam Sycamore
Siriwat (Jun) Kunaporn
2 authors
Aprende cómo utilizar el ecosistema completo de MUI para construir un tablero de gestión de proyectos hermoso y sofisticado en una fracción del tiempo que tomaría construirlo desde cero. En particular, veremos cómo integrar la Rejilla de Datos de MUI X con Joy UI, nuestra biblioteca de componentes más nueva y hermana del estándar de la industria Material UI.
Tabla de contenidos:- Presentando nuestro proyecto y herramientas- Configuración de la aplicación e instalación del paquete- Construcción del tablero- Prototipado, estilos y temas - Características de Joy UI- Filtrado, ordenación, edición - Características de la Rejilla de Datos- Conclusión, pensamientos finales, P&R
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.
Construyendo aplicaciones GraphQL de pila completa con Hasura y Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Construyendo aplicaciones GraphQL de pila completa con Hasura y Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
El ecosistema frontend avanza a un ritmo frenético. Este masterclass tiene como objetivo equipar a los participantes con una comprensión del estado del ecosistema Vue 3 + GraphQL, explorando ese ecosistema - prácticamente y a través del desarrollo de aplicaciones de pila completa.

Tabla de contenidos
- Los participantes utilizarán Hasura para construir una API GraphQL en tiempo real respaldada por Postgres. Juntos recorreremos su consumo desde un frontend y haremos que el frontend sea reactivo, suscrito a los cambios de datos.
- Además, analizaremos las herramientas comúnmente utilizadas en el stack Vue GraphQL (como Apollo Client y Urql), discutiremos algunas alternativas menos conocidas y abordaremos los problemas frecuentemente encontrados al comenzar.
- Se describirán varios patrones para gestionar datos con estado y sus compensaciones durante el masterclass, y se mostrará una implementación básica para cada patrón discutido.
Nivel del masterclass

NOTA: No se requiere experiencia previa con GraphQL, pero puede ser útil para ayudar a la comprensión. Se cubrirán los fundamentos.