Notes Array (Ref) | Make Apps Academy

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

Notes Array (Ref)

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock