Name: Vue.js Live 2024
Start: 2024-04-25T13:45:00.000Z
End: 2024-04-26T18:00:00.000Z

Sumergámonos en cómo funciona Pinia bajo el capó construyendo nuestro propio `defineStore()`. Durante este masterclass cubriremos algunos conceptos avanzados de Vue como la inyección de dependencias y los scopes de efectos. Esto te dará una mejor comprensión de la API de Composición de Vue.js y Pinia. Requisitos: experiencia en la construcción de aplicaciones con Vue y su API de Composición.

Construyendo Pinia desde cero

Reactive and ref are both reactive in Vue, allowing objects to be reactive and removing the need for writing 'value'. Store to refs is a specific version of refs in Vue. The exercises are located in the 'exercises' folder and include automated tests. Implementing FX scope in Vue allows for refactoring and better code organization. Weak maps are used for resource disposal and dependency injection is useful for resolving prop drilling issues.

Let's dive into how Pinia works under the hood by building our own `defineStore()`. During this workshop we will cover some advanced Vue concepts like dependency Injection and effect scopes. It will give you a better understanding of Vue.js Composition API and Pinia. Requirements: experience building applications with Vue and its Composition API.

Building Pinia From Scratch

Eduardo San Martin Morote

Presentamos "Masterclass de Desarrollo Web 3D con TresJS", un taller especializado creado para desarrolladores de Vue.js ansiosos por explorar el mundo de la gráfica 3D en sus aplicaciones web. TresJS, un potente renderizador personalizado para Vue, está diseñado específicamente para funcionar perfectamente con el sistema reactivo de Vue. Este taller ofrece una inmersión profunda en la integración de visualizaciones 3D sofisticadas y experiencias interactivas directamente en aplicaciones Vue, aprovechando las fortalezas únicas de los ecosistemas de Vue y TresJS. <span style="color:rgb(13, 13, 13);font-family:Söhne, ui-sans-serif, system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, Ubuntu, Cantarell, &quot;Noto Sans&quot;, sans-serif, &quot;Helvetica Neue&quot;, Arial, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;font-size:16px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-weight:400;letter-spacing:normal;orphans:2;text-align:start;text-indent:0px;text-transform:none;widows:2;word-spacing:0px;-webkit-text-stroke-width:0px;white-space:normal;background-color:rgb(255, 255, 255);text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial;display:inline !important;float:none">Este taller está diseñado para desarrolladores de Vue.js que buscan ampliar sus habilidades en la tercera dimensión, diseñadores de UI/UX interesados en incorporar elementos 3D en aplicaciones web, y desarrolladores front-end curiosos sobre el potencial de la gráfica 3D para mejorar las experiencias de usuario. Debes estar familiarizado con Vue.js para aprovechar al máximo este taller. Lo que Aprenderás- Introducción a TresJS: Descubre los fundamentos de TresJS y cómo se integra con el ecosistema de Vue para dar vida a la gráfica 3D.- Creación de Escenas 3D con Vue: Aprende a construir escenas 3D complejas utilizando componentes Vue, mejorando tus interfaces de usuario con visuales dinámicos e inmersivos.- Interactividad y Animación: Domina las técnicas para hacer tus escenas 3D interactivas, respondiendo a las entradas del usuario para una experiencia cautivadora.- Integración con Funcionalidades de Vue: Explora la integración avanzada de TresJS con la reactividad, los composables y la tienda Vuex de Vue para gestionar el estado en aplicaciones web 3D.- Rendimiento y Mejores Prácticas: Obtén información sobre la optimización de tus escenas 3D para el rendimiento y las mejores prácticas para mantener aplicaciones web fluidas y receptivas.

Masterclass de Desarrollo Web 3D con el ecosistema de TresJS: Un taller de Vue.js

Welcome to the Trust.js workshop where we'll cover the fundamentals of the library, creating 3D scenes, using components and composables, and adding interactivity. We'll explore topics such as camera manipulation, object creation and modification, working with materials and lighting, and animating objects. Additionally, we'll learn how to import 3D models and programmatically create instances. The workshop provides practical exercises to follow along with and resources for further learning.

