Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Vue JS 3: Composition API (with Pinia, Firebase 9 & Vite)
1: Introduction
Introduction (8:02)
What is the Composition API? (5:36)
Editor & Software Setup (7:44)
Vue Devtools (2:07)
2: Getting Started
Vue 3 Docs & Install Node.js (1:05)
Create a Vue Project (2:38)
Project Setup (3:43)
Finished Source Code
3: Options API vs Composition API - Switching Over
Options API - Design (1:34)
Options API - Data & Methods (1:59)
Convert it to Composition API (1:27)
Composition API - Data (refs) & Methods (3:20)
Script Setup - An Easier Way! (2:52)
Finished Source Code
4: Refs, Reactive Objects & Non-Reactive Data
Refs (1:27)
Two-Way Data Binding (1:31)
Reactive Objects (2:59)
Non-Reactive Data (1:20)
Finished Source Code
5: Methods, Computed & Watch
Methods (3:40)
Computed Properties (4:14)
A Note on Filters (1:32)
Watch (3:41)
Finished Source Code
6: Lifecycle Hooks
Mounted Hooks (4:18)
Activated Hooks (2:00)
Updated Hooks (1:31)
Multiple Hooks! (2:12)
Finished Source Code
7: Directives
Local Custom Directives (3:48)
Global Custom Directives (2:50)
Finished Source Code
8: Vue Router
$route - Part 1 (3:49)
$route - Part 2 (3:21)
useRoute (2:40)
useRouter (3:29)
Finished Source Code
9: Lists, Teleport, Template Refs & nextTick
Lists (v-for) (2:54)
Template Refs (3:04)
nextTick (1:51)
Teleport - Part 1 (4:23)
Teleport - Part 2 (3:21)
Finished Source Code
10: Child Components, Props & Emits
Child Components (2:51)
Fix Lazy-Loading Views (1:35)
Slots (3:34)
Props (3:51)
Emits (3:52)
modelValue (2:24)
update:modelValue (2:38)
Dynamic Components - Part 1 (2:46)
Dynamic Components - Part 2 (2:19)
Provide / Inject - Part 1 (4:10)
Provide / Inject - Part 2 (3:13)
Finished Source Code
11: Composables
What is a Composable? (4:54)
Create a Composable (2:39)
Use Our Composable (3:26)
Reuse our Composable (4:15)
Add Composable from VueUse (3:27)
Finished Source Code
12: State Management with Pinia
What is State Management? (5:35)
Composable State vs Vuex vs Pinia (5:02)
State - Part 1 (2:41)
State - Part 2 (5:41)
Actions (3:40)
Getters (2:42)
Use our Store Anywhere (2:22)
Finished Source Code
13: Noteballs: Setup & Router
Introduction & Noteballs App (2:06)
Create Project (2:14)
Router - Install & Setup (3:02)
Router - Add Some Routes (4:00)
Add RouterView & Navigation (1:50)
Router - Tidying Up (2:19)
Finished Source Code
14: Noteballs: Bulma & Design
Install Bulma (3:18)
Nav Bar - Design (2:46)
Nav Bar - Navigation & Logo (2:54)
Nav Bar - Responsive Design & Menu (5:05)
Pages (Design) (2:04)
Notes (Design) (1:51)
Add Note Form (Design) (2:30)
Finished Source Code
15: Noteballs: Data, Methods, Child Components, Computed & Emit
Notes Array (Ref) (2:37)
Add Note Method (9:00)
Child Component - Note (2:32)
Props (Note) (1:34)
Computed (Note Length) (5:45)
Delete Note (Emit) (6:24)
Finished Source Code
16: Noteballs: Pinia, Reusable Components, Router & More
Pinia - Setup & State (4:20)
Use Our Store (3:40)
Action - Add Note (3:47)
Action (with Parameters) - Add Note (2:38)
Action - Delete Note (5:15)
Edit Note Page & Route (4:38)
Reusable Component - AddEditNote (3:57)
Hook up with modelValue (5:32)
Important: Fix Production Error "modelValue is not defined"
Fix the Focus (5:04)
Custom Color, Placeholder & Label Props (10:32)
Getter - Get Note Content (useRoute) (5:35)
Getter (with Parameters) - Get Note Content (3:09)
Action - Update Note (6:24)
useRouter - Redirect to Notes Page (1:20)
More Getters & Stats Page (7:34)
Finished Source Code
17: Noteballs: Directives, Watchers & Composables
Directive - Autofocus (2:07)
Global Directive - Autofocus (2:57)
Watch the Number of Characters (Watch) (2:10)
Composable - useWatchCharacters (4:24)
Composable - Multiple Parameters (2:48)
Click Outside Composable (VueUse, Template Refs) (6:10)
Finished Source Code
18: Noteballs: Delete Modal
Delete Modal Design (Reactive Objects) (7:19)
Hide the Delete Modal (modelValue & update:modelValue) (5:21)
Delete Modal - Click Outside to Close (3:34)
Delete Modal - Keyboard Control (Lifecycle Hooks) (6:18)
Delete Modal - Delete The Note (4:57)
Finished Source Code
19: Firebase 9: Introduction & Setup
Introduction to Firebase (3:29)
Create a Firebase Project (1:46)
Create App & Install Firebase (2:03)
Setup Firestore Database (2:35)
Connect to Database (2:23)
20: Firebase 9: Read, Add, Delete, Update & Order
Display Notes from Firestore (7:17)
Get Notes in Real Time (7:49)
Add Note (6:21)
Delete Note (2:36)
Update Note (5:05)
Order Notes by Date (ID) (5:32)
Improve Document Structure & Auto ID’s (5:26)
Display Date on Note (9:37)
Add a Progress Bar (4:54)
Show Placeholder when No Notes (2:08)
21: Firebase 9: Authentication
Login & Register Page - Tabs (7:29)
Login & Register Page - Form (8:31)
Firestore Authentication & Auth Store (3:40)
Register User (7:05)
Logout User (2:24)
Login User (3:25)
Listen for Auth Changes & Store User Data (7:50)
Improve Logout Button (4:03)
Redirect User on Auth Change (5:23)
22: Firebase 9: Multiple Users
Restructure Database for Multiple Users (5:42)
Setup Refs for Multiple Users (7:18)
Clear Notes array in State when user logs out (4:12)
Unsubscribe from the Get Notes Listener (8:53)
23: Firebase 9: Security & Hosting
Navigation Guards - Part 1 (3:48)
Navigation Guards - Part 2 (4:46)
Firestore Security Rules - Part 1 (3:30)
Firebase Security Rules - Part 2 (5:19)
Hosting - Part 1 (6:18)
Hosting - Part 2 (4:07)
24: Bonus Lectures
Bonus Lecture (2:22)
Teach online with
Fix the Focus
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock