Vue 3 & Firebase Masterclass
This is a Net Ninja Pro Exclusive 20+ hr Course.
Learn Vue.js 3 (the latest major version) and Firebase from the ground-up to create amazing, interactive, content-driven & dynamic websites.
In this course you'll learn Vue.js from the very beginning & create multiple projects - a live chatroom, a project planner, a reaction timer and a social music playlist site. You'll also learn the latest Vue 3 features such as the Composition API.
In This Course...
Introduction & Setup
Available in
days
days
after you enroll
Vue Basics
Available in
days
days
after you enroll
- 6 - how to use Vue (using the cdn) (3:39)
- 7 - creating a Vue app (5:25)
- 8 - data & templates (4:32)
- 9 - click events (8:01)
- 10 - conditional rendering (8:42)
- 11 - other mouse events (10:09)
- 12 - outputting lists (v-for) (4:15)
- 13 - attribute binding (5:28)
- 14 - dynamic classes (4:50)
- 15 - toggling favs (1:45)
- 16 - solution - toggling favs (2:20)
- 17 - computed properties (5:02)
The Vue CLI (for Bigger Projects)
Available in
days
days
after you enroll
- 18 - why use the Vue CLI (2:50)
- 19 - using the Vue CLI (5:14)
- 20 - new project walkthrough (7:52)
- 21 - Vue files & templates (9:23)
- 22 - template refs (4:05)
- 23 - multiple components (9:28)
- 24 - scoped & global CSS (6:15)
- 25 - props (11:11)
- 26 - emitting custom events (5:33)
- 27 - click event modifiers (3:44)
- 28 - slots (8:57)
- 29 - challenge - creating another modal (4:15)
- 30 - using teleport (3:56)
Project Build - Reaction Timer
Available in
days
days
after you enroll
Forms & Data Binding
Available in
days
days
after you enroll
Vue Router Basics
Available in
days
days
after you enroll
Fetching Data
Available in
days
days
after you enroll
Project Build - Simple Project Planner
Available in
days
days
after you enroll
- 57 - project preview & setup (5:09)
- 58 - home template & data (5:47)
- 59 - single project component (7:01)
- 60 - using material icons (4:04)
- 61 - deleting projects (8:33)
- 62 - completing projects (11:39)
- 63 - new project form (5:45)
- 64 - adding new projects (5:10)
- 65 - navbar component (3:37)
- 66 - edit project component (8:39)
- 67 - challenge - updating projects (4:32)
- 68 - creating a filter nav (8:53)
- 69 - challenge - filtering projects (5:02)
The Composition API
Available in
days
days
after you enroll
- 70 - drawbacks of the Options API (4:43)
- 71 - Composition API basics (7:12)
- 72 - template refs (6:18)
- 73 - using refs for reactivity (6:57)
- 74 - refs vs reactive (6:38)
- 75 - using computed values (6:56)
- 76 - watch & watchEffect (5:43)
- 77 - using props in the setup function (8:16)
- 78 - lifecycle hooks (5:53)
Async Code (& the Composition API)
Available in
days
days
after you enroll
Routing (with the Composition API)
Available in
days
days
after you enroll
Firebase Databases
Available in
days
days
after you enroll
- 91 - creating a firebase project (3:39)
- 92 - connecting to firebase (7:38)
- 93 - firestore collections (4:56)
- 94 - fetching a collection of documents (9:32)
- 95 - fetching a single document (6:34)
- 96 - adding new documents (3:53)
- 97 - deleting documents (5:35)
- 98 - timestamps (5:48)
- 99 - ordering documents (2:19)
- 100 - intro to real-time data (11:54)
Project Build - Live Chatroom with Authentication
Available in
days
days
after you enroll
- 101 - project preview & setup (7:03)
- 102 - firebase setup (4:23)
- 103 - login & signup view (8:04)
- 104 - switching between forms (4:34)
- 105 - firebase auth setup (3:30)
- 106 - creating a signup composable (14:36)
- 107 - outputting errors (3:06)
- 108 - creating a login composable (7:30)
- 109 - setup context & custom events (6:39)
- 110 - navbar component (3:49)
- 111 - logging users out (5:00)
- 112 - getting the current user (8:38)
- 113 - route guards (9:16)
- 114 - waiting for firebase (4:21)
- 115 - challenge - watching the current user (4:01)
- 116 - new chat form (8:37)
- 117 - adding messages (10:06)
- 118 - real-time listener composable (11:52)
- 119 - creating the chat window (7:02)
- 120 - formatting the date (5:50)
- 121 - challenge - auto-scrolling the chat window (3:57)
- 122 - unsubscribing from real-time data (6:02)
- 123 - final route guard (2:27)
- 124 - testing the chatroom (0:53)
Building & Deploying (Firebase Hosting)
Available in
days
days
after you enroll
Firebase Security Rules
Available in
days
days
after you enroll
Project Build - Muso Ninjas
Available in
days
days
after you enroll
- 133 - project preview & setup (6:46)
- 134 - global styles & custom font (7:37)
- 135 - firebase setup (4:15)
- 136 - firebase config file (3:50)
- 137 - reusing firebase composables (10:36)
- 138 - creating a login view (8:31)
- 139 - making a pending state (6:38)
- 140 - creating a signup view (7:07)
- 141 - navbar component (8:32)
- 142 - challenge - logging users out (4:00)
- 143 - challenge - conditionally showing links (3:18)
- 144 - new project component (7:42)
- 145 - handling file imputs (11:04)
- 146 - intro to firebase storage (4:23)
- 147 - uploading images (part 1) (8:07)
- 148 - uploading images (part 2) (5:43)
- 149 - creating playlist documents (12:56)
- 150 - challenge - getting real-time playlist data (4:35)
- 151 - listing playlists (5:36)
- 152 - navbar & route guard (8:14)
- 153 - playlist details route (4:41)
- 154 - redirecting to playlist details (5:00)
- 155 - real-time document data (7:37)
- 156 - playlist details template (9:32)
- 157 - checking playlist ownership (7:13)
- 158 - deleting playlists (9:27)
- 159 - deleting images (6:12)
- 160 - more on firestore rules (7:30)
- 161 - firebase storage rules (6:40)
- 162 - adding songs to playlists (11:29)
- 163 - updating firestore documents (8:44)
- 164 - listing songs (6:05)
- 165 - challenge - deleting songs (5:13)
- 166 - user playlists route (6:15)
- 167 - firestore queries (9:44)
- 168 - listing user playlists (3:40)
- 169 - final touches (2:21)
- 170 - building & deploying (2:10)
- 171 - next steps (1:11)
Using Vue with Firebase 9
Available in
days
days
after you enroll
- 172 - Intro & Starter Project (9:15)
- 173 - Firebase Config Setup (6:09)
- 174 - Fetching Firestore Data (7:46)
- 175 - Real Time Collection Data (10:27)
- 176 - Adding New Documents (4:34)
- 177 - Deleting Documents (3:22)
- 178 - Updating Documents (6:10)
- 179 - Firebase Auth Setup (1:39)
- 180 - Signing Users Up (9:11)
- 181 - Logging Users Out (2:42)
- 182 - Logging Users In (4:19)
- 183 - Getting the Current User (7:43)
- 184 - Conditional Navbar Content (4:15)
- 185 - Waiting for Auth to be Ready (5:08)
- 186 - Making a Route Guard (5:14)
- 187 - Redirecting Users (2:40)
- 188 - Firestore Queries (10:58)
Extra JavaScript Lessons
Available in
days
days
after you enroll
Sign up for Net Ninja Pro
Most popular
Monthly Membership
$9/mo
- Instant access to all courses
- Early access to new courses
- Access to premium & Udemy courses
- Cancel at any time
Yearly Membership
$79/yr
- Instant access to all courses
- Early access to new courses
- Access to premium & Udemy courses
- Save over 25%!
Get your first month half price when you use the code NINJAFLEDGLING. (monthly plan only).