Introducing "Mastering 3D Web Development with TresJS," a specialized workshop crafted for Vue.js developers eager to explore the realm of 3D graphics within their web applications. TresJS, a powerful custom renderer for Vue, is specifically designed to work seamlessly with Vue's reactive system. This workshop offers a deep dive into integrating sophisticated 3D visualizations and interactive experiences directly into Vue applications, leveraging the unique strengths of both Vue and TresJS ecosystems. <span style="color:rgb(13, 13, 13);font-family:Söhne, ui-sans-serif, system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, Ubuntu, Cantarell, &quot;Noto Sans&quot;, sans-serif, &quot;Helvetica Neue&quot;, Arial, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;font-size:16px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-weight:400;letter-spacing:normal;orphans:2;text-align:start;text-indent:0px;text-transform:none;widows:2;word-spacing:0px;-webkit-text-stroke-width:0px;white-space:normal;background-color:rgb(255, 255, 255);text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial;display:inline !important;float:none">This workshop is designed for Vue.js developers looking to expand their skill set into the third dimension, UI/UX designers interested in incorporating 3D elements into web applications, and front-end developers curious about the potential of 3D graphics in enhancing user experiences. You'll need to be familiar with Vue.js to benefit from this workshop fully. What You Will Learn- Introduction to TresJS: Discover the fundamentals of TresJS and how it integrates with the Vue ecosystem to bring 3D graphics to life.- Creating 3D Scenes with Vue: Learn to construct intricate 3D scenes utilizing Vue components, enhancing your user interfaces with dynamic and immersive visuals.- Interactivity and Animation: Master the techniques to make your 3D scenes interactive, responding to user inputs for a captivating user experience.- Integrating with Vue Features: Explore advanced integration of TresJS with Vue’s reactivity, composables, and the Vuex store to manage state in 3D web applications.- Performance and Best Practices: Gain insights into optimizing your 3D scenes for performance and best practices to maintain smooth, responsive web applications.

Mastering 3D Web Development with TresJS ecosystem: A Vue.js Workshop

Alvaro Saburido

Panel Discussion: What's the big next step for Vue/Nuxt?

Maya Shavin

Konstantin BIFERT

Daniel Roe

Alexander Lichter

Vue fue anunciado públicamente por primera vez en 2014 y cumple 10 años este año! En esta charla, echaremos un vistazo juntos a cómo ha cambiado y evolucionado desde sus humildes comienzos, discutiremos algunos de los desafíos y aprendizajes, y cómo pensamos en su futuro.

10 Años de Vue: el Pasado y el Futuro

Hello everyone and welcome to Vue.js Live 2024. In this Talk, Evan Yew, the creator of Vue and Vite, shares a 10-year retrospective on Vue.js, discussing its history, technical impact, and how it is being kept alive. Vue has made significant contributions to the JavaScript ecosystem and is the only mainstream framework that remains independent. The latest release, Vue 3.4, introduced performance improvements and a more efficient reactivity system. Future plans include reactivity efficiency improvements, stabilizing reactive props, and exploring vapor mode. Vue is here to stay and will continue to support the community.

Vue was first publicly announced in 2014 and is 10 years old this year! In this talk, we will take a look back together at how it changed and evolved from its humble beginnings, discuss some of the challenges and learnings, and how we think about its future.

10 Years of Vue: the Past and the Future

Evan You

Exploraremos las novedades de Nuxt 4 y las decisiones arquitectónicas que hemos tomado para hacerlo 'un mejor martillo', sin importar el tipo de proyecto al que te enfrentes. Mi objetivo es crear algo útil para cualquier persona, incluso si no utiliza Nuxt. Así que vamos a reflexionar sobre la filosofía del framework e inspirar a las personas con lo que hay debajo del capó.

Construyendo un Mejor Martillo - La Historia de Nuxt 4

Nuxt is a framework for building web apps using Vue and Nitro, driven by a vibrant open source community. Nuxt 4 aims to make the framework more usable and extensible, while focusing on collaboration rather than competition. The modules ecosystem and pluggable architecture enhance Nuxt's functionality and customization options. Nuxt prioritizes user choice and aims for stability and reliability. Nuxt 4 introduces thoughtful breaking changes and is eagerly anticipated by the community.

We'll explore what's new in Nuxt 4, and the architectural decisions we've made to make it 'a better hammer', no matter what kind of project you're facing. I'm aiming for something useful for anyone, even if they don't use Nuxt. So thinking about framework philosophy, and inspiring people with what's under the hood.

Building a Better Hammer - The Story of Nuxt 4

