Vue.js Live Conference

Vue.js London 2023

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

Nuxt on the Edge

Sebastien Chopin

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?

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

Alvaro Saburido

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

Vue: Feature Updates

Evan You

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.

Stop Writing Your Routes

Eduardo San Martin Morote

Vue.js London Live 2021

The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently. Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3. Table of contents: - Introduction to Vue3 - Composition API - Core libraries - Vue3 ecosystem Prerequisites: IDE of choice (Inellij or VSC) installed Nodejs + NPM <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vue3: Modern Frontend App Development

Mikhail Kuznetcov

Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

One Year Into Vue 3

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

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.

Proven Pinia Patterns

Adam Jahr

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!

Creating My First Open Source Vue 3 Library

Erik Hanchett

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

Tyler Clark

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.

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

Michael Hoffmann

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.

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

Aleksandar Gekov

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.

Migrating a 1000 Class Components App to Vue 3

Nikola Begedin

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.

Patterns for Large Scale Vue.js Applications

Daniel Kelly

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>

Let’s Make Our Single Page Application Accessible

Simone Cuomo

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.

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

Ramona Schwering

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.

Testing Vue 3 Applications with Mock Service Worker

Lisi Linhart

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

Building the Vue 3 VDOM on Stage

Marc Backes

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.

Alive and Kicking - A Vue Into Rock & Roll

Tim Benniks

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.

Building Backwards Compatible Vue Libraries

Jessica Sachs

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!

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

Jakub Andrzejewski

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

Building for the Edge - Crafting a Next-Gen Framework

Daniel Roe

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.

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

Markus Oberlehner

JS Nation

JSNation 2022

In modern Vue we have plenty of options how to create and share state across multiple components. In this workshop we will write an application using all the approaches - Vuex, composition API hooks and Pinia.

Managing state in Vue3 application

We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.

Going on an adventure with Nuxt 3, Motion UI and Azure

Melanie de Leeuw

Learn about the newest features coming to the next version of the framework. See how the core team approached porting Vuetify from Vue 2 to the Vue 3 composition api. Preview updates to core features such as the new layout system, improved testing methodologies, expanded customization options, updates to css utility classes, and much much more.

Vuetify 3: Titan

John Leider

Migrating your Vue 2 app over to Vue 3 doesn't have to be painful. This talk walks you through the process. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Migrating to Vue 3

The Vue 3 Reactivity and Composition API offers developers flexible techniques to work with reactive data. They enable a new and modern approach to handling State Management. Developers can now effortlessly implement local and global stores. Vuex has been one of the most used First-party plugins for Vue 2. Let's have a look at the advantages and tradeoffs of using Composables instead of Vuex. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Modern State Management with Vue 3

Vanessa Otto

Migrating to Vue 3 can be an important task (depending on your project's size). At Crisp, we recently migrated our app (250K lines of code) from Vue 2.6 to Vue 3.2 in about 2 weeks.In this talk, we will share our learnings so you can benefit from our experience.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Seamlessly Migrate a Large Codebase to Vue 3

Baptiste Jamin

Brief intro to the new features of Vue 3 and Vite, then focus on how those features / mindset affect the way we think of tooling and DX. Which leads to my Vitesse project and several unplugins that enhance the Vue developer experience even further (will do some short demos in between). Finally, introduce the ways to use those new features in the existing Vue 2 apps today and make the migrations easier. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

New Ways to Vue

Anthony Fu

There's a lot to gain from adding animations to your site or app. Beyond their visual appeal, you can guide the user's attention, cover up slow to load components and elements, and reveal sections of a page without the user wondering where it came from. This talk will cover the built-in ways Vue.js helps you animate your site, and how for more complicated animations you can hook into third party libraries. It'll also cover the basics of animation itself – what to animate, what not to animate – and how you can use animations to enhance your website without harming the experience of people with disabilities. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Animation and Vue.js

Callum Macrae

The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development. Table of contents - Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes. - Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out. - Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown. Workshop level NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building full-stack GraphQL applications with Hasura and Vue 3

Gavin Ray

JSNation Live

JSNation Live 2020

Composition API is one of the biggest new features in Vue 3. In this talk, I will explain what is it and how to use Composition API for code abstraction and reuse. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#vue 3