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.

This edition of the event has finished, the latest updates of this JavaScript Conference are available on the Brand Website.

Sponsorship opportunitites

English versionEN

Building a Better Hammer - The Story of Nuxt 4

28 min

Building a Better Hammer - The Story of 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.

frameworks vue nuxt.js

10 Years of Vue: the Past and the Future

29 min

10 Years of Vue: the Past and the Future

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.

frameworks vue vue 3

We May Not Need Component Testing

26 min

We May Not Need Component Testing

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.

testing e2e testing unit testing

PrimeVue | The Next-Gen UI Component Library

24 min

PrimeVue | The Next-Gen UI Component Library

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

component library user interfaces vue

Building Pinia From Scratch

70 min

Building Pinia From Scratch

Workshop

Eduardo San Martin Morote

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.

devtools vue

Data Loaders - Elevating Data Fetching in Vue

30 min

Data Loaders - Elevating Data Fetching in 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

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

119 min

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

Workshop

Alvaro Saburido

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

devtools vue

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

163 min

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

Workshop

Juan Andrés Núñez Charro

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:
- Data store;- Component cross-communication;- Utility functions (DOM, API, etc);And more.

component library unit testing vue

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

7 min

Build Your Own Component Library, With `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.

performance component library

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

43 min

Panel Discussion: What's the big next step for 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 Levels of Reusability

23 min

6 Levels of Reusability

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

More Secure Vue & Nuxt Apps - By Default

21 min

More Secure Vue & Nuxt Apps - By Default

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

The Swiss Army Knife of Every Vue Developer

9 min

The Swiss Army Knife of Every Vue Developer

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.

data vue api development

Scalable Forms in Vue

23 min

Scalable Forms in 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

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

21 min

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

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.

testing api security e2e testing nuxt.js

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

8 min

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

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.

case study vue

Who Are Vue? Authn In Vue, The Important Parts

23 min

Who Are Vue? Authn In Vue, The Important Parts

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.

security testing vue security authentication

What's Hot On Tresjs V4

20 min

What's Hot On 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.

performance frameworks vue

Vue.js Live 2024

Code / Create / Communicate

Available in other languages: