The Composition API is the modern foundation of Vue 3 — enabling better code reuse, type inference, and logic co-location compared to the Options API. This training takes developers through every building block of the Composition API with hands-on exercises at each step.

Who is this training for?

Vue.js developers familiar with the Options API who want to migrate their knowledge to Vue 3's Composition API, or developers new to Vue 3 who want to start with the recommended approach from the beginning.

Agenda

Introduction to the Composition API

• What is the Composition API and why was it introduced?
• How the Composition API compares to the Options API

Setting Up

• Installing Vue.js 3
• Setting up a development environment for the Composition API

The setup() Function

• The role of setup() in Vue components

Refs and Reactive Properties

• ref() and reactive() — differences and use cases
• Using reactive state in templates

Computed Properties

• Defining computed values in the Composition API

Watchers

• watch() and watchEffect() — differences and use cases

Lifecycle Hooks

• Composition API equivalents of Options API lifecycle hooks

Custom Composables

• Extracting and reusing logic with custom composable functions

Provide and Inject

• Dependency injection across the component tree

Reactive Mutations

• Patterns for safe state mutation

Setup Context

• Working with attrs, slots, and emit in setup()