Vue is an open-source JavaScript framework for creating user interfaces and single-page applications. It was created by Evan You in 2014 and has quickly become one of the most popular frameworks for web development. Vue allows developers to create dynamic, reactive user interfaces using a component-based structure. It provides a number of features such as data binding, components, routing, state management, and server-side rendering. Vue can be used to develop both large and small applications, making it an ideal choice for any project.
10 Years of Independent OSS: A Retrospective
JSNation 2024JSNation 2024
33 min
10 Years of Independent OSS: A Retrospective
This talk is a ten-year retrospective into the growth of the Vue.js framework as an open-source project. It highlights the challenges faced by open-source developers, the importance of finding balance and managing scope, and the collaborative nature of the Vue community. The talk also discusses the development of Vite as a build tool and the vision for a unified JavaScript toolchain. It emphasizes the need for community alignment, contributions, and testing, while acknowledging the challenges of bad actors in the open-source community.
Building a Better Hammer - The Story of Nuxt 4
Vue.js Live 2024Vue.js Live 2024
28 min
Building a Better Hammer - The Story of Nuxt 4
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.
10 Years of Vue: the Past and the Future
Vue.js Live 2024Vue.js Live 2024
29 min
10 Years of Vue: the Past and the Future
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.
Making Magic: Building a TypeScript-First Framework
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
Top Content
Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.
Nuxt on the Edge
Vue.js London 2023Vue.js London 2023
30 min
Nuxt on the Edge
Nuxt is a web framework with many features including server-side rendering, client-side rendering, static site generation, edge site rendering, and more. The Edge is a limited environment running on CDN nodes, such as Cloudflare network. Database options on the Edge include Postgre with Neon, Versel on Neon, Superbase, MySQL with plan scale, HyperDB, and KV with redis and Cloudflare storage. The speaker demonstrates creating a demo with a votes table, handling API requests, adding authentication, saving votes, and displaying results. The roadmap to a full stack Nuxt 3 with an edge-first experience is in progress. Copilot is a helpful tool for developers. Integrating SSO with GitHub and improving the developer experience are important considerations for Nuxt 3.
TresJS, a declarative way of creating 3D scenes from Vue components
Vue.js London 2023Vue.js London 2023
27 min
TresJS, a declarative way of creating 3D scenes from Vue components
The speaker discovered 3D with 3GS and was inspired to create a 3D ecosystem for the Vue community using Troy.js. The process of setting up a 3D scene and objects in Tress was explained, along with creating and configuring 3D objects. The talk also covered animating objects with Tress and the 'Cientos' package, as well as the future of Tress.js and its compatibility with older versions of Three. The speaker expressed gratitude to sponsors and contributors and highlighted the potential for product customization with Tress.js.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
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
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
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.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
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.
Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
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
Vue.js London Live 2021Vue.js London Live 2021
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
Vue.js London Live 2021Vue.js London Live 2021
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.
Learn To Use Composables: The Swiss Army Knife Of Vue Developers
Vue.js Live 2024Vue.js Live 2024
163 min
Learn To Use Composables: The Swiss Army Knife Of Vue Developers
Workshop
Juan Andrés Núñez Charro
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.
6 Levels of Reusability
Vue.js Live 2024Vue.js Live 2024
23 min
6 Levels of Reusability
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.
Scalable Forms in Vue
Vue.js Live 2024Vue.js Live 2024
23 min
Scalable Forms in Vue
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.
PrimeVue | The Next-Gen UI Component Library
Vue.js Live 2024Vue.js Live 2024
24 min
PrimeVue | The Next-Gen UI Component Library
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.
What's Hot On Tresjs V4
Vue.js Live 2024Vue.js Live 2024
20 min
What's Hot On Tresjs V4
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.
Who Are Vue? Authn In Vue, The Important Parts
Vue.js Live 2024Vue.js Live 2024
23 min
Who Are Vue? Authn In Vue, The Important Parts
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.
The Swiss Army Knife of Every Vue Developer
Vue.js Live 2024Vue.js Live 2024
9 min
The Swiss Army Knife of Every Vue Developer
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.
Learning To Learn : How To Web Dev The Right Way With Vue If You Are A Beginner
Vue.js Live 2024Vue.js Live 2024
8 min
Learning To Learn : How To Web Dev The Right Way With Vue If You Are A Beginner
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.
Data Loaders - Elevating Data Fetching in Vue
Vue.js Live 2024Vue.js Live 2024
30 min
Data Loaders - Elevating Data Fetching in Vue
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.
Mastering 3D Web Development with TresJS ecosystem: A Vue.js Workshop
Vue.js Live 2024Vue.js Live 2024
119 min
Mastering 3D Web Development with TresJS ecosystem: A Vue.js Workshop
Workshop
Alvaro Saburido
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.
Building Pinia From Scratch
Vue.js Live 2024Vue.js Live 2024
70 min
Building Pinia From Scratch
Workshop
Eduardo San Martin Morote
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.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- 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
Domain Driven Design with Vue Applications
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Top Content
Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.
Creating My First Open Source Vue 3 Library
Vue.js London 2023Vue.js London 2023
27 min
Creating My First Open Source Vue 3 Library
Let's talk about Vue 3 and creating your first open source library. We'll discuss design choices, a personal example of creating a Vue 3 open source library, community and open source, lessons learned, and key takeaways for creating an open source project. We'll also cover building a Vue 3 library, the Authenticator project and its requirements, code sharing and best practices, using Xstate for state management, Vue 3 best practices, testing strategies, open sourcing and community feedback, documentation driven development, challenges and improvements, and the roadmap for the future.
Auth0 and Vue: A Match Made in Heaven for Secure App Development
Vue.js London 2023Vue.js London 2023
9 min
Auth0 and Vue: A Match Made in Heaven for Secure App Development
Hello Vue.js live. My name is Tyler Clark and today I'm giving a talk titled, Vue.js – Building secure applications. I'll be discussing the biggest app threats today, including brute force attacks, credential stuffing, and phishing. I'll also present solutions like WebAuthn for passwordless authentication using biometrics. As you can see here, use the credentials.create function to get a challenge from a server request. Then, pass the necessary information about the user and the acceptable public key types to the server. WebAuthn eliminates password-based flows, creating a secure private and public key pair.
Ref() vs. Reactive(): What to Choose Using Vue 3 Composition API?
Vue.js London 2023Vue.js London 2023
22 min
Ref() vs. Reactive(): What to Choose Using Vue 3 Composition API?
This talk compares Rev and Reactive in Vue 3, exploring reactivity and their limitations. It discusses the use of watchers, identity issues, and migration strategies. The talk also highlights the benefits of using the Ref function for better reactivity and the recommended pattern of grouping Refs. Opinions from the Vue community are shared, with a majority preferring Ref over Reactive.
Prefetch Strategies to Boost the Performance of Your Vue.JS App
Vue.js London 2023Vue.js London 2023
21 min
Prefetch Strategies to Boost the Performance of Your Vue.JS App
Welcome to my Vue.js talk on prefetching strategies and boosting app performance. A crucial part of web performance is optimizing for the network. Caching and resource hints, such as DNS prefetch, preconnect, preload, and module preload, can improve website performance. Prefetching non-critical sources and using different strategies can enhance user experience. Libraries like unhead and get.js offer customization and predictive prefetching based on Google Analytics data.
Migrating a 1000 Class Components App to Vue 3
Vue.js London 2023Vue.js London 2023
28 min
Migrating a 1000 Class Components App to Vue 3
The Talk discusses the migration of a large frontend view application from Vue 2 to Vue 3. The strategy involves converting components to the Composition API, switching from Vuex to Pinea, and overcoming challenges with Vite configuration. The migration process includes selecting components based on the product roadmap, improving type safety, and reducing boilerplate. The results of the migration include improved type checking, faster tests, and a safer codebase.
Patterns for Large Scale Vue.js Applications
Vue.js London 2023Vue.js London 2023
24 min
Patterns for Large Scale Vue.js Applications
In this Talk, Daniel Kelly discusses patterns for large-scale Vue.js app development, emphasizing the importance of following standards and using officially recommended tooling. He highlights the Vue.js style guide as a valuable resource for styling standards and suggests using TypeScript and Nuxt 3 to enhance development capabilities. He also mentions the benefits of having a naming convention for routes and the concept of wrapping third-party dependencies for flexibility. Additionally, he mentions the app-icon component for a generic icon solution and the advantages of interacting with backends via an SDK.
Let’s Make Our Single Page Application Accessible
Vue.js London 2023Vue.js London 2023
25 min
Let’s Make Our Single Page Application Accessible
Today's Talk focused on making single-page applications more accessible. It highlighted the importance of web accessibility for all users, including those with disabilities and different circumstances. The Talk discussed common accessibility issues in single-page applications, such as dynamic content loading and page refreshing, and provided solutions to address them. It also demonstrated the implementation of LiveRegion and user answer composable in Vue.js to improve accessibility. Additionally, the Talk emphasized the need to enhance routing, navigation, and component selection for better accessibility. Lastly, it mentioned the use of the View App Setting plugin to check for accessibility issues in development.
Building the Vue 3 VDOM on Stage
Vue.js London 2023Vue.js London 2023
31 min
Building the Vue 3 VDOM on Stage
Today we will build a virtual DOM, which is a programming interface for HTML and XML documents. The virtual DOM decouples rendering logic from the actual DOM, making it easier to manipulate and inspect. We will create our own virtual DOM by implementing functions to create, mount, unmount, and patch virtual nodes. We will also explore event handling, rendering lists of objects, and unmounting nodes. The virtual DOM in Vue 3 has a flatter hierarchy and may be replaced by direct DOM manipulation for better performance.
Alive and Kicking - A Vue Into Rock & Roll
Vue.js London 2023Vue.js London 2023
27 min
Alive and Kicking - A Vue Into Rock & Roll
The Talk introduces FutS guitar karaoke, a virtual experience in the browser using Vue, Nuxt, Supa Bass, Pignan, Cloudinary, and WebMedia. The virtual experience visualizes audio and allows users to vote and share their votes on Twitter. The browser interacts with the amplifier to change sounds on the guitar, and the browser updates in real-time with vote data. The guitar signal resembles the playing song, and users can choose between Chuck Berry's 'Johnny B. Goode' and AC-DC for the song performance.
Building Backwards Compatible Vue Libraries
Vue.js London 2023Vue.js London 2023
31 min
Building Backwards Compatible Vue Libraries
This Talk discusses the challenges of upgrading to Vue 3 and maintaining Vue 2 and Vue 3 branches in a component library. It explores strategies for shipping libraries and using monorepos, as well as developing backwards compatible code. The speaker emphasizes the importance of testing and deploying components, and highlights the challenges of supporting multiple Vue versions. The Talk concludes with a demonstration of juggling and a discussion on the end-of-life status of Vue 3.
Building for the Edge - Crafting a Next-Gen Framework
Vue.js London 2023Vue.js London 2023
32 min
Building for the Edge - Crafting a Next-Gen Framework
NUXT is a framework for building web apps that has undergone significant changes with the introduction of Nitro, a new server. The Talk covers topics such as building a framework with Nitro, rendering a view app, configuring Nitro and Vite, and integrating Nuxt with an existing Vue 2 project. The collaboration between Nuxt and Chrome has resulted in performance improvements, and the future of Nuxt and Nitro looks promising with new ideas and extensions being developed.
Component Design Patterns
Vue.js London 2023Vue.js London 2023
18 min
Component Design Patterns
The Talk covers clean components and when to create new components, as well as patterns for writing cleaner components and the benefits of VIP patterns. Refactoring and separating code into separate components can make it shorter and easier to read, reducing complexity. The importance of not repeating oneself and the benefits of using smaller components for performance and developer experience are discussed. Composables can help extract logic in large and complex components, and patterns can be incorporated into component libraries and design systems.
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
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.
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
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.
Let SEO be with You in Your Nuxt App
Vue.js London Live 2021Vue.js London Live 2021
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.
Code at the Speed of Design in Chakra UI Vue
Vue.js London Live 2021Vue.js London Live 2021
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.
Vuetify 3: Titan
Vue.js London Live 2021Vue.js London Live 2021
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.
How Vite Changes the Game for Vue and Web Developers
Vue.js London Live 2021Vue.js London Live 2021
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.
Migrating to Vue 3
Vue.js London Live 2021Vue.js London Live 2021
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.
Progressive Form Validation in Vue.js
Vue.js London Live 2021Vue.js London Live 2021
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.
Understand the hard parts of Nuxt
Vue.js London Live 2021Vue.js London Live 2021
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.
Options API vs Composition API: Choosing the Right Approach for Your Team
Vue.js London Live 2021Vue.js London Live 2021
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.
CI/CD Success for Vue Developers
Vue.js London Live 2021Vue.js London Live 2021
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.
Taking Vue.js to the Backend
Vue.js London Live 2021Vue.js London Live 2021
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.
New Ways to Vue
Vue.js London Live 2021Vue.js London Live 2021
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.
Animation and Vue.js
Vue.js London Live 2021Vue.js London Live 2021
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.
Vue Form Validations with Vest
Vue.js London Live 2021Vue.js London Live 2021
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.
Structuring A Massive Vuex Store
Vue.js London Live 2021Vue.js London Live 2021
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.
Vuex? No, it’s X(state)Vue for UI
Vue.js London Live 2021Vue.js London Live 2021
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.
Identify Issues and Prevent Slowdowns in your Vue.JS Apps
Vue.js London Live 2021Vue.js London Live 2021
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.
How Developers Can Use Automated App Security Testing To Protect Vue Apps
Vue.js London Live 2021Vue.js London Live 2021
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.
A New Kind of Abstraction
Vue.js London Live 2021Vue.js London Live 2021
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.
Fast & Furious - Going headless with Nuxt.js!
Vue.js London Live 2021Vue.js London Live 2021
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.
How to Measure Performance Effectively?
Vue.js London Live 2021Vue.js London Live 2021
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.
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
Vue.js London Live 2021Vue.js London Live 2021
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.
A Different Vue into Web Performance
Vue.js London Live 2021Vue.js London Live 2021
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.
Building full-stack GraphQL applications with Hasura and Vue 3
Vue.js London Live 2021Vue.js London Live 2021
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.
Composition API: a Quick overVue
JSNation Live 2020JSNation Live 2020
28 min
Composition API: a Quick overVue
The Talk introduces the composition API in Vue 3 as a better option for composing reusable features compared to mixins and scope slots. It explains how to abstract search functionality using the composition API and demonstrates the creation of searchQuery and searchResultsQuery objects. The Talk also covers running breed search in the mounted hook, sorting results using computed properties, and the benefits of the composition API in terms of code organization and reusability. It concludes by mentioning the upcoming release of Vue 3 and the advantages of the composition API.