#vue 3

Vue 3 is the upcoming major version of Vue.js, an open-source JavaScript framework for building user interfaces and single-page applications. It provides a core library that focuses on the view layer only, making it easy to integrate with other libraries and existing projects. Vue 3 will feature improved performance, better TypeScript support, improved Composition API, and Fragment Support. Additionally, it will have a new version of the Vue CLI and a new compiler architecture for improved build times.

10 Years of Vue: the Past and the Future

Vue.js Live 2024

29 min

10 Years of Vue: the Past and the Future

Evan You

Vue.js & Vite Creator

Hello everyone and welcome to Vue.js Live 2024. In this Talk, Evan Yew, the creator of Vue and Vite, shares a 10-year retrospective on Vue.js, discussing its history, technical impact, and how it is being kept alive. Vue has made significant contributions to the JavaScript ecosystem and is the only mainstream framework that remains independent. The latest release, Vue 3.4, introduced performance improvements and a more efficient reactivity system. Future plans include reactivity efficiency improvements, stabilizing reactive props, and exploring vapor mode. Vue is here to stay and will continue to support the community.

Nuxt on the Edge

Vue.js London 2023

30 min

Nuxt on the Edge

Sebastien Chopin

Author of Nuxt and CEO at NuxtLabs

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.

performance vue vue 3 builders and founders edge functions

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

Vue.js London 2023

27 min

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

Alvaro Saburido

Storyblok

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 vue 3 3d

Vue: Feature Updates

Vue.js London 2023

44 min

Vue: Feature Updates

Top Content

Evan You

Vue.js & Vite Creator

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.

vue vue 3 frontend

Stop Writing Your Routes

Vue.js London 2023

30 min

Stop Writing Your Routes

Eduardo San Martin Morote

Vue.js Core Team

Designing APIs is a challenge, and it's important to consider the language used and different versions of the API. API ergonomics focus on ease of use and trade-offs. Routing is a misunderstood aspect of API design, and file-based routing can simplify it. Unplugging View Router provides typed routes and eliminates the need to pass routes when creating the router. Data loading and handling can be improved with data loaders and predictable routes. Handling protected routes and index and ID files are also discussed.

typescript vue 3 typescript libraries

Vue3: Modern Frontend App Development

Vue.js London Live 2021

169 min

Vue3: Modern Frontend App Development

Top Content

Featured WorkshopFree

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

web development vue composition api vue vue 3

One Year Into Vue 3

Vue.js London Live 2021

20 min

One Year Into Vue 3

Top Content

Evan You

Vue.js & Vite Creator

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.

vue vue 3

Domain Driven Design with Vue Applications

Vue.js London 2023

14 min

Domain Driven Design with Vue Applications

Top Content

Abdulrasaq Mustapha

Papershift

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.

web apps vue vue 3 design

Proven Pinia Patterns

Vue.js London 2023

20 min

Proven Pinia Patterns

Top Content

Adam Jahr

Vue Mastery

Pinnia is a lighter, more modular state management solution for Vue apps, offering consistent patterns, TypeScript support, and an intuitive developer experience. PINIA encourages splitting state into manageable domains, improving code splitting, type inferences, team collaboration, and debugging clarity. Pinia provides flexibility in accessing and mutating state, with different approaches for option and setup stores. It also offers features like patch, reset, and onAction methods. Vue Mastery offers comprehensive Pinnia courses and resources for fast learning.

vue 3 design patterns pinia react

Creating My First Open Source Vue 3 Library

Vue.js London 2023

27 min

Creating My First Open Source Vue 3 Library

Erik Hanchett

AWS

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.

vue vue 3 api development

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

Vue.js London 2023

9 min

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

Tyler Clark

Auth0/Okta

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.

vue vue 3

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

Vue.js London 2023

22 min

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

Michael Hoffmann

Senior Frontend Developer & Freelancer

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.

vue vue 3 api development vue reactivity

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

Vue.js London 2023

21 min

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

Aleksandar Gekov

Axion BioSystems

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.

performance vue vue 3

Migrating a 1000 Class Components App to Vue 3

Vue.js London 2023

28 min

Migrating a 1000 Class Components App to Vue 3

Nikola Begedin

Elixir, Vue.js, Gaming and Running

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.

vite vue vue 3 vue reactivity

Patterns for Large Scale Vue.js Applications

Vue.js London 2023

24 min

Patterns for Large Scale Vue.js Applications

Daniel Kelly

Vue School

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.

vue vue 3 community

Let’s Make Our Single Page Application Accessible

Vue.js London 2023

25 min

Let’s Make Our Single Page Application Accessible

Simone Cuomo

Mentorship available

This Dot Labs

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.

vue vue 3 html

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

Vue.js London 2023

22 min

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

Ramona Schwering

Developer Advocate @ Auth0, GDE in Web Technologies and a Women Techmaker and Cypress Ambassador.

