Vuetify 3 Enhancements Overview

Rate this content
Bookmark

Aprende sobre las nuevas características que llegarán a la próxima versión del marco de trabajo. Ve cómo el equipo central abordó la portabilidad de Vuetify de Vue 2 a la API de composición de Vue 3. Previsualiza las actualizaciones de las características principales, como el nuevo sistema de diseño, las metodologías de prueba mejoradas, las opciones de personalización ampliadas, las actualizaciones de las clases de utilidad CSS, y mucho, mucho más.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Viewtify 3 se lanzará en febrero del próximo año.

Viewtify 3 incluirá mejoras como nuevos conceptos de diseño normalizados, interfaces adicionales para una interacción más intuitiva, clases de utilidad para modificar componentes y un sistema de validación mejorado. También se ha trabajado en la usabilidad y la diversidad de estilos de los componentes.

En Viewtify 3, se han completado componentes básicos como alertas, banners, calificaciones, botones, chips, y avatares, entre otros, sumando un total de 42 componentes básicos.

La 'densidad' en Viewtify 3 es una característica que modifica la altura de los componentes, permitiendo que ocupen menos espacio vertical sin alterar su apariencia visual. Esto se combina con el tamaño para ofrecer más opciones como botones compactos de tamaño extra grande.

El nuevo sistema de validación de Viewtify 3 permite implementar validaciones no solo para componentes tipo formulario sino también en línea. Incluye funcionalidades para realizar validaciones asíncronas, expandiendo las posibilidades más allá de las opciones existentes en la versión anterior.

En Viewtify 3, el SAS se ha convertido en módulos para alinearse con las actualizaciones en el cargador de Vuetify y el nuevo plugin VITE. Esto simplifica la interfaz de usuario de SAS, resuelve problemas de contaminación de variables globales y mejora los tiempos de compilación al precompilar estilos para componentes específicos.

La versión alpha de Viewtify 3 está disponible en next.Viewtifyjs.com.

Puedes interactuar con el equipo de desarrollo de Viewtify 3 comunicándote a través de la comunidad de Discord en community.Viewtifyjs.com.

John Leider
John Leider
20 min
21 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hola, soy John Leader, el creador de Viewtify. Viewtify 3 es la próxima versión con nuevos conceptos de diseño, mejor usabilidad y compatibilidad con navegadores modernos. El marco de trabajo ha añadido nuevas características como un sistema de validación, diversidad de estilos, opciones de personalización semánticas y un concepto de densidad. Las opciones de personalización mejoradas, el rendimiento mejorado y el soporte avanzado de navegadores con variables CSS también son aspectos destacados de Viewtify 3.
Available in English: Vuetify 3: Titan

1. Introducción a Viewtify 3

Short description:

Hola, soy John Leader, el creador de Viewtify. Quiero hablar sobre Viewtify 3, la próxima versión con nuevos conceptos de diseño, mejorada usabilidad y compatibilidad con navegadores modernos. Hemos completado los componentes básicos y añadido nuevas interfaces y clases de utilidad para una interacción y personalización más sencillas.

Hola, mi nombre es John Leader. Soy el creador y autor de Viewtify. Y hoy quería tomar un poco de tiempo para hablar sobre Viewtify 3, la próxima versión que se lanzará en febrero del próximo año. Y, uh, algunos de los diferentes elementos y aspectos en los que el equipo ha estado trabajando mientras hemos estado avanzando a través de la alpha.

Algunas de las actualizaciones más grandes que tenemos están en la forma de la creación de la línea base de todos los componentes básicos de computación para el framework están dentro. Tenemos muchos nuevos conceptos de design normalizados en su, su terminología para que sean más semánticos y fáciles de trabajar. Tenemos interfaces adicionales que te permiten, uh, interactuar con los componentes de formas más intuitivas que te permiten, uh, obtener resultados más consistentes. Y también hemos estado trabajando mucho en la usabilidad real de las diversas partes del framework para facilitar su manipulación y trabajo con estilos personalizados, así como la forma en que se implementa en tu proyecto. Y algunas de las nuevas características del navegador que podemos aprovechar, uh, a medida que nos alejamos de la plataforma Internet Explorer 11.