Como desarrolladores, generalmente tenemos que desarrollar rápido y debido a eso, algunos aspectos de calidad del software como el rendimiento, la accesibilidad o la seguridad pueden verse afectados. Configurar aplicaciones web para protegerlas contra amenazas comunes y hackers es difícil. Y por eso, puedes usar Nuxt Security -> un módulo para Nuxt que te ayudará a construir aplicaciones más seguras sin necesidad de configuración adicional.En esta charla, te guiaré a través de los conceptos de seguridad en las aplicaciones web modernas y OWASP para ayudarte a construir aplicaciones Vue y Nuxt más seguras.

Aplicaciones Vue y Nuxt más seguras - Por defecto

Handling security in front-end development is crucial, and the OWASP Top 10 is a valuable resource for secure coding. The list of security risks is constantly evolving, and the Nuxt security module provides features like security headers, rate limiting, and cross-site request forgery protection. Frontend developers should prioritize security to avoid information leaks and mitigate risks. Understanding the difference between public and private tokens is important for secure token handling.

As developers we usually have to develop fast and because of that some Software Quality aspects such as Performance, Accessibility or Security can suffer. Configuring web applications to be protected against common threats and hackers is difficult. And that is why, you can use Nuxt Security -&gt; a module for Nuxt that will help you build more secure applications without additional configuration needed! In this talk, I will guide you through the concepts of Security in modern web applications and OWASP to help you build more secure Vue &amp; Nuxt applications!

More Secure Vue & Nuxt Apps - By Default

Jakub Andrzejewski

Exploraremos cómo crear sistemas de software más resilientes utilizando técnicas API-first. Al utilizar la herramienta de pruebas de contrato Specmatic y el ejecutor de pruebas Playwright, podemos desarrollar pruebas que aseguren que nuestras aplicaciones Nuxt funcionen perfectamente y se comuniquen correctamente con los Microservicios en los que confían para obtener datos. Analizaremos más de cerca cómo escribir especificaciones OpenAPI que nos ayuden a documentar nuestras APIs y nos permitan asegurarnos de que funcionen correctamente. Además, podemos utilizar esas especificaciones para generar automáticamente un servidor ficticio, que podemos utilizar para probar nuestra aplicación en un entorno controlado con Playwright. Las técnicas que te mostraré te ayudarán a escribir pruebas que te permitan iterar rápidamente sin temor a regresiones. Resultados del aprendizaje: 1. Conocerás los principios básicos de las Pruebas de Contrato y cómo también ayudan a impulsar nuestras pruebas de extremo a extremo. 2. Sabrás optar por las Pruebas de Contrato al trabajar con Microservicios y BFFs, la siembra de la base de datos al usar Nuxt con una base de datos, y la simulación al tratar con SPAs. 3. Conocerás los pasos para crear tu primera especificación OpenAPI e integrar Specmatic con Playwright o Cypress, y estarás deseoso de aplicar esta técnica en tus proyectos.

No Más Mocking! Mejora tus Pruebas Para tu Aplicación Nuxt con Pruebas de Contrato

A single-page application utilized a server-side BFF layer to simplify authentication and data customization. Testing a BFF-based architecture involves contract testing and tool usage. Challenges arise when mocking server-to-server requests in a client-side and server-side architecture. Separate tests should be written for client-side and server-side components, with contract testing to ensure compatibility. Integration testing for the front-end and server-side can be done by replacing microservices with a sub-server.

Let's explore how to create more resilient software systems employing API-first techniques. By utilizing the contract testing tool Specmatic and the Playwright test runner, we can develop tests that ensure our Nuxt applications work perfectly and communicate correctly with Microservices they rely on to get data. We will take a closer look at how to write OpenAPI specifications that aid us in documenting our APIs and enable us to ensure they work correctly. Furthermore, we can use those specifications to automatically spin up a stub server, which we can use to test our application in a controlled environment with Playwright. The techniques I'll show you will help you write tests that enable you to rapidly iterate without fearing regressions. Learning Outcomes: 1. You know about the basic principles of Contract Testing and how it also helps drive our E2E tests. 2. You know to opt for Contract Testing when working with Microservices and BFFs, database seeding when using Nuxt with a database, and mocking when dealing with SPAs. 3. You know the steps to create your first OpenAPI specification and integrate Specmatic with Playwright or Cypress, and you are keen to apply this technique to your projects.

