Vue JS 3: Composition API (with Pinia, Firebase 9 & Vite)

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: What is the Composition API?

Lecture 3: Editor & Software Setup

Lecture 4: Vue Devtools

Chapter 2: Getting Started

Lecture 1: Vue 3 Docs & Install Node.js

Lecture 2: Create a Vue Project

Lecture 3: Project Setup

Lecture 4: Finished Source Code

Chapter 3: Options API vs Composition API – Switching Over

Lecture 1: Options API – Design

Lecture 2: Options API – Data & Methods

Lecture 3: Convert it to Composition API

Lecture 4: Composition API – Data (refs) & Methods

Lecture 5: Script Setup – An Easier Way!

Lecture 6: Finished Source Code

Chapter 4: Refs, Reactive Objects & Non-Reactive Data

Lecture 1: Refs

Lecture 2: Two-Way Data Binding

Lecture 3: Reactive Objects

Lecture 4: Non-Reactive Data

Lecture 5: Finished Source Code

Chapter 5: Methods, Computed & Watch

Lecture 1: Methods

Lecture 2: Computed Properties

Lecture 3: A Note on Filters

Lecture 4: Watch

Lecture 5: Finished Source Code

Chapter 6: Lifecycle Hooks

Lecture 1: Mounted Hooks

Lecture 2: Activated Hooks

Lecture 3: Updated Hooks

Lecture 4: Multiple Hooks!

Lecture 5: Finished Source Code

Chapter 7: Directives

Lecture 1: Local Custom Directives

Lecture 2: Global Custom Directives

Lecture 3: Finished Source Code

Chapter 8: Vue Router

Lecture 1: $route – Part 1

Lecture 2: $route – Part 2

Lecture 3: useRoute

Lecture 4: useRouter

Lecture 5: Finished Source Code

Chapter 9: Lists, Teleport, Template Refs & nextTick

Lecture 1: Lists (v-for)

Lecture 2: Template Refs

Lecture 3: nextTick

Lecture 4: Teleport – Part 1

Lecture 5: Teleport – Part 2

Lecture 6: Finished Source Code

Chapter 10: Child Components, Props & Emits

Lecture 1: Child Components

Lecture 2: Fix Lazy-Loading Views

Lecture 3: Slots

Lecture 4: Props

Lecture 5: Emits

Lecture 6: modelValue

Lecture 7: update:modelValue

Lecture 8: Dynamic Components – Part 1

Lecture 9: Dynamic Components – Part 2

Lecture 10: Provide / Inject – Part 1

Lecture 11: Provide / Inject – Part 2

Lecture 12: Finished Source Code

Chapter 11: Composables

Lecture 1: What is a Composable?

Lecture 2: Create a Composable

Lecture 3: Use Our Composable

Lecture 4: Reuse our Composable

Lecture 5: Add Composable from VueUse

Lecture 6: Finished Source Code

Chapter 12: State Management with Pinia

Lecture 1: What is State Management?

Lecture 2: Composable State vs Vuex vs Pinia

Lecture 3: State – Part 1

Lecture 4: State – Part 2

Lecture 5: Actions

Lecture 6: Getters

Lecture 7: Use our Store Anywhere

Lecture 8: Finished Source Code

Chapter 13: Noteballs: Setup & Router

Lecture 1: Introduction & Noteballs App

Lecture 2: Create Project

Lecture 3: Router – Install & Setup

Lecture 4: Router – Add Some Routes

Lecture 5: Add RouterView & Navigation

Lecture 6: Router – Tidying Up

Lecture 7: Finished Source Code

Chapter 14: Noteballs: Bulma & Design

Lecture 1: Install Bulma

Lecture 2: Nav Bar – Design

Lecture 3: Nav Bar – Navigation & Logo

Lecture 4: Nav Bar – Responsive Design & Menu

Lecture 5: Pages (Design)

Lecture 6: Notes (Design)

Lecture 7: Add Note Form (Design)

Lecture 8: Finished Source Code

Chapter 15: Noteballs: Data, Methods, Child Components, Computed & Emit

Lecture 1: Notes Array (Ref)