April 25 - 26, 2024

Online

Vue.js Live 2024

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

Code / Create / Communicate

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.

Esta edición del evento ha finalizado, las últimas actualizaciones de este JavaScript Conference están disponibles en el sitio web de la marca.

Sponsorship opportunitites

Versión en EspañolES

Construyendo un Mejor Martillo - La Historia de Nuxt 4

28 min

Construyendo un Mejor Martillo - La Historia de Nuxt 4

Daniel Roe

Daniel leads the Nuxt core team.

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.

vue frameworks nuxt.js

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

29 min

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

Evan You

Vue.js & Vite Creator

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 frameworks vue 3

Quizá No Necesitemos Pruebas de Componentes

26 min

Quizá No Necesitemos Pruebas de Componentes

Maya Shavin

Senior Software Engineer in Microsoft. Core maintainer of StorefrontUI.

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.

e2e testing unit testing testing

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

24 min

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

Çağatay Çivici

PrimeTek

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.

user interfaces component library vue

Construyendo Pinia desde cero

70 min

Construyendo Pinia desde cero

Workshop

Eduardo San Martin Morote

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.

vue devtools

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

30 min

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

Eduardo San Martin Morote

Vue.js Core Team

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.

web apps vue api development

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

119 min

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

Workshop

Alvaro Saburido

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.
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.

vue devtools

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

163 min

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

Workshop

Juan Andrés Núñez Charro

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:
- Almacenamiento de datos;- Comunicación entre componentes;- Funciones de utilidad (DOM, API, etc);Y más.

unit testing component library vue

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

7 min

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

Zernonia Kong

Troop Travel

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.

component library performance

Panel Discussion: ¿Cuál es el siguiente gran paso para Vue/Nuxt?

43 min

Panel Discussion: ¿Cuál es el siguiente gran paso para Vue/Nuxt?

5 authors

We're focusing on performance improvements, both in build and development time. Additionally, we're exploring the use of WASM for deploying binaries into production. WASM is great for performance. Data loader is also important. The target audience for the podcast is Vue developers, including middle to senior developers. The podcast aims to provide new and advanced topics, including features, examples, use cases, and inspiring stories. Podcasts are complex without screen sharing, but videos can provide more in-depth content. Nuxt will be interesting to see. VaporMode in Vue enables performance through built-time transforms. The merging of Wiz and Angular brings core primitives and resumable components. Nuxt community is focusing on performance. The Vue router has an open issue with many routes. Legacy issues with ESM and TypeScript cause pain for maintainers and consumers. Node and the required ESM are exciting. Accessing Cloudflare primitives in development. Micro frontends have a shell with multiple frontends and require a general store. Web components have shown promise, but there are pain points. Mitosis and ReactiveView are alternative solutions. Web components are the best way to adhere to browser standards, but they may have limitations. Nuxt has seen successes despite the limitations of web components. Nuxt 3 has invisible improvements and a good developer experience. The migration from Nuxt 2 to 3 had communication challenges. The Talk will resume after a short break.

6 Niveles de Reutilización

23 min

6 Niveles de Reutilización

Michael Thiessen

Full-time Vue Educator

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.

component library vue

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

21 min

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

Markus Oberlehner

karriere.at GmbH, Austria

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.

e2e testing api security testing nuxt.js

Aplicaciones Vue y Nuxt más seguras - Por defecto

21 min

Aplicaciones Vue y Nuxt más seguras - Por defecto

Jakub Andrzejewski

Vue Storefront

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.

performance accessibility security

La navaja suiza de cada desarrollador de Vue

9 min

La navaja suiza de cada desarrollador de Vue

Juan Andrés Núñez Charro

Docplanner

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.

vue api development data

Formularios escalables en Vue

23 min

Formularios escalables en Vue

Justin Schroeder

Creator of FormKit.

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.

component library vue

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

8 min

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

Ashwin Vinay Phadke

Servient Inc

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.

vue case study

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

23 min

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

Ramona Schwering

Developer Advocate @ Auth0, GDE in Web Technologies and a Women Techmaker and Cypress Ambassador.

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.

vue security testing authentication security

Lo más destacado en Tresjs V4

20 min

Lo más destacado en Tresjs V4

Alvaro Saburido

Storyblok

Threads.js, a Vue custom renderer for creating declarative 3D scenes, has gained popularity with over 1,700 GitHub stars, 9K monthly NPM downloads, and a strong developer community. Version 4 introduces performance improvements, on-demand rendering, typing support, and memory management. Event bubbling and primitive creation are key features, along with enhanced memory management and scene inspection capabilities. The roadmap includes translated documentation, a new cookbook, and the launch of post-processing and XR VR packages. Performance enhancements, a new 3D course, and updates to Tres Leches UI library are also in the works.

vue performance frameworks

Vue.js Live 2024

Code / Create / Communicate

Available in other languages: