Vue 3 in Action: 6 Projects to Master the Framework

Course Curriculum

Chapter 1: Course Introduction

Lecture 1: What is Vue.js and Why You Should Learn It?

Lecture 2: The Essence of Vue.js – How Vue.js Works in 3 Minutes

Lecture 3: Course Overview: What You'll Learn and the Projects You'll Build

Lecture 4: Why Choose Vue 3: Benefits and Advantages

Lecture 5: Maximizing Your Learning: How to Make the Most Out of This Course

Lecture 6: Accessing the Source Code: Where to Find It

Lecture 7: VSCode Setup: Essential Shortcuts, Extensions, and Tips

Lecture 8: Need a Reminder on HTML, JavaScript, or CSS? Here's Some Help

Lecture 9: Join Discord!

Chapter 2: 1st Mini Project – Can you Drive?

Lecture 1: Intro: Project 1

Lecture 2: Making the Vue App Alive!

Lecture 3: Reactivity in Vue – Using ref()

Lecture 4: Computed Properties – Using computed()

Lecture 5: Conditional CSS Classes

Lecture 6: Input Bindings

Lecture 7: Exercise 1 – Build a Simple Quiz Game

Lecture 8: Exercise 1 – Solution

Chapter 3: 2nd Mini Project – Image Gallery with Favorites

Lecture 1: Intro: 2nd Mini Project

Lecture 2: Event Handling (v-on)

Lecture 3: Event Handling Modifiers

Lecture 4: Conditional Rendering (v-if)

Lecture 5: Rendering Lists (v-for)

Lecture 6: Attribute Binding

Lecture 7: Exercise 2 – Favorite Toggling/Image Removing

Lecture 8: Exercise 2 – Solution to Task 1

Lecture 9: Exercise 2 – Solution to Task 2

Chapter 4: 3rd Mini Project – Task Manager

Lecture 1: Intro: 3rd Mini Project

Lecture 2: Lifecycle Hooks

Lecture 3: Template Refs (Accessing DOM Elements)

Lecture 4: Displaying Task List

Lecture 5: Adding New Tasks

Lecture 6: Watchers and Side Effects

Lecture 7: Comparing watch with watchEffect

Lecture 8: Using Local Storage

Lecture 9: Exercise 3 – Remove Button & Filtering Tasks

Lecture 10: Exercise 3 – Solution

Chapter 5: 4th Medium Project – Event Registration (Components)

Lecture 1: Intro: 4th Medium Project

Lecture 2: Creating Vue Project using Vite

Lecture 3: Understanding the Project Structure and Files

Lecture 4: Installing and Using TailwindCSS

Lecture 5: Creating and Using Components

Lecture 6: Rendering a List of Components

Lecture 7: Passing Props

Lecture 8: Component Events

Lecture 9: Fall through Attributes

Lecture 10: Basic Component Slots

Lecture 11: Exercise 4 – Create a Reusable Card Component

Lecture 12: Exercise 4 – Solution

Lecture 13: Named Slots

Lecture 14: Conditional Named Slots

Lecture 15: Component Variants

Chapter 6: 4th Medium Project – Event Registration (Data Fetching)

Lecture 1: Intro: 4th Medium Project – Checkpoint #1

Lecture 2: Setting Up the Mock API Server

Lecture 3: Fetching Data

Lecture 4: Loading State

Lecture 5: Preventing Layout Shifts (Placeholders)

Lecture 6: Posting Data to the Server

Lecture 7: Exercise 5 – Loading Bookings

Lecture 8: Exercise 5 – Solution

Chapter 7: 4th Medium Project (Optimistic UI, Error Handling)

Lecture 1: Intro: 4th Medium Project – Checkpoint #2

Lecture 2: Optimistic UI Explained with Event Booking Example

Lecture 3: Implementing Event Booking Optimistic UI

Lecture 4: Cancelling Bookings with Optimistic UI

Lecture 5: Extracting EventList: Why?

Lecture 6: Extracting EventList: Let's Go!

Lecture 7: Extracting EventList: Handling Empty States

Lecture 8: Extracting EventList: Error Handling and Error Recovery

Lecture 9: Responsive Design

Lecture 10: Dynamic Components & Icons

Chapter 8: 4th Medium Project (Composables & Sharing State)

Lecture 1: Intro: Composables and State Sharing

Lecture 2: Creating and Using Composables

Lecture 3: Using Composable and Eliminating Events

Lecture 4: The BookingList Component

Lecture 5: Error Handling Component & Exercise 6

Lecture 6: Exercise 6 Solution

Chapter 9: 5th Medium Project (TypeScript, Transitions, Tabs)

Lecture 1: Intro: 5th Medium Project Introduction

Lecture 2: Create a Vue TypeScript Project & Add Tailwind

Lecture 3: Define Props and Events with TypeScript Types

Lecture 4: Narrowing Down the Types of refs and Other Data

Lecture 5: Rendering Tabs – How to Display the Tab Active State?

Lecture 6: Rendering Tab Content using Dynamic Components

Lecture 7: Transitions – How to Add CSS Transitions on Tab Content

Lecture 8: Custom Transition Components – How to Reuse Transitions?

Chapter 10: 5th Medium Project (TypeScript, Teleport, KeepAlive, Shared State)

Lecture 1: Intro: 5th Medium Project Checkpoint #2

Lecture 2: General Form Markup & Transition Gotcha

Lecture 3: How is the reactive Function Different from ref in Vue 3?

Lecture 4: KeepAlive Component – How to Not Lose the State of Dynamic Components?

Lecture 5: Creating Privacy & Notifications Forms: Adding Markup and Maintaining User Data

Lecture 6: Syncing Local Storage: How to Store and Retrieve Settings

Lecture 7: TypeScript Safety: Generics and Keyof – Mindblowing Type Safety!