Vue.js Live Conference

Vue.js London 2023

Vue: Feature Updates

Evan You

Building the Vue 3 VDOM on Stage

Marc Backes

Anthony Fu

Stop Writing Your Routes

Eduardo San Martin Morote

A Saga of Web Rendering Woes

Alba Silvente Fuentes

You’re Probably Using Lighthouse Wrong: How We Got Tricked by a Single Magic Number

Filip Rakowski

Building for the Edge - Crafting a Next-Gen Framework

Daniel Roe

Creating My First Open Source Vue 3 Library

Erik Hanchett

The Art of Rendering Modes: Go Beyond a Blank Page

Alexander Lichter

Image Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps

Jakub Andrzejewski

TresJS create 3D experiences declaratively with Vue Components

TresJS, a declarative way of creating 3D scenes from Vue components

Alvaro Saburido

Let’s Get Visual - Visual Testing in Your Vue.JS Project

Ramona Schwering

Patterns for Large Scale Vue.js Applications

Daniel Kelly

Auth0 and Vue: A Match Made in Heaven for Secure App Development

Tyler Clark

Great Migrations: Upgrading a Component Library at Scale

Joran Quinten

Prefetch Strategies to Boost the Performance of Your Vue.JS App

Aleksandar Gekov

Migrating a 1000 Class Components App to Vue 3

Nikola Begedin

The Hidden Cost of Open Source

Aaron Mitchell

Proven Pinia Patterns

Adam Jahr

Ref() vs. Reactive(): What to Choose Using Vue 3 Composition API?

Michael Hoffmann

Component Design Patterns

Michael Thiessen

Writing Good Tests for Vue Applications (e2e vs. Component Tests, Features of a *Good* Test)

Markus Oberlehner

Nuxt on the Edge

Sebastien Chopin

Nuxt 3 Modules and Open-Source

Lucie Haberer

Building Backwards Compatible Vue Libraries

Jessica Sachs

Alive and Kicking - A Vue Into Rock & Roll

Tim Benniks

Learning Vue 3 through Challenges

Juan Andrés Núñez Charro

Testing Vue 3 Applications with Mock Service Worker

Lisi Linhart

Let’s Make Our Single Page Application Accessible

Simone Cuomo

Vuex to Pinia. How to Migrate an Existing App

Denny Biasiolli

The creator of Vue js gives an update on the new features of the technology.

The more you keep working on an application, the more complicated its routing becomes, and the easier it is to make a mistake. ""Was the route named users or was it user?"", ""Did it have an id param or was it userId?"". If only TypeScript could tell you what are the possible names and params. If only you didn't have to write a single route anymore and let a plugin do it for you. In this talk we will go through what it took to bring automatically typed routes for Vue Router.

How do you write a good component? In this talk we’ll explore several different patterns for writing better components. We’ll look at techniques for simplifying our components, making them easier to understand, and getting more out of the components we’ve already got.

The emergence of SPAs, and therefore logic-heavy client-side code, drastically changed the game for front-end developers. As a result, for the last couple of years, we have had to catch up with sophisticated techniques to build high-quality applications—one of the essential being testing.More and more people started to add tests to their Vue.js-powered applications. With varying degrees of success. The field is still relatively new, and we all need more experience in how to test client-side applications most effectively.With my talk, I want to walk through 1) how to come up with a solid testing strategy (tools and practices) and 2) work on a real-world example of how we combine E2E testing with component testing.I want to highlight some general principles from testing theory and then go into the practical application—live coding in a TDD manner.

This talk will look at the evolution of web rendering modes and what the Jamstack movement is all about. We will build a demo project to show how a static site generator and a Headless CMS can be combined to create dynamic and engaging stories while maintaining a static site's performance and scalability benefits.You will learn about the advantages and limitations of each rendering mode and gain a deeper understanding of how to use Jamstack to build powerful and dynamic storytelling experiences.

Meet TresJS ▲ ■ ●, a declarative way of bringing the magic of ThreeJS using everyday Vue Components and composables. Think of it as React-three-fiber or Lunchbox but without the need of a custom renderer. It just works.Are you ready to add a new dimension to your Vue Apps?

