Toggle navigation
Net Ninja Pro
All Courses
Community
YouTube Channel
Login
Sign Up
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Build Websites with Vue 3 & Firebase
Introduction & Setup
1 - what is Vue? (5:51)
2 - new features in Vue 3 (4:06)
3 - what you should know (1:36)
4 - environment setup (2:45)
5 - course files (1:24)
Vue Basics
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)
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
31 - project preview & setup (4:09)
32 - starting a new game (8:39)
33 - lifecycle hooks (10:33)
34 - creating a timer (4:54)
35 - custom events with data (6:23)
36 - challenge - showing the results component (2:48)
37 - finishing touches (4:19)
Forms & Data Binding
38 - forms intro & setup (5:27)
39 - 2-way data binding (5:08)
40 - select boxes (3:09)
41 - checkboxes (6:46)
42 - keyboard events (11:21)
43 - challenge - deleting skills (3:48)
44 - submitting forms (9:48)
Vue Router Basics
45 - why use the vue router (2:37)
46 - vue router setup for new projects (9:51)
47 - router links (6:34)
48 - folder structure (5:46)
49 - route paramteters (6:11)
50 - dynamic links (5:24)
51 - redirects & 404's (5:11)
52 - programatic navigation (5:57)
53 - lazy loading components (1:41)
Fetching Data
54 - using JSON Server (7:10)
55 - fetching data (8:35)
56 - conditionally showing data (4:21)
Project Build - Simple Project Planner
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
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)
79 - fetching data in setup( ) (11:07)
80 - reusable composable functions (8:16)
81 - creating another composable (9:23)
82 - creating a loading spinner (6:34)
83 - making a web form (13:45)
84 - challenge - making a post request (3:51)
85 - future async lessons (3:43)
Routing (with the Composition API)
86 - routing recap & navbar (5:00)
87 - using useRouter (3:33)
88 - using useRoute (2:09)
89 - challenge - tag view (10:49)
90 - creating a tag cloud (15:52)
Firebase Databases
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
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)
125 - installing firebase tools (6:18)
126 - building a vue app (1:18)
127 - deploying the app (1:32)
128 - making changes & redeploying (2:52)
Firebase Security Rules
129 - what are security rules? (2:12)
130 - paths & rules explained (8:24)
131 - requiring auth (in rules) (2:20)
132 - locking down the api (2:03)
Project Build - Muso Ninjas
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
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
189 - extra javascript lessons (0:47)
190 - imports & exports (5:04)
191 - filter & map methods (6:22)
192 - spread syntax (2:13)
193 - template strings (2:10)
194 - arrow function syntax (2:46)
195 - fetch api & promises (5:26)
196 - async & await (3:01)
149 - creating playlist documents
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock
