Course Room
Beginner to Intermediate

Vue 3 Masterclass: Build Modern Apps with Composition API, TypeScript & Pinia

Build four real Vue 3 applications from scratch, a task manager, a course marketplace, a routed shop, and a typed settings app, while mastering the Composition API, component communication, Pinia state management, Vue Router, and TypeScript.

4 Modules
26 Lessons
0 Students
English
Certificate on completion

Vue 3 Masterclass: Build Modern Apps with Composition API, TypeScript & Pinia

Course Overview

This masterclass teaches Vue 3 by building four complete, realistic applications: a reactive Task App, a Course Marketplace with composable components, a routed Shop with guarded admin routes, and a TypeScript-powered Settings app with a Teleport-based notification system. You start from the absolute fundamentals (reactive state, v-model, directives) and build up through component communication (props, emits, slots, provide/inject), state management (composables and Pinia), Vue Router (navigation, route guards, programmatic routing), and TypeScript (interfaces, types, generics) applied directly inside Vue components. Complement lessons sourced from Laracasts' well-regarded 'Learn Vue 3' series fill in patterns the core masterclass doesn't reach, named slots, dependency injection, and the disciplined way to handle Pinia state mutations, so you finish with a rounded, production-aware understanding of the framework, not just a tour of one long project.

4 modules
26 lessons
4 module quizzes

Taught in English
Beginner to Intermediate level
Certificate on completion

Course Content

4 modules26 lessons4 quizzes

Project Setup and Reactive State25:00
Two-Way Binding with v-model and Event Handling15:00
Understanding Vite10:27
Two Mental Leaps to Understanding <script setup>15:38
Dynamic Lists, Conditionals & Inline Editing25:00
Computed Properties and Watchers28:00
Little Confusing Things About Vue10:54

Module quiz · 30 questions

Component Basics and defineProps17:00
defineEmits and Parent-Child Communication20:00
Parent-Child State Communication in Practice6:50
Refactoring to Modern defineProps and defineEmits16:35
Slots for Reusable Components20:00
Flexible Components with Slots and Flags10:49
Named Slots11:28
Dependency Injection with Provide and Inject9:30
Assembling the Full Marketplace App36:00

Module quiz · 30 questions

Building Your First Composable16:00
From Composable to Pinia Store17:00
Direct Mutation Concerns6:18
Team Dashboard Exercise15:57
Build and Seed a Team Store12:11

Module quiz · 30 questions

Setting Up Routing and Navigation19:00
Route Guards and Programmatic Navigation18:00
Typed Project Setup, Interfaces & Types24:00
Typed Refs, Generics & Reusable Composables27:00
Teleport and Building a Toast Notification System16:43

Module quiz · 30 questions

Skills You'll Gain

Build Vue 3 components with the Composition API and <script setup>
Manage reactive state with ref(), reactive(), computed(), and watch()
Communicate between components with props, emits, slots, and provide/inject
Extract reusable logic into composables

Manage shared application state with Pinia
Build multi-page apps with Vue Router, including route guards and programmatic navigation
Write typed Vue components and composables with TypeScript, including generics
Use Teleport to render UI like toast notifications outside the normal component tree

Requirements

Comfortable with core JavaScript (functions, arrays, objects, ES6 syntax) and basic HTML/CSS. No prior Vue experience is required
TypeScript is taught from first principles as it comes up.

Who this course is for

Frontend developers who know JavaScript and want a structured
project-based path into Vue 3
and JavaScript developers coming from another framework (React
Angular) who want to see how the same component-communication and state-management problems are solved the Vue way.