¿De acuerdo? Entonces, algunos de los cambios y mejoras que tenemos provienen de los componentes mencionados al principio, los componentes básicos para el framework están todos completos. Estos son componentes que forman la base para implementaciones más grandes. Cosas como alertas y banners, calificaciones, así como alrededor de 42 otros componentes básicos que van desde botones hasta chips, avatares, que usamos para crear y construir algunos de los componentes de composición más complejos. Hemos añadido muchas nuevas interfaces para cómo puedes trabajar con estos diferentes componentes, cosas que simplifican la forma en que puedes interactuar y hacer diferentes elecciones y cambios de design dentro de esos componentes. También hemos añadido algunas clases de utilidad adicionales para ayudarte además de modificar componentes basados en sus estructuras de prop normales, pero también siendo capaz de hacer cambios adicionales con la ayuda de clases de utilidad para texto y color y diferentes transformaciones y demás.

2. Nuevas Características y Conceptos

Short description:

Una de las cosas que hemos añadido recientemente al framework es un nuevo sistema de validación que permite la validación en línea y las llamadas asíncronas. También hemos mejorado la diversidad de estilos de los componentes de entrada e implementado un sistema de posicionamiento de animación para menús y diálogos. Hemos introducido opciones de personalización semántica y un nuevo concepto llamado variantes, que permite estilos de diseño reutilizables en múltiples componentes. Además, hemos implementado el concepto de densidad del material design, que permite un mayor control sobre el tamaño del componente y el espacio vertical.

No. Una de las cosas que recientemente hemos incorporado en el framework en el que el equipo ha estado trabajando son los elementos de formulario y nuestros sistemas de validation. Tenemos un nuevo sistema de validation que se ha expandido y se ha añadido como un proveedor en línea disponible, como los llamamos, que te permite no solo implementar cualquier tipo de componente o elemento como un elemento validable hasta cierto punto, sino que también hemos añadido nueva funcionalidad para cómo puedes realizar la validation, incluyendo llamadas asíncronas además de la funcionalidad existente de la versión dos que está disponible hoy. Este sistema de validation está integrado en los nuevos componentes de formulario además de estar disponible en línea, como se muestra aquí a la derecha, donde ahora podemos tomar algo que anteriormente estaba codificado en las entradas y ahora es algo que es flexible y puede ser utilizado en varios lugares. También hemos trabajado mucho en mejorar la diversidad de estilos de los componentes de entrada con un nuevo concepto que está en el material design llamado densidad. Hablaré un poco más sobre eso más tarde.

Además de muchas de estas nuevas características y funcionalidades, todavía hemos portado todos los estilos existentes de la versión dos. Eso es además de las nuevas opciones disponibles para la densidad que hemos creado. Una de las cosas geniales que hemos implementado recientemente fue un sistema de posicionamiento de animation para cómo nuestros menús y nuestros diálogos son lo que normalmente llamamos componentes desmontables, cómo funcionan. Y una de las cosas nuevas que tenemos que se aplica a nuestro sistema es la forma en que los menús y los diálogos se animan cuando se hace clic en su activador es una transformación que se basa en la ubicación del activador. Así que como puedes ver en la animation aquí, cuando abrimos el diálogo, en lugar de ser un elemento que simplemente se anima desde el centro de la pantalla, ahora estamos transformando estos elementos desmontables desde su ubicación original del activador para mejorar realmente la sensación visual de la funcionalidad real, pero también para mejorar el performance y lo suave que es cuando estás trabajando con estos componentes para que haya una animation nítida, no hay temblores, y esta es una de mis partes favoritas de la nueva versión con todas las formas en que los menús también funcionan y cómo se posicionan en la pantalla. Tenemos mucha más funcionalidad que permite al usuario hacer diseños estéticos realmente agradables y decisiones dentro de su aplicación y simplemente dar al usuario más opciones en general.

