English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 30 Hours | 12.2 GB
Learn Vue JS 3 & Firebase by creating & deploying dynamic web apps (including Authentication).
If you’re looking to get started building full-stack applications with Vue 3 (or Vue 2) and Firebase, then look no further. In this course I’ll take you from novice to ninja in Vue JS 3, starting out with the very basics and then moving on towards creating fully-fledged Vue applications.
We’ll spend a whole chapter learning about the Vue Router – and how to create SPA’s (single page applications) using it – as well as exploring how to use the Vue CLI to get up and running quickly when creating slightly larger Vue applications.
We’ll also dive deep into the newest features Vue 3 has to offer, including a lot about the Composition API & Composable Functions.
I’ll also teach you how to use Firebase – an online & free service provided by Google which will act as a feature-rich back-end to our Vue applications. We’ll learn how to use Firebase to store and retrieve real-time data to and from a NoSQL database called Firestore, as well as authenticate our app’s users with the Firebase Auth service, We’ll also take a peak at Firebase Storage (which will enable us to allow users to upload images on our Vue sites), as well as deploying all of our applications to Firebase hosting.
Along the way we’ll create several full projects, including a reaction timer, project tracker, a blog, a real-time chatroom & a music playlist website.
There’s a crazy amount to cover, but by the end of this course you’ll be in a position to create full-stack web applications (complete with user authentication) using Vue 3 and Firebase!
What you’ll learn
- Learn how to create Vue 3 applications from the ground-up
- Get in-depth knowledge of Vue features like the Vue Router, Vue CLI, Options API, Composition API, Teleport etc
- Get hands-on & in-depth experience using the latest Vue 3 features (such as the Composition API)
- Learn how to use Firebase as a back-end to your Vue applications (as a database, authentication service, hosting etc)
- Build & deploy 4 real-world web apps with Vue & Firebase
- Learn how to implement an authentication system into your Vue js apps using Firebase Auth
- Become a Vue 3 ninja!
Table of Contents
Introduction Setup
1 What is Vue
2 New Features in Vue 3
3 What You Should Already Know
4 Environment Setup
5 Course Files
Vue Basics
6 How to use Vue (using the CDN)
7 Creating a Vue App
8 Templates Data
9 Methods Click Events
10 Conditional Rendering
11 Other Mouse Events
12 Outputting Lists (v-for)
13 Attribute Binding
14 Dynamic Classes
15 CHALLENGE – Add to Favs
16 SOLUTION – Add to Favs
17 Computed Properties
The Vue CLI (for Bigger Projects)
18 Why Use the Vue CLI
19 How to Use the Vue CLI
20 New Project Walkthrough
21 Vue Files Templates
22 Template Refs
23 Multiple Components
24 Component Styles Global Styles
25 Passing Data with Props
26 Emitting Custom Events
27 Click Event Modifiers
28 Slots
29 CHALLENGE – Reusing Components
30 Using Teleport
PROJECT BUILD – Reaction Timer
31 Project 1 Preview Setup
32 Starting a New Game
33 Component Lifecycle Hooks
34 Creating the Reaction Timer
35 Emitting Custom Events with Data
36 CHALLENGE – Showing a Results Component
37 Finishing Touches
Forms Data Binding
38 Forms Intro Setup
39 Two-way Data Binding
40 Select Fields
41 Checkboxes
42 Keyboard Events Modifiers
43 CHALLENGE – Deleting Skills
44 Submitting the Form
Vue Router Basics
45 Why Use the Vue Router
46 Router Setup for New Projects
47 Router Links
48 Folder Structure
49 Route Parameters
50 Dynamic Links
51 Pages Redirects
52 Programmatic Navigation
53 Lazy Loading Components
Fetching Data
54 Using JSON Server
55 Where to Fetch Data
56 Conditionally Showing Data
PROJECT BUILD – Simple Project Planner
57 Project 2 Preview Setup
58 Home View Data
59 Single Project Template
60 Using Material Icons
61 Deleting Projects
62 Completing Projects
63 New Project Form
64 Adding New Projects
65 Navbar Component
66 Edit Project Route
67 CHALLENGE – Updating Projects
68 Creating a Filter Nav
69 CHALLENGE – Showing Filtered Projects
The Composition API
70 Drawbacks of the Options API
71 Composition API Basics
72 Template Refs in the Setup Function
73 Using Refs for Reactivity
74 Refs vs Reactive
75 Computed Values in the Setup Function
76 Using watch and watchEffect
77 Using Props in the Setup Function
78 Lifecycle Hooks
Async Code ( the Composition API)
79 Fetching Data in the Setup Function
80 Reusable Composition Functions (Composables)
81 Creating Another Composable
82 Creating a Loading Spinner
83 Making a Web Form
84 CHALLENGE – Making a POST Request
85 Future Async Lesson Extra Styling
Routing (with the Composition API)
86 Routing Recap Navbar
87 Using useRouter
88 Using useRoute
89 CHALLENGE – Creating a Tag Route
90 Creating a Tag Cloud
Firebase Databases (Firestore)
91 Creating a Firebase Project
92 Connecting to a Firebase Project
93 Firestore Collections Documents
94 Fetching a Collection of Documents
95 Fetching Single Documents
96 Adding Documents
97 Deleting Docments
98 Using Timestamps
99 Ordering Collections
100 Intro to Real-Time Listeners
PROJECT BUILD – Live Chat Room with Authentication
101 Project 3 Preview Setup
102 Firebase Setup ( Reusing Firebase Projects)
103 Creating a Signup Login Form
104 CHALLENGE – Switching Between Forms
105 Firebase Authentication Setup
106 Creating a Signup Composable
107 Outputting Errors
108 Creating a Login Composable
109 Setup Context Emitting Events
110 Navbar Component
111 Logging Users Out (Composable)
112 Getting the Current User (Composable)
113 Route Guards (for Unauth Users)
114 Waiting for Firebase Auth to Initialize
115 CHALLENGE – Watching the Current User
116 New Chat Form
117 Adding New Messages to Firestore
118 Real-Time Firestore Listener (Composable)
119 Creating the Chat Window
120 Formatting Dates (date-fns)
121 CHALLENGE – Auto-Scrolling the Chat Window
122 Unsubscribing From Real-Time Listeners
123 Final Route Guard
124 Testing Next Steps
Building Deploying (Firebase Hosting)
125 The Firebase CLI
126 Building an App
127 Deploying the App
128 Making Changes Re-deploying
Firebase Security Rules
129 What Are Security Rules
130 Paths Rules Explained
131 Requiring Authentication
132 Locking the API to a Domain
PROJECT BUILD – Muso Ninjas ( Firebase Storage)
133 Project 4 Preview Setup
134 Global Styles Custom Font
135 Creating a Firebase Project
136 Connecting to Firebase
137 Reusing Firebase Composables
138 Creating a Login View
139 Adding a pending State to Requests
140 Creating a Signup View
141 Adding a Navbar Component
142 CHALLENGE – Logging Users Out
143 CHALLENGE – Conditionally Showing Links
144 New Playlist Component
145 Handling File Changes
146 Intro to Firebase Storage
147 Uploading Images (part 1)
148 Uploading Images (part 2)
149 Adding New Playlists
150 CHALLENGE – Getting Real-Time Playlist Data
151 Listing Playlists
152 Nav Update Route Guards
153 Playlist Details Route
154 Redirecting to Playlist Details
155 Getting Single Documents (Real-time)
156 Playlist Details Template
157 Checking Playlist Ownership
158 CHALLENGE – Deleting a Playlist (Composable)
159 Deleting Images from Storage
160 More on Firestore Rules
161 Storage Rules
162 Adding Songs to Playlists
163 Updating Playlist Details
164 Listing Songs
165 CHALLENGE – Deleting Songs
166 User Playlists Route
167 Firestore Queries
168 Listing User Playlists
169 Final Touches
170 Building Deploying
171 Next Steps
Extra Lessons More Resources
172 Extra JavaScript Lessons
173 ES6 Modules (Import Export)
174 Using map( ) filter( )
175 Spread Syntax
176 Template Strings
177 Arrow Function Syntax
178 Fetch Promises
179 Async Await
ARCHIVED – Introduction
180 Introduction
181 Course Files
182 Text Editor Setup
ARCHIVED – Vue.js Basics
183 What is Vue.js
184 Setting up Vue.js (the simple way)
185 The Vue Instance
186 Methods
187 Data Binding
188 Events
189 The Event Object
190 Keyboard Events
191 Two-way Data Binding (v-model)
192 Modifiers
193 Conditional Output with v-if
194 Looping with v-for
ARCHIVED – The Vue CLI
195 The Vue CLI
196 Components Vue Files
197 The data() Function
198 Nesting Components
199 Scoped CSS
200 Passing Data with Props
201 Custom Events
202 Life-cycle Hooks
203 Making Requests with Axios
204 Filters
205 Computed Properties (custom search box)
ARCHIVED – The Vue Router
206 What is the Vue Router
207 Setting up Routes
208 Router Links
209 Route Parameters
210 Watching the route Object
211 More on Router Links
212 Programmatically Redirecting Users
213 Hash vs History Mode
214 Styling Active Links
ARCHIVED – Project One – Ninja Smoothies
215 Project Preview Setup
216 Project Structure
217 Material Design
218 Navbar Component
219 Index Component
220 Deleting (local) Data
221 Introduction to Firebase
222 Setting up Firestore
223 Installing Firebase
224 Retrieving Firestore Data
225 Deleting Firestore Data
226 Add Smoothie Component
227 Adding Ingredients
228 Outputting Ingredients
229 Saving Records to Firestore
230 Deleting Ingredients
231 Edit Smoothie Route
232 Firestore Queries
233 Edit Smoothie Form
234 Updating Firestore Records
235 Deploying to Firebase
236 Project Review
ARCHIVED – Project Two – Real-Time Chat App
237 Project Overview Setup
238 Project Structure
239 Firestore Setup
240 Making a Welcome Screen
241 Passing Props Via Routes
242 Route Guards
243 Creating the Chat Window
244 New Message Component
245 Adding Messages to Firestore
246 Real-Time Events (event listeners)
247 Formatting Times with Moment
248 Auto-scrolling
249 Deploying the App
250 Project Review
ARCHIVED – Project Three – Geo Ninjas
251 Project Overview Setup
252 Project Structure
253 Setting up Firebase
254 Navbar Component
255 Map Component
256 Google Maps API
257 Creating a New Map
258 Creating a Signup Page
259 Firebase Auth Data Structure
260 Checking if an Alias exists
261 Signing up a User
262 Creating Firestore User Records
263 Wrapping the Vue Instance
264 Logging a User Out
265 Login Component
266 Logging Users In
267 Geolocation API
268 Updating a Users Location
269 Route Guarding (auth)
270 Conditional Navbar Links
271 Ninja (map) Markers
272 User Profiles
273 User Comments (data discussion)
274 Adding Comments
275 Showing Comments (Real-Time)
276 Some Final Styles
277 Deploying the app
ARCHIVED – Firebase Cloud Functions
278 What Are Cloud Functions
279 Creating a Simple Callable Function
280 Calling a Function
281 Intro to Firebase Rules
ARCHIVED – ES6 Extras
282 ES6 Arrow Functions
283 ES6 Promises
284 Imports and Exports
285 JavaScript Filter Method
ARCHIVED – BONUS Vue CLI 3
286 Vue CLI 3 Introduction
287 Using the new Vue CLI
288 The CLI Service
289 Custom Presets
290 Adding Plugins
291 Build Deploy to Firebase
292 Instant Prototyping
293 Build Targets (Making a Web Component)
294 Using Web Components
295 The Vue GUI (part 1)
296 The Vue GUI (part 2)
297 Using vue init with the New CLI
Resolve the captcha to access the links!