Nuxt modules are the de-facto way of extending our Nuxt applications with new behaviors and functionalities. Have you ever built your own? Why would you bother with hundreds of modules already out there? Let's answer those questions together and see why making your own modules in Nuxt 3 can both help you have a deeper understanding of how Nuxt works while also paving the way for you to get into open source!

Creating a new Vue-based meta-framework from scratch with live coding.

Learn how to build a Vue application deployed to the edge to bring a blazing fast experience to your end users.

Improving Performance of Vue or Nuxt apps is not an easy task. However, there are some quick wins that you can implement easily that will drastically improve the performance of your website. One of such quick win is Image Optimization. In this talk, I will teach you how to optimize images on the fly with Digital Asset Managements services like Cloudinary or Content Management Systems, utilize the concept of Lazy Loading, use compressed format of images like WEBP, and many more!

There is a cost that many companies don’t consider when using open source. It can cost a lot of money and time to keep upgrading sunsetted versions.Open source is free for companies to use until the author sunsets a version.These are some best practices that we we recommend when considering open source adoption:<ul><li>        - Who is the author? Do they have a strong reputation that is going to be around for a long time? Do they have the resources to support an enterprise library?</li><li>        - How much online support is there in the community for this library? How many dependencies are on this library?</li><li>        - Does it have an end of life policy? What’s going to happen when they rev on a version? Will companies have an option to stay on older versions for a long time?</li><li>        - What should you consider when migrating to a supported framework after a version has been sunsetted?</li></ul>

These days web performance is one of the most important things everyone wants to optimize on their apps, and it's clear to everyone how dramatic the impact of a poorly optimized website is on business. Yet we as an industry completely fail in recognizing its complexity and widely misuse the most common tool to measure it — Google Lighthouse. If you’re one of those people thinking that good performance equals a good Lighthouse score, you’ve also fallen into this trap and this talk is for you.

In the world of Single Page Applications, client-side rendering has long been the go-to method for rendering content. However, as SPAs have evolved, other rendering modes have emerged that offer different advantages and disadvantages. In my talk, we will explore why it's important to go beyond a blank page as initial request and explore different rendering modes like SSR, SSG, ISG and more. We'll not only cover the pros and cons of each mode but also provide real and comparable examples. By the end of the talk, you'll have a better understanding of the different rendering modes available for SPAs, and be able to choose the best one for your needs. Join my talk to explore the art of rendering modes.

Many organizations with component libraries are working on upgrades for their Vue 2 apps so that they can support Vue 3. Sometimes it's not easy! Ideally, you could write your code once and cross-compile it for different Vue runtimes. In this talk, we'll do exactly that. At the end, you'll have a recipe for shipping libraries that support both Vue 2 and Vue 3.

Rock &amp; roll is alive and kicking and in this talk I will showcase that Vue is so versatile it can be used to do audio visualisations while rock guitar soars through the browser. The audience will have access to a vue application which allows them to vote for a song to be played live on stage. The screen shows all the votes and I play them as they come up. While playing music meta data is shown and an audio visualisation plays while I’m rocking on stage. The more votes a song gets, the higher it shows on the list and the more chance I’ll play it. The whole experience is created using Vue and Uniform. Next to waking the audience up with some spicy rock &amp; roll, I will explain how the software was build and why Vue is such an important technology for composable architectures with multiple channels. Vue is also used to control the guitar sound, right from the browser.

In this talk, we will discuss some best practices for testing Vue 3 applications. We will explore how the Mock Service Worker and the Vue Testing Library can aid us in testing Vue 3 applications closer to a real-live user situation. Attendees will leave with a solid understanding of how to effectively test their Vue 3 applications to ensure reliability and maintainability.

This talk is designed to show people what a virtual DOM is, and what it is used for. We'll see a bit the theory of it, then build a simplified version of the Vue 3 VDOM on stage from scratch - step by step! After the talk, people will have more familiarity with the black box that sometimes is "VDOM".

Visual testing compares the appearance of your application with a previous state. If changes become visible, you can allow them or not. So you or your testers have their eyes everywhere - without needing to check manually repeatedly. I've been using visual testing for a while, saving my neck a few times. Let's look at my journey together and explore if and how visual testing can also help your projects.

This talk is going to provide recommendations to make a single page application accessible. The talk is not going to cover the basic of accessibility, like adding ALT text or using correct HTML elements, but it is going to cover major shortfalls existing in our SPA.In no particular order, this talk is going to cover the following topics:<ul><li>- Provide a list of resources (blog, book and people to follow)</li><li>- Introduce the issue with SPA with a live example</li><li>- Describe and solve issues with Routing issue in SPA</li><li>- Describe and solve issues with dynamic changes in a Vue app</li><li>- A quick intro to correct HTML element (and how to leverage Vue for this)</li><li>- Describe and fix Browser history</li></ul>

What is the best way to structure a Vue.js application so that it can scale to meet all your users' needs? There are multiple patterns established by the Vue community and the programming community at large that can be adopted in order to make your codebases more predictable, maintainable, and extendable.

At Jumbo Tech Campus we have a distributed model when it comes to our component library. The way we work on our shared codebase has helped is in migrating from Vue2 to Vue3 with the combined efforts of the entire frontend capacity.

Vue 3 is amazing, but a lot of us are still stuck on a Vue 2 monolith. Some of us are stuck even more due to technology choices made before Vue 3 was even on the roadmap. Let's outline the process of migrating a large project to Vue 3 and Vite. Techniques we can employ to get some benefits sooner, process we can apply to get things done more quickly. Things we can do to get it done eventually.

This talk will cover the benefits of using prefetching to improve the performance of Vue.js applications. Attendees will learn about different prefetching strategies and best practices for optimising prefetching for different network conditions.

There are two approaches to add a reactive state to Vue components using the Composition API. As a result, you must choose whether to utilize reactive(), ref(), or both. I'll guide you in making the best decision.

Learn about how to create a Vue.js library, and what best practices you should follow. We'll also learn about open source, and how maintainers work. We'll touch on xState, the composition API and testing strategies including Cypess and Vue test utils!

Are you losing your mind trying to convert your Vuex store to Pinia? Here is a walkthrough on how to migrate store definitions and tests, easily and without suffering.

With Vue's new-and-improved state management library, Pinia, we gain a much more modular tool. While being more flexible, leaner, and lacking the Mutations of Vuex, Pinia presents us with more opportunities to be creative, for better or worse, with our app architecture and how state management is conducted and organized within it.This talk explores some @posva-approved best practices and architectural design patterns to consider when using Pinia in production.

Web forms are the connective tissue of the internet. Without them, people cannot request their health records, apply for university, order pad thai, or book a plane ticket. Yet too often, the tools we use to build those forms are a grab bag of libraries and DIY solutions that can result in a subpar user experience, poor accessibility, and low maintainability.In this talk, we will introduce FormKit — a form-building framework — and explore how this tool can empower Vue developers to write consistent, accessible, even delightful forms without spending a lifetime building them.Talk table of contents:<ul><li>- The problem with forms, why they’re hard</li><li>- Introduction to FormKit</li><li>- Input library</li><li>- Validation</li><li>- Accessibility</li><li>- Form architecture</li><li>- Generating forms from JSON</li><li>- Next steps and closing statements</li></ul>

Conquering Forms in Vue

Justin Schroeder

Introduction to Domain Driven Design<ul><li>- What is DDD?</li><li>- Key principles of DDD</li><li>- Benefits of using DDD in web application development</li></ul>Domain Modeling in Vue 3 Applications<ul><li>- How to design and implement domain models in Vue 3</li><li>- Strategies for integrating domain logic with Vue's reactive data model and component-based architecture</li></ul>Best Practices for Implementing DDD in Vue 3<ul><li>- Strategies for organizing code in a way that follows DDD principles</li><li>- Techniques for reducing coupling between domain and application logic</li><li>- Tips for testing and debugging domain logic in Vue 3 applications</li></ul>

Domain Driven Design with Vue Applications

Abdulrasaq Mustapha

You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead. That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts. Table of Contents:What’s CLS and how it’s calculated?How fonts can cause CLS?Font loading strategies for minimizing CLSRecap and conclusion

Maximize App Performance by Optimizing Web Fonts

Lazar Nikolov

- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance

Code / Create / Communicate