Schedule*

Learn fundamental concepts and principles you need to know to build the foundations for world-class Vue applications. Topics will include component design patterns, workflows to enhance productivity, testing methodologies, best practices for organizing (and reorganizing) increasingly complex applications, and more.

In this workshop, we will learn the inner workings of Vue's reactivity system, and implement a simplified version of it from scratch. You will then study how to leverage the system for code organization in the form of composable functions.

This VueMastery.com workshop will teach you the fundamentals of Vue.js 3 so you can start being productive and building apps immediately. With visual animations and analogies that make abstract concepts concrete, along with coding challenges that help you learn by putting your new skills into practice, you'll build two apps throughout the day. We’ll start off by covering the core common syntax as we build our first app, then move on to building a more production-level app from the ground up. Topics Include The Vue instance Attribute binding Conditional rendering List rendering Event handling Class & style binding Computed properties Components Props Communicating events Forms Vue CLI Single file components Vue Router Essentials Dynamic Routing APIs with Axios Deploying your Vue app

In this workshop by a core team member of Nuxt, you'll learn everything you need to become a Nuxt expert. We'll cover the choices you would make in architecting a new app, working with business constraints and justifying your choices to a bigger audience. We'll cover all the different features of Nuxt - from its integrations with Vue, Nitro, TypeScript, Vite and more, through to deployment as part of a full-stack application. To ensure you gain real proficiency with Nuxt, we'll build an app and a Nuxt module across the course of the day. The app will give an opportunity to become familiar with the many features Nuxt offers, and we'll really deploy it live to one of several serverless platforms - your choice! As we craft the module, we'll zoom into the internals of Nuxt and explore how to customize it for exactly your needs and use cases - even if Nuxt doesn't support them out-of-the-box. Come prepared to have fun and dive deep quickly. Whether you have prior experience with Nuxt or are starting from scratch, you'll learn tips, tricks and more to level-up your development!

In Vue.js, it is quite simple to work with components, and share data among them using events and props - especially in small to medium projects. When an application starts growing, managing components' state might become tedious and overwhelming. This is where Pinia comes to our rescue. Pinia is a state management pattern + library for Vue.js applications. It serves as a central store for data needed across multiple components. It's also the newly recommended state management solution by the official Vue docs likely due to its intuitive API, Typesafety, and out-of-the-box devtools support. By the end of the workshop, attendees will be able to develop elegant, debuggable, maintainable, and organized applications using a centralized store. No prior experience with Pinia is needed. We will answer the common question, “When should I use Pinia?” and work on real-world features. What is state management? What is Pinia and what problems does it solve? Core concepts including state, actions, and getters Implementing state persistence to local storage by combining composables with Pinia Subscribing to the state and to actions Using and building reusable Pinia plugins The workshop is divided into sections, each of which consists of one part theory and one part exercises, so come prepared to get hands-on! This is an intermediate-level workshop that requires you already understand the basics of Vue.js and assumes you have a working knowledge of the composition API.

In the Stress-free Testing workshop, you'll learn how to test both simple and complex components. Optional Typescript track with the Composition API. Hands-on Activities: Use TDD to build new components (Modals, Accordions, and Lists) Test components that use transitions, scoped slots, and async network requests Test basic components that use slots, props, and events Learn patterns for working with Vuex, Pinia, Vue Router, and VueI18n Leverage spies, mocks and stubs to make assertions about your components behavior Setup Code Coverage and Accessibility Tests Testing Fundamentals: The Anatomy of a Test Runner - Terms and Definitions. The Testing Pyramid - Understanding End-to-end Testing, component testing, and unit testing. The Critical Path - Thinking like a user about tests and code quality. The Best Practices - Testing best practices and how to avoid common mistakes. At the end of this workshop, you should have the functional knowledge on how to tackle and test complex Vue components as well as understand how to craft a reliable component test and determine what's worth testing.

The creator of Vue.js updates the community on the roadmap for the Vue.js framework for 2023.

The way we choose to populate and deliver the pages of our sites and applications can have profound effects on performance, accessibility, discoverability, and complexity. And there is a seemingly endless number of options available. SSR? SPA? MPA? SSG? DPR? ISR? So many acronyms! So many choices! Which is the best? The answer of course is “it depends”. But on what does it depend? How can we make the best decision for our projects, our users, and our developers? What are the questions we should ask to help us make the most appropriate and most informed choices? In this talk, we’ll compare popular rendering models in order to understand their relative strengths and weaknesses. We’ll consider what project requirements might call for different types of rendering. And we’ll walk through a practical example which combines a number of rendering techniques to see how a web project can use a variety of complementary technologies with compelling results.

Data visualization applications are complicated. When building a complex data visualization application in Vue, early design of state management and user interaction is crucial in avoiding significant technical debt as requirements change during development. In this session, we will take an in depth look at the real-world development of a data visualization dashboard built at RTI International’s Center for Data Science, discussing patterns, pitfalls, and libraries – including RTI’s open source Harness-Vue tools.

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