This Talk discusses the importance of fixing small UI errors and typos, as they can leave a negative impression and raise questions about trust in applications. Traditional testing methods may not catch all UI errors, so visual testing is introduced as a solution. The Visual Regression Tracker is recommended as a tool for managing visual test results. Best practices for visual testing include ensuring the application is fully loaded, addressing flakiness, and handling false negatives. The key lessons include giving tests eyes, looking beyond the given path, using visual testing, and covering the original with suitable tests if consistent results can't be obtained.

testing javascript vue 3

Building the Vue 3 VDOM on Stage

Vue.js London 2023

31 min

Building the Vue 3 VDOM on Stage

Marc Backes

WeAreDevelopers

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.

vue vue 3

Testing Vue 3 Applications with Mock Service Worker

Vue.js London 2023

24 min

Testing Vue 3 Applications with Mock Service Worker

Lisi Linhart

Storyblok

This Talk discusses testing V3 applications with Mock Service Worker, which is a library that allows simulating server responses in tests. It covers setting up Mock Service Worker by creating mock API responses and connecting it with the application. The Talk also explains how to write unit tests for asynchronous components using Vue's suspense component. It demonstrates how to test components that interact with APIs and handle error responses. Additionally, it mentions the testing library for components without API calls and emphasizes the importance of testing component interactions and API integration.

testing vue 3 msw react

Alive and Kicking - A Vue Into Rock & Roll

Vue.js London 2023

27 min

Alive and Kicking - A Vue Into Rock & Roll

Tim Benniks

Uniform

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.

vue vue 3

Building Backwards Compatible Vue Libraries

Vue.js London 2023

31 min

Building Backwards Compatible Vue Libraries

Jessica Sachs

Vue Team Member, Vitest & Vite Contributor.

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.

vue vue 3

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

Vue.js London 2023

31 min

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

Top Content

Jakub Andrzejewski

Vue Storefront

Image optimization is crucial for website performance and user experience. Services like IPX and Cloudinary can help optimize images on the fly. Cloudinary offers additional functionalities and transformations for image management. Lazy loading and the lazy pattern can improve website performance by deferring image loading. Optimized images deliver a better user experience. Fallbacks can mitigate the impact of service failures.

performance vue 3 nuxt.js

Building for the Edge - Crafting a Next-Gen Framework

Vue.js London 2023

32 min

Building for the Edge - Crafting a Next-Gen Framework

Daniel Roe

Daniel leads the Nuxt core team.

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.

frameworks vue vue 3

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

Vue.js London 2023

33 min

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

Markus Oberlehner

karriere.at GmbH, Austria

This Talk discusses the importance of testing and the need to decouple tests from test frameworks, CSS selectors, and user interfaces. It emphasizes the benefits of writing tests first and provides examples of simulating shopping lists and working in a test-driven way. The Q&A section covers topics such as changing testing frameworks, bug coverage, and using data attributes for decoupling.

testing vue 3

Managing state in Vue3 application

JSNation 2022

121 min

Managing state in Vue3 application

Workshop

Mikhail Kuznetcov

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.

state management vue 3 vuex

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

JSNation 2022

141 min

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

WorkshopFree

Melanie de Leeuw

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.

azure vue 3 nuxt.js

Vuetify 3: Titan

Vue.js London Live 2021

20 min

Vuetify 3: Titan

Top Content

John Leider

Vuetify

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.

vue composition api vue vue 3

Migrating to Vue 3

Vue.js London Live 2021

5 min

Migrating to Vue 3

Adam Jahr

Vue Mastery

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.

vue vue 3

Modern State Management with Vue 3

Vue.js London Live 2021

22 min

Modern State Management with Vue 3

Top Content

Vanessa Otto

Zavvy GmbH

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.

state management vue composition api vue 3 vuex reactivity

How to Seamlessly Migrate a Large Codebase to Vue 3

Vue.js London Live 2021

20 min

How to Seamlessly Migrate a Large Codebase to Vue 3

Baptiste Jamin

Crisp

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.

New Ways to Vue

Vue.js London Live 2021

16 min

New Ways to Vue

Anthony Fu

Vue, Nuxt and Vite Core Team Member

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.

vite vue vue 3

Animation and Vue.js

Vue.js London Live 2021

32 min

Animation and Vue.js

Callum Macrae

Author of Vue.js: Up and Running

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.

animations vue vue 3

Building full-stack GraphQL applications with Hasura and Vue 3

Vue.js London Live 2021

115 min

Building full-stack GraphQL applications with Hasura and Vue 3

WorkshopFree

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.

fullstack graphql vue vue 3

Composition API: a Quick overVue

JSNation Live 2020

28 min

Composition API: a Quick overVue

Natalia Tepluhina

GitLab

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.

vue composition api vue vue 3