No More Mocking! Write Better Tests For Your Nuxt Application With Contract Tests

Markus Oberlehner

La obtención de datos es una parte crítica de las aplicaciones web modernas. Es un problema complejo que ha sido (parcialmente) resuelto de muchas formas diferentes. En esta charla, exploraremos la nueva API de Cargadores de Datos para Vue Router, cómo se compara con las soluciones existentes y cómo puede simplificar en gran medida la obtención de datos en tus aplicaciones Vue.

Cargadores de datos: Mejorando la obtención de datos en Vue

Data loaders provide a solution for complex and repetitive data fetching in Vue.js applications. Using data loaders allows for more independent data fetching and integrates with the navigation cycle. The data loader plug-in adds a navigation guard for data fetching and loading. Lazy loading and caching can be implemented using Pina Colada and Glada loaders. These loaders can improve the performance and speed of data fetching in applications.

Data fetching is a critical part of modern web applications. It's a complex problem that has been (partially) solved in many different ways. In this talk, we'll explore the new Data Loaders API for Vue Router, how it compares to existing solutions, and how it can greatly simplify data fetching in your Vue applications.

Data Loaders - Elevating Data Fetching in Vue

<div>En caso de que no lo sepas, shadcn (creador de `ui.shadcn`) ha creado una nueva forma para que los desarrolladores construyan bibliotecas de componentes. En lugar de una biblioteca de componentes habitual, donde estás limitado al estilo de los componentes, props o eventos diseñados por el autor, ahora tienes la capacidad de modificar los componentes para adaptarlos a tus necesidades.</div><div>Cito al propio shadcn, "Es una colección de componentes reutilizables que puedes copiar y pegar en tus aplicaciones."</div><div> </div><div>En esta charla, mostraré el poder de este enfoque, explicaré cómo personalizarlo y por qué ha ganado tanta popularidad en los últimos meses.</div>

Construye tu propia biblioteca de componentes, con `Shadcn-vue`

Shed CN Vue is a component library that allows for easy customization of components and styling. It is built on top of RedixView, which enables the use of primitives and element customization. Tailwind CSS is used for easy customization of layout, styling, animations, classes, and icons. The documentation provides more details on how to leverage these features.

<div>In case you are unaware, shadcn (creator of `ui.shadcn`) created a new way for devs to build component libraries. Instead of a usual component library, where you are limited to the component styling, props, or events designed by the author, you now have the capability to modify the components to suit your needs.</div><div>Quote from the shadcn himself, "It's a collection of re-usable components that you can copy and paste into your apps."</div><div> </div><div>In this talk, I will be showcasing the power of this approach, walking through how to customize it, and why it has gained such a popularity in the recent months.</div>

Build Your Own Component Library, With `Shadcn-vue`

Zernonia Kong

No es común que las personas que intentan ingresar al desarrollo web literalmente aprendan a partir de HTML/CSS o flujos de trabajo de "crear xyz" donde de repente aparecen 25 archivos después de ejecutar un comando y no hay forma de comprender lo que acaba de suceder. El aprendizaje debe ser diseñado y adaptado a la forma de aprender de cada uno, de lo contrario todos somos perros fingiendo ser ovejas en un establo de caballos (literalmente no es absurdo en absoluto). Exploraremos cómo pasé de pensar que las marquesinas eran geniales (aún lo son, créeme) a ser una persona que puede construir aplicaciones web con personas que tienen experiencia en desarrollo web igual a mi edad. Compartiré mis aprendizajes, descubrimientos, lecciones, cómo hacerlo y especialmente qué aprender y, lo más importante, por dónde empezar (la pregunta más común de los principiantes) y por qué es importante tener un mentor.Hablaremos sobre (en ningún orden específico)- Cómo y por qué (de verdad, por qué) comenzar a aprender;- Elegir la velocidad y el mentor adecuados;- Elegir el framework adecuado (bueno, esto va a llamar la atención) y por qué esto importa y por qué debería ser Vue;- Desafíos y lecciones aprendidas (Roma, construida, un día ordenada...);- Lo que debes saber antes de decidir ahora, basado en las experiencias anteriores, si quieres adentrarte en este asunto web tan confuso.

Aprender a Aprender: Cómo Desarrollar Web de la Manera Correcta con Vue Si Eres un Principiante

