Fine-grained reactivity in frontend frameworks isn't a novel idea: it has been around since Knockout.js - more than a decade ago! Recently, the wider frontend community has also started to re-discover how powerful this paradigm is and how it is more intuitive and effective than some approaches that enforce immutability.

In this workshop, we will discuss what reactivity really means in the context of frontend applications, how it's been presented in different forms over time, and how it differs in the frameworks we work with today. We will then use Vue as a prime example and implement a simplified version of its reactivity API from scratch. You will understand how the same system powers both API styles of Vue and how to leverage it for better code organization in the form of composable functions.

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 throughout the day. The app will give you an opportunity to become familiar with the many features Nuxt offers, and we'll 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 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!

Learn the 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 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.

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 component's 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.

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

Fine-grained reactivity in frontend frameworks isn't a novel idea: it has been around since Knockout.js - more than a decade ago! Recently, the wider frontend community has also started to re-discover how powerful this paradigm is and how it is more intuitive and effective than some approaches that enforce immutability.

In this workshop, we will discuss what reactivity really means in the context of frontend applications, how it's been presented in different forms over time, and how it differs in the frameworks we work with today. We will then use Vue as a prime example and implement a simplified version of its reactivity API from scratch. You will understand how the same system powers both API styles of Vue and how to leverage it for better code organization in the form of composable functions.

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 throughout the day. The app will give you an opportunity to become familiar with the many features Nuxt offers, and we'll 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 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!

Learn the 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 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.

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 component's 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.

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