The Vue 3 Bootcamp – The Complete Developer Guide

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: A Little Bit of Setup

Chapter 2: An Introduction to Vue

Lecture 1: What is VueJS

Lecture 2: Building the HTML Template

Lecture 3: Styling Our App With CSS

Lecture 4: Making it Functional With JavaScript

Lecture 5: Creating a Vue App

Lecture 6: Rebuilding the App in Vue

Lecture 7: Vue vs Vanilla JS

Chapter 3: Diving Deeper in Vue

Lecture 1: Installing Needed Dependencies

Lecture 2: Spinning Up a Vue Development Server

Lecture 3: Some Important Terminologies

Lecture 4: Creating HTML With Vue Templates

Lecture 5: Styling Our App

Lecture 6: Accessing Variables Within Our HTML

Lecture 7: Adding Event Handlers

Lecture 8: Defining Our Variable as State

Lecture 9: Composition API vs Options API

Chapter 4: Vue Directives

Lecture 1: App Overview

Lecture 2: [OPTIONAL] Building the HTML and CSS

Lecture 3: Conditional Rendering With v-if

Lecture 4: Two Way Binding With v-model

Lecture 5: Event Handling By Creating a New Note

Lecture 6: Iteratively Rendering DOM Elements With v-for

Lecture 7: The Importances of a Key

Lecture 8: Adding Error Handling

Chapter 5: Components and Props

Lecture 1: App Overview

Lecture 2: [OPTIONAL] The HTML and CSS

Lecture 3: List Card Rendering

Lecture 4: Watching For State Changes

Lecture 5: Separating Our Code Into Components

Lecture 6: Passing Data to Components via Props

Chapter 6: Pages and Routing

Lecture 1: Introduction to Routing

Lecture 2: Creating a New App

Lecture 3: Creating Two View Components

Lecture 4: Adding Routing to Our App

Lecture 5: RouterLink to Navigate Within the App

Lecture 6: Styling the Active RouterLink

Lecture 7: Pages With Dynamic Paths

Lecture 8: Extracting the Path Params

Lecture 9: The Powers of Nested Routes

Lecture 10: Programmatically Adjust the Route

Lecture 11: Adding 404 Not Found Pages

Lecture 12: Redirect Routes

Lecture 13: Routing Our Quiz App

Chapter 7: Completing Our Quiz App

Lecture 1: Quiz Page HTML and CSS

Lecture 2: Separating Code Into Components

Lecture 3: Passing Props to the Question Component

Lecture 4: Listening to Changes With Watch

Lecture 5: Computing Values With State

Lecture 6: More Computing…

Lecture 7: Passing Data From the Child to the Parent

Lecture 8: Emitting an Event From the Child Component

Lecture 9: Completing the Quiz

Chapter 8: Animations For an Interactive and Fluid App

Lecture 1: Introduction to Vue Animations

Lecture 2: The Transition Component

Lecture 3: Animating When a Component Leaves

Lecture 4: Conditional Rendering Animations

Lecture 5: Building a Small App

Lecture 6: TransitionGroup to Animate Multiple Elements

Lecture 7: Animating the Other Cards Into Place

Lecture 8: Routing Animations

Lecture 9: Animating Upon Rendering

Lecture 10: Lifecycle Hook of the Transition

Lecture 11: Animation Styling With JavaScript

Chapter 9: API Requests to Fetch Data

Lecture 1: App Overview

Lecture 2: The Process of Fetching Data From an API

Lecture 3: Creating the App

Lecture 4: Where to Fetch the Data

Lecture 5: Making the HTTP Requests

Lecture 6: The Suspense Component

Lecture 7: Request Offsets and Limits

Lecture 8: Implementing Paginations

Lecture 9: Building the UI

Lecture 10: A Little Fix

Lecture 11: Component Lifecycle Hooks

Lecture 12: Fetching Data With onMounted

Lecture 13: Slots For Dynamic HTML

Lecture 14: More on Slots

Lecture 15: Adding a Better Loading State

Lecture 16: Creating the Header Component

Lecture 17: Maintaining State With KeepAlive

Chapter 10: State Managements in Vue

Lecture 1: Introduction to State Management

Lecture 2: Building a Small Project

Lecture 3: Declaring State With Reactive

Lecture 4: Ref vs Reactive

Lecture 5: A Lot of Nested Components

Lecture 6: Prop Drilling

Lecture 7: Provide/Inject

Lecture 8: Store Reusable Logic With Composables