Knowing JavaScript is essential for getting started with Vue. Understanding the fundamentals of Vue and building on individual concepts will help you develop more complex applications. Don't fall into the trap of building something too big as a starter project. Focus on the fundamentals and don't be swayed by industry standards or tricks posted online. Find a mentor to guide your Vue journey.

It is not common that people trying to break in to web dev literally learn to start from HTML/CSS or "create xyz" workflows where 25 files pop up all of a sudden after you run one command and there's no way to comprehend what just happened. Learning should be crafted and tuned to one's way of learning else we are all just dogs pretending to be sheep in a horse stable(literally not absurd at all). We will explore how I went from oh marquee is cool(it still is,believe me) to being a person that could build web apps with people having web dev experience equal to my age. I'll share my learnings, findings, lessons, how to and especially what to learn and most importantly where do I start (the most common beginner question) and why mentorship is important.We'll talk about (in no specific order)- How and why(like really why) to start learning;- Choosing the right speed and mentor;- Choosing the right framework(welp, this is gonna turn heads) and why this matters and why it should be Vue;- Struggles and lessons learned(Rome, built, one day sorts...);- What you should know before you really decide now based on above experiences about getting into this wibbly wobbly web stuff.

Learning To Learn : How To Web Dev The Right Way With Vue If You Are A Beginner

Ashwin Vinay Phadke

<div>Los componibles (funciones de composición) son funciones con estado/sin estado que pueden aprovechar la API de reactividad de Vue, desacoplándola de los componentes.</div><div>Este cambio de perspectiva abre la posibilidad de abordar escenarios comunes de una manera nueva y creativa.</div>

La navaja suiza de cada desarrollador de Vue

Composables are the Swiss Army knife of every Vue.js developer, helping build more extensible, adaptable, controllable, and trustful applications. They replace mixins and can be used everywhere, connecting different parts of the system and sharing common state. Composables are versatile, allowing for local or global use, and can be applied in both the domain layer and UI. They provide adaptability, controllability, easy testing, and eliminate the need to test the environment. Consider using Vue use for a library of composables and start building your own collection.

<div>Composables (composition functions) are stateful/stateless functions that can leverage Vue's reactivity API, decoupling it from components. </div><div>This shift in perspective opens the possibility for tackling common scenarios in a new and creative way.</div>

The Swiss Army Knife of Every Vue Developer

Juan Andrés Núñez Charro

Las pruebas son obligatorias y las pruebas unitarias son la base para construir un buen sistema de pruebas para nuestro proyecto. Pero para proyectos de frontend que involucran componentes, ¿cuántas pruebas unitarias se consideran eficientes y no excesivas? ¿Deberíamos usar bibliotecas adicionales como Testing Library o Vue Test Utils con Vitest para probar un componente, cuando podemos hacer lo mismo solo con Playwright? ¿Realmente es necesario realizar una prueba de componente utilizando un framework de E2E como Playwright? Descubrámoslo en mi charla.

Quizá No Necesitemos Pruebas de Componentes

Component testing is a gray area between integration and unit testing. The demo app focuses on the cart component and writing test cases for Playwright component test and VTest. The first cart test encounters a bug with the invisible method in View Test.

Testings are mandatory and unit tests are the foundation for building a good testing system for our project. But for front end projects which involve components, how many unit tests are considered efficient and not overkill? Should we use additional libraries like Testing Library or Vue Test Utils with Vitest to test a component, when we can perform the same with just Playwright? Whether a component test using an E2E framework like Playwright is really a kill for? Let's find out in my talk.

We May Not Need Component Testing

En el siempre cambiante panorama de las aplicaciones de página única modernas, VueJS se destaca pero también nos presenta desafíos. Entre ellos, la autenticación es crucial: asegurar la identidad del usuario y proteger su recorrido dentro de su aplicación. No temas; estamos aquí para guiarte a través de estas emocionantes fronteras. En mi sesión, desentrañaré los secretos de la autenticación en aplicaciones VueJS, convirtiéndolo en un viaje de aprendizaje encantador para todos, manteniendo el enfoque en las partes más críticas. Daré una visión general de un flujo de autenticación, desglosaré cada paso y desmitificaré el papel de los tokens JWT en el proceso. Ya seas un desarrollador experimentado de VueJS o recién estés comenzando, eres bienvenido. Un poco de experiencia previa con la autenticación de usuarios ciertamente no hace daño, pero es opcional. Público objetivo: Desarrolladores web de todos los niveles que deseen aprender sobre temas de seguridad y mejores prácticas. Aprendizajes clave:- Dar una pequeña introducción a los términos y conceptos más importantes de la autenticación;- VueJS se utiliza como ejemplo, pero los conceptos serán agnósticos.