Vue can be used for large and small projects alike. Large scale projects though, need to be approached with a bit more thought and design. Why not be inspired by tried and true design patterns from the Vue.js community at large. During the talk we discuss practical design patterns for making your large scale Vue.js projects more predictable including: - Adopting community standards - Component conventions - Routing conventions - Using sdks - Wrapping third-party libs - and more!

Let's dive into Cypress component testing for Vue, and look at how to mount a component and test its behavior from a user's perspective, in the browser. We'll talk about best practices for slots, props, events, and other common scenarios that Vue developers might run into, like how to provide a router or global store to your components when needed. This talk will assume some familiarity with Vue and general ideas around component-based development, but doesn't assume you already have component testing experience.

Everyone is familiar with Postman as being a helpful tool for testing APIs. But people are often surprised when they discover the Postman platform’s true depth and wide breadth of capabilities beyond testing. In this session, I’m here to share 10 valuable tips and tricks I’ve learned along the way that will make you say, “Whoa, that’s awesome!”

Part of my Empathy Series: Keyboard traps are instances where keyboard users encounter areas of an app or website where they can't move forward in the process. Effectively, they are blocked due to the keyboard actions being "trapped" on a particular element. In this talk, I will discuss common causes of keyboard traps and how to fix them.

I'm excited to talk to you about Vite, a modern Web Development Tool that promises faster and more efficient development workflows. During this discussion, we'll be taking a closer look at how Vite works its magic. Instead of bundling up code beforehand, Vite takes an ingenious approach to preparing a development server by simply serving the code over native ESM. This means build times are lightning-fast and development progress has instant feedback thanks to hot module reloading. We'll also dive into how Vite seamlessly integrates with popular front-end frameworks like React and Vue.js, providing built-in support for features like TypeScript, CSS preprocessors and Code Splitting for Lazy Loads. Moreover, we'll explore Vite's extensible plugin system that empowers developers to customize their build process and take advantage of a wide range of community-built plugins. By the end of this talk, you'll have a better understanding of how Vite can streamline your web development workflows and help you build better, more performant web applications. So, let's get started!

Join Abhijeet Prasad, maintainer of Sentry's open source Vue SDK, as he helps you understand the how to get increased visibility into your Vue applications in production. This talk will dive deep into: - Tracking bundle size, web vitals, and other important performance metrics - Configuring distributed tracing to see how your Vue applications are affected by your backend services - Exploring different monitoring tools you can use to get these insights

A lot has happened last year for the Vue.js ecosystem. As Vue 3 became the new default, a complete re-write of the docs boasted newly recommended tooling like Vite and Pinia. After much anticipation, Nuxt 3 was released with amazing developer conveniences, TS support, and server side functionality baked in. In this talk, we’ll take a tour of what all happened in 2022 and how it positions you to create your best web-apps in 2023! Get a top down view of the latest tooling. Get insight into the coolest new libraries & practices with LIVE examples. Learn about up-to-date resources and events in the community. And more.

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

Do you love building with Nuxt but need a native mobile experience? Nuxt Ionic is an out-of-the-box integration that lets you build Nuxt applications with a native look and feel leveraging Ionic components, composables, and icons. Nuxt Ionic automatically imports what you need from the Ionic framework mobile UI toolkit, as well as Capacitor, which provides native mobile device functionality and builds for iOS and Android. This talk will cover the features and use cases of Nuxt Ionic, how to get started, and even deploying your mobile app to users with Ionic's Appflow platform.

Building great forms is a pain. You need to consider labels, help text, validation, grouping, internationalization, accessibility, repopulation, and backend error handling. Honestly, it can be tempting to cut corners. In this talk we’ll introduce FormKit — a form framework that can dramatically simplify your next project.

Learn about the new features and functionality in Vuetify 3 and how it improves the developer and user experience.

Five years ago, Vue.js completely changed the way I develop experimental web apps for some of the biggest artists in music (Foo Fighters, Metro Boomin, Lord Huron, Florence and The Machine, and many many others.) See: leemartin.com. I'd like to hold a short inspiring session which shares examples of this work alongside fundamental aspects of the Vue.js framework which power the magic of each. One example would be a web app for Jack White which teased music before release if fans woke up during the hours of dawn and pointed their phone at the sun. It's a great example of WebRTC, Three.js, suncalc, motion, orientation, and many other features being rolled together in a unique Vue.js component. I should also have examples of how Vue 3 is fitting into my latest projects. Oh and did I mention, I'm based in New Orleans? I'm actually from Louisiana and would love to help bring that local energy to the conference. I'm just happy to have all of you in town and would love to play my part.

Powerpoint Karaoke is an improv game where participants give a presentation from a slide deck you’ve never seen. The slide deck is a randomly generated grouping of images which the participant will need to present, while the 20 slides autorotate every 15secs. I could run this as an "end of day" activity with certain hand-picked participants or speakers.