Tenemos algunos conceptos normalizados que me gustaría llamar opciones de personalización semántica que hemos comenzado a normalizar o juntar múltiples aspectos diferentes de diseño dentro de beautify e intentar ponerlos bajo una categoría particular o opciones similares entre múltiples componentes. Así que cuando estás trabajando en el framework, tendrás diferentes componentes con los que estás trabajando, pero aún estarán basados en la misma interfaz con la que estás trabajando con múltiples componentes diferentes. Y lo que quiero decir con eso es que tenemos un nuevo concepto llamado variantes y lo que es, es una forma para nosotros de tomar algunas de nuestras propiedades y funcionalidades mutuamente exclusivas de diseño de la versión dos y ponerlas detrás de una convención de nombres para que podamos reutilizar esto a lo largo y expandir la funcionalidad que se utiliza o está disponible, perdón, para múltiples componentes diferentes.

Un ejemplo serían los cinco disponibles que existen principalmente en componentes basados en tarjetas son texto contenido, texto contorno y plano. Y estos diferentes estilos de diseño están representados en la versión dos, pero no están representados detrás de ninguna convención de nombres específica. Así que lo que hemos hecho es homogeneizar esta funcionalidad. Hemos hecho que sea reutilizable en cualquier componente de tipo tarjeta S como alertas. Hojas, banners, elementos de lista que te dan un control adicional sobre el, no solo el aspecto visual del componente, sino, uh, sabes, homogeneizando haciendo esto similar a través de múltiples implementaciones diferentes para que podamos, uh, tener una funcionalidad similar y la misma para múltiples componentes que ni siquiera tenían la capacidad de implementar estos estilos en la versión dos.

Una de las otras cosas que hemos implementado conceptualmente es, uh, la densidad del material design y lo que es la densidad, es una, uh, declaración de cuán alta o verticalmente, cuánto espacio ocupa un componente mientras que el tamaño modifica el relleno de los componentes, modifica el tamaño de la fuente y, y en general ocupa potencialmente un espacio mayor en el eje X, mientras que con la densidad, simplemente estamos reduciendo la altura. Así que lo que hemos hecho aquí es que hemos, hemos añadido la capacidad de combinar múltiples aspectos diferentes de tamaño que están disponibles en la versión dos del framework por ahora, tenemos, ya sabes, tamaño regular para extra pequeño, pequeño, por defecto, grande, extra grande. Con la introducción de la densidad para la versión tres, hemos tomado, algunos componentes con los que puedes haber trabajado que tenían una propiedad densa. Ahora se ha dividido en dos, que ahora son compactos y cómodos. Y estos son esencialmente iteraciones de ciertos píxeles, cuatro píxeles para ser exactos, que se reducen y escalan para que un botón o una entrada mantengan el mismo aspecto visual. Sin embargo, ocupará físicamente menos espacio vertical. Y luego para los componentes que soportan tanto el tamaño como la densidad, estos trabajan juntos. Así que puedes hacer cosas como tener un botón compacto extra grande. Si así lo eliges. Y lo que esto hace es que da muchas más opciones al usuario para poder construir su aplicación para que no tengas que tener un diseño tan voluminoso o algo que ocupa mucho espacio en la página.

Available in other languages:

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
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
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 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
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
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

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 Kuznetsov
Mikhail Kuznetsov
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
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
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.
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
JSNation 2022JSNation 2022
141 min
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
¡Nos encantan las aplicaciones web fáciles de crear y desplegar! Entonces, veamos qué puede hacer una pila tecnológica muy actual como Nuxt 3, Motion UI y Azure Static Web Apps. Podría ser perfectamente un trío de oro en el desarrollo web moderno. O podría ser una hoguera de errores y problemas. De cualquier manera, será una aventura de aprendizaje para todos nosotros. Nuxt 3 se lanzó hace apenas unos meses y no podemos esperar más para explorar sus nuevas características, como su compatibilidad con Vue 3 y el Motor Nitro. Agregamos un poco de estilo a nuestra aplicación con la biblioteca Sass Motion UI, porque el diseño estático está pasado de moda y las animaciones vuelven a estar de moda.Nuestra fuerza impulsora de la pila será Azure. Las aplicaciones web estáticas de Azure son nuevas, casi listas para producción y una forma ingeniosa y rápida para que los desarrolladores desplieguen sus sitios web. Así que, por supuesto, debemos probar esto.Con algunas Azure Functions esparcidas por encima, exploraremos lo que puede hacer el desarrollo web en 2022.
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.