¿Quiénes son Vue? Autenticación en Vue, Las Partes Importantes

This Talk introduces authentication in Vue.js and emphasizes that it is not as difficult as it may seem. The speaker explains the concept of authentication and its importance. A code example is used to demonstrate how to implement authentication in Vue.js, including separate UI parts for login, home, and dashboard views. The Talk also covers handling authentication in the Vue.js router, including defining routes, accessing user credentials, and making requests to the backend.

In the ever-evolving landscape of modern single-page applications, VueJS stands out but also presents us with challenges. Among them, authentication is crucial: ensuring the user's identity and securing their journey within your application. Fear not; we're here to guide you through these exciting frontiers. In my session, I'll unravel the secrets of authentication in VueJS applications, making it a delightful learning journey for everyone while keeping the focus on the most critical parts. I'll provide an overview of an authentication flow, break down each step, and demystify the role of JWT tokens in the process.  Whether you're a seasoned VueJS developer or just getting started, you're welcome. A dash of prior experience with user authentication certainly doesn't hurt, but it's optional.  Target audience: Web Developers of all levels who want to learn about security topics and best practices. Key learnings:- Giving a small introduction to the most essential terms and concepts of Authentication;- VueJS is used as an example, but the concepts will be agnostic.

Who Are Vue? Authn In Vue, The Important Parts

Ramona Schwering

Ha pasado un año desde que TresJS se hizo de código abierto en esta misma conferencia, así que en esta charla vamos a dar una actualización completa sobre lo que hemos estado preparando para la versión 4 del núcleo, incluyendo nuevas herramientas de desarrollo, documentación traducida, un libro de recetas, nuevas características y muchas correcciones de errores.

What's Hot On Tresjs V4

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

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

Prime Vue is a comprehensive UI component suite with over 90 components, including date pickers, buttons, tables, and grids. It offers flexibility through styled and unstyled modes, allowing for customization using design tokens or Tailwind. Prime Vue is WCAG compliant and supports Material design. The upcoming version 4 introduces a new theming API using CSS variables, and it includes features like dark mode switching and integration with Figma. The team has plans to release a UI Designer, advanced components, and a drag-and-drop UI Builder in the future.

PrimeVue is a popular UI Component library for Vue 3 featuring over 80 components,  unstyled mode with Tailwind CSS presets, pass-through properties, design-agnostic theming, icons, blocks, and templates.PrimeVue is one of the most popular UI libraries in the Vue ecosystem. The talk begins with an overview of the feature set and dives into the detail for each of the content points below; - Overview- Best Practices of UI Component Development- Component Suite- Pass Through API- Design Agnostic Theming- Unstyled Mode- Tailwind CSS Presets- Icons/Blocks/Templates- Figma to Theme Generation- Roadmap

PrimeVue | The Next-Gen UI Component Library

Çağatay Çivici

Descubre el arte de crear formularios escalables en Vue utilizando FormKit, ideal para equipos con proyectos complejos y centrados en formularios. Esta charla explora estrategias para descomponer formularios en componentes más pequeños y componibles, simplificando el desarrollo y mejorando la eficiencia del equipo.

Formularios escalables en Vue

Scalable forms in Vue, approachable for all skill levels, with code reusability and best practices. Front-ends divided into websites and applications, with forms being highly interactive and logic-heavy. Form Components in Vue provide accessible markup, delightful validation, and customizable props. Using vModeling encourages code reuse and collaboration. FormKit offers a comprehensive solution to form problems, including structured data, unique form keys, and robust validation UX. It simplifies form creation, supports CMS-like experiences, and provides advanced features and TypeScript support.

Discover the art of creating scalable forms in Vue using FormKit — ideal for teams with complex form-heavy projects. This talk delves into strategies for decomposing forms into smaller, composable components, simplifying development, and enhancing team efficiency.

Scalable Forms in Vue

Justin Schroeder

Domina el arte de hacer tus componentes altamente reutilizables. Los 6 Niveles de Reutilización nos muestran cómo podemos hacer progresivamente nuestros componentes cada vez más reutilizables, según sea necesario, e incluir patrones y herramientas poderosas para ayudarnos a reutilizar nuestro código más fácilmente.

