October 20 - 21, 2021
Vue.js Live Conference
Online

Vue.js London Live 2021

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 5k Vue folks remotely from anywhere in the world. Every participant around the world can access 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.
Everything Beyond State Management in Stores with Pinia
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilising Rust from Vue with WebAssembly
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Local State and Server Cache: Finding a Balance
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Vue3: Modern Frontend App Development
169 min
Vue3: Modern Frontend App Development
Top Content
WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
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
Options API vs Composition API: Choosing the Right Approach for Your Team
23 min
Options API vs Composition API: Choosing the Right Approach for Your Team
Top Content
Today's Talk discusses the Options API and Composition API in Vue 3, highlighting the differences and considerations when choosing an approach. The Composition API offers more flexibility and integrates well with TypeScript, but may require more familiarity with JavaScript. Combining both APIs allows for structure and flexibility, with the ability to progressively enhance code. Team preferences and the level of TypeScript usage should be considered when choosing the right approach for a project.
Vuetify 3: Titan
20 min
Vuetify 3: Titan
Top Content
Hi, I'm John Leader, the creator of Viewtify. Viewtify 3 is the upcoming version with new design concepts, improved usability, and compatibility with modern browsers. The framework has added new features like a validation system, style diversity, semantic customization options, and a density concept. Enhanced customization options, improved performance, and advanced browser support with CSS variables are also highlights of Viewtify 3.
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Modern State Management with Vue 3
22 min
Modern State Management with Vue 3
Top Content
Vanessa introduces Vue Free and discusses the benefits of using the Composition API. The order of execution and grouping logical units using the Composition API is explained. The Composition API is used for state management and refactoring components. The speaker shares their initial experience with state management using Vuex. Composables are explored as an alternative for state management in Vue 3.
Patterns for Large Scale Vue.js Applications
25 min
Patterns for Large Scale Vue.js Applications
Top Content
Standards are crucial for achieving predictability and maintainability in a code base. The Vue.js community provides several sources of standards, including the Vue.js Style Guide and official libraries. Personal and team-wide standards can complement community-wide ones. Alternative component structures, like an almost flat structure, can work well for large apps. Adopting a standardized route naming convention can make routes more predictable. Miscellaneous tips include wrapping third-party libraries, creating SDKs for APIs, and auto-registering components globally. Thorough testing is important, and Vue School offers various services and courses for becoming an expert in Vue.js.
Vue Form Validations with Vest
21 min
Vue Form Validations with Vest
VEST is a form validation framework inspired by unit testing libraries. It provides a structured approach to form validation, making maintenance and reuse easier. VEST supports multiple validations per field, warning validations, interdependent field validation, async validations, and memoization. It is lightweight and can be integrated with various frameworks and libraries. The speaker is open to collaboration and contributions for adding a reactive interface using VUE's reactivity model.
How to Seamlessly Migrate a Large Codebase to Vue 3
20 min
How to Seamlessly Migrate a Large Codebase to Vue 3
Hello, I am Baptiste from CRISP, and in this conference I'm going to show you how to migrate a large project from View 2 to View 3. Vue 3 migration is a simple process with many improvements, such as better performance and modularity. The migration strategy involves maintaining the existing Vue 2 app while gradually moving to Vue 3. Updating core libraries and replacing Vue 2 APIs with Vue 3 APIs are necessary steps. The impact of Vue 3's new reactivity system has optimized the codebase at CRISP, and the company is hiring full-stack developers and supporting the Vue.js Foundation.
Building Vue forms with VeeValidate
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
New Ways to Vue
16 min
New Ways to Vue
The Talk discussed new ways of using Vue, including the introduction of the composition API and the script setup syntax. The Vite tooling was highlighted for its performance improvements and developer experience enhancements. Components auto-importing through Vite plugin components was introduced as a way to improve code splitting and eliminate manual registration. The use of Vite plugins, Unplugin, and Vue 2 support were also discussed. The Talk mentioned that Nuxt 3 will include many of these features.
Optimising Developer Experience with Nuxt 3
26 min
Optimising Developer Experience with Nuxt 3
This Talk discusses optimizing developer experience with Nuxt 3. It highlights improvements in documentation, auto importing libraries, server developer experience, and deployment. Nuxt 3 introduces a unified solution for schema, documentation, and defaults, as well as auto imports for easy component access. It also introduces a faster server framework called H3 and allows for efficient network requests with isomorphic fetch. Deployment is simplified with a single entry point and support for various platforms. The goal is to make Nuxt 3 amazing and backport features to Nuxt 2 apps.
Vuex? No, it’s X(state)Vue for UI
33 min
Vuex? No, it’s X(state)Vue for UI
This Talk introduces state management in Vue, focusing on the Xstate library for managing state machines in UI components. The bottom-up approach in component development can lead to complexity and challenges over time. Xstate is a JavaScript and TypeScript library designed specifically for managing state machines and state charts for UI components. The Talk provides examples of creating a toggle component using Xstate and emphasizes the advantages of using Xstate, such as code reuse, precise testing, and easy maintenance. The speaker encourages developers to plan ahead and consider state, component, and feature design to write better code.
Animation and Vue.js
32 min
Animation and Vue.js
Today's Talk covers animation in Vue JS apps, including CSS animations, JavaScript animations using the GSAP library, and handling multiple elements with transition groups. The Talk also discusses different kinds of movements, state transitions, and animating numbers and SVGs. Overall, it provides a comprehensive overview of animation techniques and tools for enhancing Vue JS apps.
Structuring A Massive Vuex Store
21 min
Structuring A Massive Vuex Store
The Talk discusses the process of structuring a massive UX store using modules in Vue.js. It covers topics such as namespaces, triggering mutations, and improving store usage with map mutations. The importance of refactoring the folder structure and using separate files for actions, getters, and mutations is highlighted. The Talk concludes by mentioning the possibility of adding additional layers for splitting mutations and providing contact information for further inquiries.
Building full-stack GraphQL applications with Hasura and Vue 3
115 min
Building full-stack GraphQL applications with Hasura and Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
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.
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
19 min
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
This Talk discusses the full stack open-source e-commerce using ViewStorefront and Venge. ViewStorefront is a lightning-fast frontend platform for headless commerce, while Venge is a framework for the back-end. Both tools are highly customizable and built using modern frameworks. Creating an online store with Venge is quick and easy. Overall, this Talk presents a dream stack for open-source e-commerce and encourages contributions to the projects.
How Vite Changes the Game for Vue and Web Developers
22 min
How Vite Changes the Game for Vue and Web Developers
Vue School offers free training material, workshops, and consulting services. Vite is a game-changer for Vue and web development, significantly improving the development experience. It leverages the browser's native ES modules feature and uses ESBuild. Vite's dev server is much faster than other bundlers. Vite provides a blazing fast development environment for various frameworks and supports server-side rendering and static site generation. Vite is ready for production and likely to be used by Vue CLI in the future.
Progressive Form Validation in Vue.js
9 min
Progressive Form Validation in Vue.js
vValidate is a popular Vue.js form validation library that solves major pain points in form building. It offers a progressive API and follows a composition first design approach. vValidate allows you to validate inputs by declaring rules on each field and supports Laravel's validation rules, JavaScript functions, and third-party libraries. It also supports validation schemas for the entire form. The diff tools plugin in vValidate provides an inspector for form validity, current values, and errors.
How to Measure Performance Effectively?
28 min
How to Measure Performance Effectively?
This Talk discusses the evolution of performance measurement tooling and the importance of performance in web development. It introduces Google Lighthouse as a tool that provides detailed information on webpage performance. The Talk emphasizes the significance of Core Web Vitals, including Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. It suggests hosting the Lighthouse environment locally and using Lighthouse CI for continuous performance measurement. The Talk also highlights the impact of Core Web Vitals on SEO and the importance of prioritizing field data over lab data.
Migrating to Vue 3
5 min
Migrating to Vue 3
This talk focuses on the migration process of upgrading Vue CLI-generated apps to Vue 3. It provides step-by-step instructions on removing Vue 2, fixing errors and warnings, and uninstalling the migration build. The talk also mentions a Vue 2 to Vue 3 cheat sheet available for a comprehensive guide. Additionally, the talk introduces a special view three migration build for running existing apps in view two mode, providing warnings and a safe environment for code updates.
How Developers Can Use Automated App Security Testing To Protect Vue Apps
7 min
How Developers Can Use Automated App Security Testing To Protect Vue Apps
Today, I'm going to tell you how developers can use automated application security testing to protect their Vue apps. I'll explain what it means to shift left, show an example of a cross-site scripting vulnerability, and provide the tools you need to find these vulnerabilities before production. Let's jump into an example of our Vue app with cross-site scripting. We have FontTalk, a message board where users can discuss fonts and style their posts. Bob logs in and sees a conversation about fonts. Unaware of cross-site scripting, his account is compromised. The malicious image tag sends his confidential information to the attacker. To prevent this, we need to make changes in the code.
Technical SEO & JavaScript
8 min
Technical SEO & JavaScript
Technical SEO is important for making content visible to search engines. Developers have a significant impact on the crawling and indexing process. Hash-based routing can lead to duplicate content issues, and it is recommended to use the History API instead. In 2019, 12% of websites still used fragmented URLs.
Taking Vue.js to the Backend
23 min
Taking Vue.js to the Backend
This talk explores using Vue.js in the backend, specifically focusing on Vue 3 Reactivity. It discusses how Vue 3 Reactivity leverages ES6 proxies to update changes and intercept hooks. The talk also covers implementing Vue.js backend with live demos, showcasing the modification of proxies and the use of reactive functions. It demonstrates the creation of a reactive array and the implementation of join, leave, and message functionalities. The talk concludes by mentioning the possibility of using computed properties and inviting further questions.
Code at the Speed of Design in Chakra UI Vue
23 min
Code at the Speed of Design in Chakra UI Vue
Jonathan Bakebwa introduces Chakra UI View, a component library focused on accessibility, with features like extending themes and defining custom variants. The upcoming versions of Chakra UI V1 will introduce a zero-runtime build and a theming API with component overrides, custom variants, and custom sizes. The Talk demonstrates how to implement a button design using Chakra UI, customize button styles, create custom button sizes, and use icons from external libraries. Chakra UI allows for quick implementation of UI designs and is recommended for developers looking to enhance their designs.
Identify Issues and Prevent Slowdowns in your Vue.JS Apps
8 min
Identify Issues and Prevent Slowdowns in your Vue.JS Apps
Hi, I'm Simon, a solutions engineer at Sentry. We focus on code observability, supporting all major languages and frameworks. With the Sentry SDK, you can monitor errors and performance. Get started with an easy installation process. Sentry provides detailed error information, including the stack trace and contextual information. It also supports source control management systems and integrates with issue tracking tools. The distributed trace feature allows you to see relationships between errors on the front end and back end. We can optimize queries to improve user experience and reduce user misery.
Let SEO be with You in Your Nuxt App
27 min
Let SEO be with You in Your Nuxt App
This Talk provides an introduction to SEO and its importance, covering on-page and off-page SEO. It explains how to optimize a website for search engines by creating a sitemap, using meta tags, and implementing structured data. The Talk also discusses the benefits of using RSS feeds for automated newsletters and social media posts. Additionally, it emphasizes the importance of continuous optimization for SEO, including adding useful content, organizing headings, optimizing UX, and staying updated with Core Web Vitals.
Fast & Furious - Going headless with Nuxt.js!
32 min
Fast & Furious - Going headless with Nuxt.js!
This talk introduces using Next.js with a headless CMS called Storyblock. It covers setting up Storyblock with Next.js, understanding components and index pages, rendering components and requesting data, enhancing preview with the visual editor, creating article components and schemas, reusing components, and exploring the Storyblock and Next.js connection.
Understand the hard parts of Nuxt
9 min
Understand the hard parts of Nuxt
This lightning talk covers common Vue issues such as mutating Vuex Store state outside of mutation handlers and incorrect cloning of arrays and objects. Troubleshooting tips include checking code locally, fixing issues with undefined window or navigator, and checking for backend issues and proper data in the network tab. Additional tips include using the network tab and console log to spot bugs, checking state in real-time with Vue dev tools, and reaching out for support on Discord, GitHub, or Stack Overflow.
CI/CD Success for Vue Developers
23 min
CI/CD Success for Vue Developers
Today's Talk discusses CI and CD success with Vue.js, emphasizing the importance of automation in software delivery. The speaker shares tips applicable to all CI-CD systems and programming languages, explaining the concept of continuous integration (CI) and its role in automatically building and testing changes. Attention to speed, recovery time, and organizational considerations are crucial for CI-CD success. Techniques such as caching and job splitting can improve speed, while automation and security scanning help maintain a secure environment. Ultimately, CI-CD is a team responsibility that enables frequent releases and adaptability to change.
A New Kind of Abstraction
8 min
A New Kind of Abstraction
Abstractions simplify working with low-level concepts like APIs or languages, allowing developers to build on top of them and add helper functions. However, there are tradeoffs, such as increased code size. Abstractions operate on a spectrum, with different runtimes like Node, Dino, and the browser at opposite ends. Code that runs in Dino can likely run in the browser, and code that runs in Node can also run in the browser.
A Different Vue into Web Performance
72 min
A Different Vue into Web Performance
Workshop
Abhijeet Prasad
Abhijeet Prasad
Solving your front-end performance problems can be hard, but identifying where you have performance problems in the first place can be even harder. In this workshop, Abhijeet Prasad, software engineer at Sentry.io, dives deep into UX research, browser performance APIs, and developer tools to help show you the reasons why your Vue applications may be slow. He'll help answer questions like, "What does it mean to have a fast website?" and "How do I know if my performance problem is really a problem?". By walking through different example apps, you'll be able to learn how to use and leverage core web vitals, navigation-timing APIs, and distributed tracing to better understand your performance problems.
Advanced Site Rendering Patterns on the Jamstack
23 min
Advanced Site Rendering Patterns on the Jamstack
Today's Talk discusses advanced site rendering patterns in the JAMstack, including the benefits and challenges of using this approach. It explores solutions like incremental builds, microsites, and incremental static regeneration to improve build times and performance. The Talk also introduces distributed persistent rendering and Gatsby v4 as new solutions to enhance static site generation and server-side rendering.
Building for Web and Native with Ionic & Vue
89 min
Building for Web and Native with Ionic & Vue
Workshop
Mike Hartington
Mike Hartington
When building an app, there are many options choices developers need to make. Is it a web app? Does need to be a native app? What should I use for UI? In this workshop will look at how to make use of Ionic for building your app and how to deploy it to not only the web, but native as well.