Learning Path: Vue 3

Fundamentals of reactivity with ref, reactive, and optimizations.

Test your understanding of reactivity concepts in Vue 3.

Complete a counter component to practice reactive state with ref.

Learn how to use computed properties to derive state efficiently.

Test your knowledge of computed properties in Vue 3.

Complete a user filter component using computed properties.

Learn to react to state changes with watch and watchEffect.

Test your understanding of watchers and side effects in Vue 3.

Complete a component that reacts to question changes using watch.

Understand how reactive state connects to component mounting and unmounting.

Test when to use onMounted, onUnmounted, and how to clean up external effects.

Complete a component that starts and cleans up external resources with lifecycle hooks.

Learn how to pass data with props and notify changes with emits.

Test your understanding of props, emits, and parent-child communication.

Complete a controlled component that communicates changes with update:modelValue.

Learn to create flexible components with default, named, and scoped slots.

Test how content is defined, provided, and organized through slots.

Build a reusable panel and fill its regions from the parent component.

Share reactive values between ancestors and descendants without props drilling.

Test provide, inject, reactivity, and usage decisions.

Connect a theme provider to a reactive descendant.

Control existence, visibility, and identity with directives and dynamic components.

Test v-if, v-show, key, dynamic components, and KeepAlive.

Build dynamic tabs that preserve their component state.

Distribute responsibilities and define clear contracts between components.

Test component responsibilities, contracts, naming, and organization.

Split a user directory into a container and a presentational component.

Encapsulate reactive logic behind functions with a clear API.

Test composable definitions, conventions, encapsulation, and consumption.

Extract a panel's state and actions into a composable.

Decide when each consumer needs an instance or a shared reactive source.

Test state scope, lifetime, SSR, and state tool selection.

Synchronize two consumers through a shared-state composable.

Bind watchers and external resources to each consumer's lifecycle.

Test internal watchers, lifecycle, SSR, and effect cleanup.

Register and clean up a keyboard shortcut from a composable.

Extract responsibilities and design reusable APIs without abstracting too early.

Test responsibilities, clear contracts, and the cost of creating abstractions.

Abstract asynchronous loading behind a reusable API with explicit dependencies.

Design flexible inputs, protected state, and configurable composables with clear contracts.

Test reactive inputs, readonly, factories, composition, and effect scopes.

Create a filter that accepts values, refs, or getters without losing reactivity.

Connect URLs to views and handle params, query, navigation, and guards.

Test dynamic routes, nested views, history, and navigation with Vue Router.

Build a profile that reacts to a dynamic route parameter.

Share state, getters, and actions across components through Pinia stores.

Test stores, state, getters, actions, and reactive consumption with Pinia.

Build a shopping cart whose state is shared across multiple components.

Rebuild the link between a reactive read, an effect, and a later update.

Test how dependency tracking connects reads to updates.

Implement a basic dependency graph with effect, track, trigger, and Proxy.

Rebuild reactive, ref, readonly, and linked references on the same dependency system.

Test how different primitives preserve identity, tracking, and links to state.

Implement reduced versions of reactive, ref, readonly, toRef, and toRefs.

Rebuild computed, watch, and watchEffect through caching, invalidation, and cleanup.

Test caching, watched sources, invalidation, and side-effect cleanup.

Implement reduced versions of computed, watch, and watchEffect.

Understand how a definition becomes an instance with setup, inputs, rendering, and lifecycle.

Test instances, setup, input channels, context, and lifecycle.

Implement a reduced runtime that prepares and runs component instances.

Understand batching, job order, watcher phases, and nextTick within the scheduler.

Test batching, deduplication, flush order, and watcher timing.

Implement a job queue with batching, flush phases, and nextTick.

Understand how the renderer mounts, compares, and updates elements and components.

Test VNodes, mounting, patching, components, children, and key-based identity.

Implement a reduced renderer for elements, components, and keyed lists.

Understand how Vue turns templates into optimized render instructions and how Vapor changes the compilation target.

Test ASTs, transforms, codegen, compiler optimizations, and Vapor Mode.

Implement a reduced compiler that turns templates into render functions.