6 Niveles de Reutilización

Today's Talk explores the concept of reusable components, focusing on levels of reusability such as inversion, extension, and nesting. Props are discussed as a means of achieving flexibility and configuration in components. Inversion of control and scoped slots are introduced to give components adaptability. Extension points provide the ability to override specific parts of an application within a single component. The Talk also covers the use of slots and nesting for component flexibility and reusability.

Master the art of making your components highly reusable. The 6 Levels of Reusability show us how we can progressively make our components more and more reusable — as needed — and include powerful patterns and tools to help us reuse our code more easily.

6 Levels of Reusability

Michael Thiessen

Los Composables (funciones de composición) son funciones con estado/sin estado que pueden aprovechar la API de reactividad de Vue, desacoplándola de los componentes.Este cambio de perspectiva abre la posibilidad de abordar escenarios comunes de una manera nueva y creativa. En este masterclass, aprenderás cómo resolver problemas típicos que enfrenta cada desarrollador de Vue, utilizando composables: <ul><li>- Almacenamiento de datos;</li><li>- Comunicación entre componentes;</li><li>- Funciones de utilidad (DOM, API, etc);</li><li>Y más.</li></ul>

Aprende a utilizar Composables: La navaja suiza de los desarrolladores de Vue

The Workshop introduced composables in Vue 3 as an alternative to mixins and the options API. The transition from options API to composables involves looking for reactive state, transformations, and mutations. Composables provide a centralized place for managing state, making components more reusable. The use of testing and mocking allows for thorough testing of composables and their behavior. Lastly, the workshop explored the use of the Intersection Observer API and its integration with Vue 3 composables.

Composables (composition functions) are stateful/stateless functions that can leverage Vue's reactivity API, decoupling it from components.This shift in perspective opens the possibility for tackling common scenarios in a new and creative way. In this workshop, you will learn how to solve typical problems every Vue developer faces, using composables: <ul><li>- Data store;</li><li>- Component cross-communication;</li><li>- Utility functions (DOM, API, etc);</li><li>And more.</li></ul>

Learn To Use Composables: The Swiss Army Knife Of Vue Developers

Following the expansion of the Vue ecosystem, Vue.js Live Conference has grown from a local Meetup to an international conf. The event will welcome more 5k Vue folks remotely from anywhere in the world. Every participant around the world can access online workshops, fun & networking with stellar Vue people.

Vue.js Live Conference

I'm attending Vue.js Live 2024 – get your free remote ticket and join me there with 5k other Vue.js engineers and 15+ great speakers.

Following the expansion of the Vue ecosystem, Vue.js Live Conference has grown from a local Meetup to an international conf. The event will welcome more than 5k Vue folks remotely from anywhere in the world. Every participant around the world can access our online workshops, fun & networking with stellar Vue people.

Vue.js Live 2024

FocusReactive

Hygraph

FocusReactive will help you architect, build, and lead technically advanced websites focusing on performance and scalability. Partners and <a href="https://focusreactive.com/next-js-expert-agency/" target="_blank" rel="noopener noreferrer">experts in Next.js/Vercel</a>, Storyblok, Sanity, Contentful, Shopify Hydrogen, and other Headless eCommerce platforms.Whether you seek <a href="https://focusreactive.com/headless-cms-expert-agency/" target="_blank" rel="noopener noreferrer">expert Headless CMS agency</a> services or an expert agency with deep experience with platforms like Headless <a href="https://focusreactive.com/react-cms/" target="_blank" rel="noopener noreferrer">React CMS</a> &amp; <a href="https://focusreactive.com/nextjs-cms/" target="_blank" rel="noopener noreferrer">NextJS CMS</a>, FocusReactive is the one to help you scale.

As a special perk, we're offering a complimentary <a href="https://focusreactive.com/nextjs-performance-audit/" target="_blank" rel="noopener noreferrer">NextJS audit</a> designed to pinpoint areas for optimization, improve performance, and ensure you're following the best practices for SEO and security.&nbsp; Our expert team will closely examine your implementation, provide actionable insights, and help you leverage the full power of NextJS.

Free NextJS Performance and SEO Best Practices Audit

Next.js, Headless CMS and eCommerce expert agency

Vue.js Live 2024

Code / Create / Communicate