Build Web Apps with Vue JS 3 & Firebase

Course Curriculum

Chapter 1: Introduction & Setup

Lecture 1: What is Vue?

Lecture 2: New Features in Vue 3

Lecture 3: What You Should Already Know

Lecture 4: Environment Setup

Lecture 5: Course Files

Chapter 2: Vue Basics

Lecture 1: How to use Vue (using the CDN)

Lecture 2: Creating a Vue App

Lecture 3: Templates & Data

Lecture 4: Methods & Click Events

Lecture 5: Conditional Rendering

Lecture 6: Other Mouse Events

Lecture 7: Outputting Lists (v-for)

Lecture 8: Attribute Binding

Lecture 9: Dynamic Classes

Lecture 10: CHALLENGE – Add to Favs

Lecture 11: SOLUTION – Add to Favs

Lecture 12: Computed Properties

Chapter 3: The Vue CLI (for Bigger Projects)

Lecture 1: Why Use the Vue CLI?

Lecture 2: How to Use the Vue CLI

Lecture 3: New Project Walkthrough

Lecture 4: Vue Files & Templates

Lecture 5: Template Refs

Lecture 6: Multiple Components

Lecture 7: Component Styles & Global Styles

Lecture 8: Passing Data with Props

Lecture 9: Emitting Custom Events

Lecture 10: Click Event Modifiers

Lecture 11: Slots

Lecture 12: CHALLENGE – Reusing Components

Lecture 13: Using Teleport

Chapter 4: PROJECT BUILD – Reaction Timer

Lecture 1: Project 1 Preview & Setup

Lecture 2: Starting a New Game

Lecture 3: Component Lifecycle Hooks

Lecture 4: Creating the Reaction Timer

Lecture 5: Emitting Custom Events with Data

Lecture 6: CHALLENGE – Showing a Results Component

Lecture 7: Finishing Touches

Chapter 5: Forms & Data Binding

Lecture 1: Forms Intro & Setup

Lecture 2: Two-way Data Binding

Lecture 3: Select Fields

Lecture 4: Checkboxes

Lecture 5: Keyboard Events & Modifiers

Lecture 6: CHALLENGE – Deleting Skills

Lecture 7: Submitting the Form

Chapter 6: Vue Router Basics

Lecture 1: Why Use the Vue Router?

Lecture 2: Router Setup for New Projects

Lecture 3: Router Links

Lecture 4: Folder Structure

Lecture 5: Route Parameters

Lecture 6: Dynamic Links

Lecture 7: 404 Pages & Redirects

Lecture 8: Programmatic Navigation

Lecture 9: Lazy Loading Components

Chapter 7: Fetching Data

Lecture 1: Using JSON Server

Lecture 2: Where to Fetch Data

Lecture 3: Conditionally Showing Data

Chapter 8: PROJECT BUILD – Simple Project Planner

Lecture 1: Project 2 Preview & Setup

Lecture 2: Home View & Data

Lecture 3: Single Project Template

Lecture 4: Using Material Icons

Lecture 5: Deleting Projects

Lecture 6: Completing Projects

Lecture 7: New Project Form

Lecture 8: Adding New Projects

Lecture 9: Navbar Component

Lecture 10: Edit Project Route

Lecture 11: CHALLENGE – Updating Projects

Lecture 12: Creating a Filter Nav

Lecture 13: CHALLENGE – Showing Filtered Projects

Chapter 9: The Composition API

Lecture 1: Drawbacks of the Options API

Lecture 2: Composition API Basics

Lecture 3: Template Refs in the Setup Function

Lecture 4: Using Refs for Reactivity

Lecture 5: Refs vs Reactive

Lecture 6: Computed Values in the Setup Function

Lecture 7: Using watch and watchEffect

Lecture 8: Using Props in the Setup Function

Lecture 9: Lifecycle Hooks

Chapter 10: Async Code (& the Composition API)

Lecture 1: Fetching Data in the Setup Function

Lecture 2: Reusable Composition Functions (Composables)

Lecture 3: Creating Another Composable

Lecture 4: Creating a Loading Spinner

Lecture 5: Making a Web Form

Lecture 6: CHALLENGE – Making a POST Request

Lecture 7: Future Async Lesson & Extra Styling

Chapter 11: Routing (with the Composition API)

Lecture 1: Routing Recap & Navbar

Lecture 2: Using useRouter

Lecture 3: Using useRoute

Lecture 4: CHALLENGE – Creating a Tag Route