Composition API Workshop

Why is it necessary?

The introduction of the Composition API in Vue 3 allows you to use Vue's reactive APIs outside of components, offering a more structured approach to application development.

The adoption of the Composition API as the new Vue.js standard is evident. While the Options API remains a valid option, the Composition API has become the preferred choice for its more modular and scalable approach.

Have you tried learning it on your own? Do you not quite understand what sets it apart from the Options API? Or when to use it? This workshop is specifically designed for those who want to understand and master the Composition API. Through practical exercises, you will explore its fundamental concepts and be prepared to effectively integrate them into your projects.

The Workshop

This workshop (based in my Vue.js Live 24 participation) offers the opportunity to learn how to use the Composition API from the familiarity of the Options API. By understanding both the similarities and differences between them, a new set of design patterns is unlocked where the new API can be implemented.

A notable focus is on composables (or compositional functions) that fully leverage the potential of the Composition API. These functions — whether with or without independent state — allow you to approach familiar scenarios in a more creative, efficient, and modular way.

Throughout the workshop, various crucial aspects of the Composition API will be covered, including its structure, appropriate use cases, and the resolution of common problems encountered by professional Vue developers:

• New methodology for component composition in Vue, focused on grouping and reusing related logic.
• Differentiation between Options API and Composition API for appropriate selection based on context.
• Application of key Vue features, such as methods, refs, computed properties, and watchers, in the new composition API.
• Extending Vue's reactivity outside of components using ref and reactive.
• Creating and using custom composable functions, as well as integrating them with external libraries.
• Safe use of the Composition API with TypeScript.
• Communication between components without relying on hierarchies or parental relationships.
• Efficient state sharing.
• Reactive use of the DOM API.
• Strategies for unit testing the composition API and composable functions — with Vitest.

Features

• Duration of 4 to 5 hours, with a 20-minute break included.
• Approximate schedule: Saturdays from 9 AM to 1~2 PM CET.
• 100% practical approach. Theory is addressed concurrently with practice.
• Three real scenarios will be presented to solve using the Composition API: from data modeling to component communication diagrams.
• Small group to ensure personalized and quality attention.
• Time will be dedicated both during and at the end of the workshop to answer questions and clarify doubts.
• Access to the workshop recording and materials will be provided for later review and continuous learning.

Requirements

• Essential knowledge of Vue.js (Options API).
• Essential knowledge of TypeScript.
• Microphone and Webcam.

Is it for me?

If Vue.js plays a significant role in your technical skill set — or if you are aspiring to integrate it into your skill set, yes, it is. Thoroughly understanding the Composition API is an indispensable requirement. This solid foundation not only expands your competence as a Vue developer but also positions you as a professional capable of tackling more complex projects.