Vue 3 Workshop: Master the Composition API

Vue 3 is more than 3 years old by now, and so is the Composition API. In the meantime, the ecosystem has evolved, and best practices have emerged. However, many existing applications still haven't migrated to Vue 3, are on it or still using the Options API!

In this workshop, you will learn how to effectively utilize the Composition API in Vue 3 and the benefits it brings to your projects. Additionally, you will learn how to migrate existing applications and discover proven patterns, pitfalls, and recommendations.

So, say goodbye to mixins, grouping by "functionality," and the cumbersome TypeScript support, and set full steam ahead towards the Composition API.

After this workshop, you will have a solid understanding of the Composition API. You will also be able to perform migrations from the Options API to the Composition API. You will learn the <script setup> syntax and won't be able to do without it afterwards!

Agenda

• Introduction
  • What is the Composition API?
  • Why was it created?
  • What problems does the Options API have?
• Key Concepts
  • Anatomy of the composition API
  • setup()
  • <script setup>
• Reactivity
  • Comparison to Options API
  • ref vs. reactive
• Further features
  • Lifecycle Hooks
  • Watching properties
  • Computed properties
• Composables
  • Creating your own composables
  • VueUse
  • State management
• Best practices
  • Naming conventions
  • TypeScript and the Composition API
  • Migration strategies
  • When to use CAPI vs. OAPI?

Target audience and requirements

This workshop is aimed for developers who have experience with Vue (no matter if 2 or 3) already and a good understanding of the Options API. Also, basic JavaScript knowledge is necessary.

Format

This workshop is a hands-on workshop.

Instead of the typical workshop flow, you will work through the exercises before I'll teach you the theory and background. This way, you will learn the most important concepts of Nuxt.js by doing and not by listening or copying lines of code from the slides.

After each exercise, we will go through the solution and theory together, reinforcing what you have learned.