Development
Web Development
Vue JS
Build Web Apps with Vue JS 2 & Firebase
4.7 (3,252 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
12,060 students enrolled

Build Web Apps with Vue JS 2 & Firebase

Learn Vue JS & Firebase by creating & deploying dynamic web apps (including Authentication).
4.7 (3,252 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
12,060 students enrolled
Created by The Net Ninja (Shaun Pelling)
Last updated 10/2018
English
English [Auto], Indonesian [Auto], 3 more
  • Italian [Auto]
  • Polish [Auto]
  • Romanian [Auto]
Preview this course
Build Web Apps with Vue JS 2 & Firebase
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 11.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Get in-depth knowledge of Vue JS & Firebase from the ground up
  • Build & deploy 3 real-world web apps with Vue JS & Firebase
  • Learn about & implement Firebase authentication into Vue JS web apps
  • Use other Firebase services such as a Firestore database, Cloud Functions & Hosting
Course content
Expand all 118 lectures 11:43:39
+ – Vue.js Basics
12 lectures 01:05:25
What is Vue.js?
Preview 03:36
Setting up Vue.js (the simple way)
Preview 03:08
The Vue Instance
05:28
Methods
06:22
Data Binding
06:18
Events
05:52
The Event Object
05:50
Keyboard Events
04:44
Two-way Data Binding (v-model)
03:11
Modifiers
05:12
Conditional Output with v-if
07:53
Looping with v-for
07:51
+ – The Vue CLI
11 lectures 01:31:32
The Vue CLI
08:46
Components & Vue Files
12:52
The data() Function
04:02
Nesting Components
08:36
Scoped CSS
05:01
Passing Data with Props
13:37
Custom Events
09:25
Life-cycle Hooks
10:34
Making Requests with Axios
08:11
Filters
04:04
Computed Properties (custom search box)
06:24
+ – The Vue Router
9 lectures 45:06
What is the Vue Router?
05:57
Setting up Routes
07:04
Router Links
06:05
Route Parameters
07:26
Watching the $route Object
03:09
More on Router Links
04:41
Programmatically Redirecting Users
05:41
Hash vs History Mode
02:50
Styling Active Links
02:13
+ – Project One - Ninja Smoothies
22 lectures 02:28:31
Project Preview & Setup
Preview 04:53
Project Structure
02:33
Material Design
02:05
Navbar Component
06:22
Index Component
12:28
Deleting (local) Data
05:44
Introduction to Firebase
04:06
Setting up Firestore
05:46
Installing Firebase
06:03
Retrieving Firestore Data
11:02
Deleting Firestore Data
06:07
Add Smoothie Component
11:29
Adding Ingredients
09:57
Outputting Ingredients
04:26
Saving Records to Firestore
09:03
Deleting Ingredients
05:08
Edit Smoothie Route
08:20
Firestore Queries
09:32
Edit Smoothie Form
06:42
Updating Firestore Records
06:52
Deploying to Firebase
08:29
Project Review
01:24
+ – Project Two - Real-Time Chat App
14 lectures 01:13:07
Project Overview & Setup
Preview 03:14
Project Structure
Processing..
Firestore Setup
05:06
Making a Welcome Screen
08:41
Passing Props Via Routes
08:48
Route Guards
06:15
Creating the Chat Window
06:06
New Message Component
06:05
Adding Messages to Firestore
05:57
Real-Time Events (event listeners)
10:47
Formatting Times with Moment
03:33
Auto-scrolling
04:04
Deploying the App
03:37
Project Review
00:54
+ – Project Three - Geo Ninjas
27 lectures 02:49:27
Project Overview & Setup
Preview 02:18
Project Structure
02:02
Setting up Firebase
02:16
Navbar Component
04:37
Map Component
02:23
Google Maps API
06:41
Creating a New Map
07:07
Creating a Signup Page
07:42
Firebase Auth & Data Structure
04:36
Checking if an Alias exists
13:10
Signing up a User
05:42
Creating Firestore User Records
06:39
Wrapping the Vue Instance
08:14
Logging a User Out
04:50
Login Component
07:43
Logging Users In
07:05
Geolocation API
08:57
Updating a User’s Location
08:24
Route Guarding (auth)
07:56
Conditional Navbar Links
07:07
Ninja (map) Markers
06:42
User Profiles
08:34
User Comments (data discussion)
02:26
Adding Comments
09:43
Showing Comments (Real-Time)
09:06
Some Final Styles
03:58
Deploying the app
03:29
+ – Firebase Cloud Functions
4 lectures 21:38
What Are Cloud Functions?
02:07
Creating a Simple Callable Function
07:03
Calling a Function
07:40
Intro to Firebase Rules
04:48
+ – ES6 & Extras
4 lectures 19:11
ES6 Arrow Functions
04:40
ES6 Promises
05:45
Imports and Exports
03:35
JavaScript Filter Method
05:11
+ – BONUS: Vue CLI 3
12 lectures 01:02:32
Vue CLI 3 Introduction
Preview 04:08
Using the new Vue CLI
06:19
The CLI Service
02:42
Custom Presets
06:20
Adding Plugins
04:50
Build & Deploy to Firebase
05:44
Instant Prototyping
08:53
Build Targets (Making a Web Component)
07:37
Using Web Components
04:23
The Vue GUI (part 1)
05:10
The Vue GUI (part 2)
04:47
Using 'vue init' with the New CLI
01:39
Requirements
  • A basic understanding of HTML, CSS & JavaScript
  • ES6 Knowledge is advantageous
  • An appreciation of AJAX is a plus but not essential
Description

If you're looking to get started building full-stack applications with Vue JS and Firebase, then look no further. In this course I'll take you from novice to ninja in Vue JS, starting out with the very basics of VueJS and then moving on towards creating fully-fledged VueJS 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 Vue applications.

I'll also teach you how to use Firebase, an online, free service provided by Google which acts as a very feature-rich, fully-fledged back-end to our applications. We'll learn how to use Firebase to store and retrieve 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 Cloud Functions (which allow us to run server-side JavaScript code in a Node.js environment), as well as deploying all of our applications to Firebase hosting.

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 JS and Firebase!

I'm also know as The Net Ninja on YouTube

...With around 200,000 subscribers and nearly 1000 free web development tutorials. So feel free to check out my teaching style and reviews before you buy my course :).

This course is built with Vue 2.x, and will be added to with extra sections in the future.

Who this course is for:
  • Anyone who wants to learn how to create apps with Vue & Firebase
  • Anyone who wants to learn Vue and Firebase
  • Anyone who wants to learn about Authentication in Vue apps
  • Anyone who wants to learn Vue JS from the ground up
  • Anyone who wants to learn how to use Firebase in their applications
Featured review
Sina Keshavarzi
Sina Keshavarzi ( 8 courses, 2 reviews )
a year ago
A really good teacher, good pace, good stuff covered. The only thing is that the code is a little bit lagging in current Vue setup. The folder structure and files created by newer version of vue cli are not aligned with the videos here. Would be great if the teacher could update or atleast create a video informing about how to go about when things like index.js no longer exists and router.js is used instead and so on. Besides the not so up-to-date everything else is great!