Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS AWS Certified Developer - Associate CompTIA Security+
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2020-12-01 12:55:00
30-Day Money-Back Guarantee

This course includes:

  • 30 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
Development Web Development Vue JS

Build Web Apps with Vue JS 3 & Firebase

Learn Vue JS 3 & Firebase by creating & deploying dynamic web apps (including Authentication).
Highest Rated
Rating: 4.8 out of 54.8 (4,043 ratings)
15,450 students
Created by The Net Ninja (Shaun Pelling)
Last updated 12/2020
English
English [Auto], Italian [Auto], 
30-Day Money-Back Guarantee

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!
Curated for the Udemy for Business collection

Course content

27 sections • 297 lectures • 29h 46m total length

  • Preview05:51
  • Preview04:06
  • Preview01:36
  • Environment Setup
    02:45
  • Course Files
    01:24

  • How to use Vue (using the CDN)
    03:39
  • Creating a Vue App
    05:25
  • Templates & Data
    04:32
  • Methods & Click Events
    08:01
  • Conditional Rendering
    08:42
  • Other Mouse Events
    10:09
  • Outputting Lists (v-for)
    04:15
  • Attribute Binding
    05:28
  • Dynamic Classes
    04:50
  • CHALLENGE - Add to Favs
    01:45
  • SOLUTION - Add to Favs
    02:20
  • Computed Properties
    05:02

  • Why Use the Vue CLI?
    02:50
  • How to Use the Vue CLI
    05:14
  • New Project Walkthrough
    07:52
  • Vue Files & Templates
    09:23
  • Template Refs
    04:05
  • Multiple Components
    09:28
  • Component Styles & Global Styles
    06:15
  • Passing Data with Props
    11:11
  • Emitting Custom Events
    05:33
  • Click Event Modifiers
    03:44
  • Slots
    08:57
  • CHALLENGE - Reusing Components
    04:15
  • Using Teleport
    03:56

  • Preview04:09
  • Starting a New Game
    08:39
  • Component Lifecycle Hooks
    10:33
  • Creating the Reaction Timer
    04:54
  • Emitting Custom Events with Data
    06:23
  • CHALLENGE - Showing a Results Component
    02:48
  • Finishing Touches
    04:19

  • Preview05:27
  • Two-way Data Binding
    05:08
  • Select Fields
    03:09
  • Checkboxes
    06:46
  • Keyboard Events & Modifiers
    11:21
  • CHALLENGE - Deleting Skills
    03:48
  • Submitting the Form
    09:48

  • Preview02:37
  • Router Setup for New Projects
    09:51
  • Router Links
    06:34
  • Folder Structure
    05:46
  • Route Parameters
    06:11
  • Dynamic Links
    05:24
  • 404 Pages & Redirects
    05:11
  • Programmatic Navigation
    05:57
  • Lazy Loading Components
    01:41

  • Using JSON Server
    07:10
  • Where to Fetch Data
    08:35
  • Conditionally Showing Data
    04:21

  • Preview05:09
  • Home View & Data
    05:47
  • Single Project Template
    07:01
  • Using Material Icons
    04:04
  • Deleting Projects
    08:33
  • Completing Projects
    11:39
  • New Project Form
    05:45
  • Adding New Projects
    05:10
  • Navbar Component
    03:37
  • Edit Project Route
    08:39
  • CHALLENGE - Updating Projects
    04:32
  • Creating a Filter Nav
    08:53
  • CHALLENGE - Showing Filtered Projects
    05:02

  • Preview04:43
  • Preview07:12
  • Template Refs in the Setup Function
    06:18
  • Using Refs for Reactivity
    06:57
  • Refs vs Reactive
    06:38
  • Computed Values in the Setup Function
    06:56
  • Using watch and watchEffect
    05:43
  • Using Props in the Setup Function
    08:17
  • Lifecycle Hooks
    05:53

  • Fetching Data in the Setup Function
    11:07
  • Reusable Composition Functions (Composables)
    08:16
  • Creating Another Composable
    09:23
  • Creating a Loading Spinner
    06:34
  • Making a Web Form
    13:45
  • CHALLENGE - Making a POST Request
    03:51
  • Future Async Lesson & Extra Styling
    03:43

Requirements

  • A basic understanding of HTML, CSS & JavaScript
  • ES6 Knowledge is advantageous
  • An appreciation of async JavaScript is a plus but not essential

Description

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!

I'm also know as The Net Ninja on YouTube

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

Who this course is for:

  • Anyone who wants to learn how to create websites with Vue 3 & 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 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
Rating: 5.0 out of 5a 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!

Instructor

The Net Ninja (Shaun Pelling)
Online Coding Tutor & Net Ninja
The Net Ninja (Shaun Pelling)
  • 4.8 Instructor Rating
  • 10,926 Reviews
  • 43,272 Students
  • 3 Courses

A Little About Me...

Hey gang, my name's Shaun and since a young age I've had an obsession for nearly anything tech-related. I've been coding since about the age of 15 (half of my life, now...phew!) and work as a full-stack web developer and online instructor.

I also run a well-known development tutorial YouTube channel called The Net Ninja with nearly 500,000 subscribers. So feel free to browse some of my latest free tutorials on there if you want to check out my teaching style :).

My specialities mainly gravitate around one central language (and my first love) - JavaScript. I've been programming with it for around 12 years and - as with any long-term relationship - have had the pleasure of seeing it's ugly side as well as it's beautiful side. So I know the pitfalls to avoid when using it, and pass these on when appropriate in my tutorials.

As well as teaching, I've also helped to create many very popular, UK-based eCommerce websites, as well as a large amount of smaller, independent websites as well.

Other languages & technologies I use and teach are - Node.js, Vue, React, Python, Ruby, PHP, HTML & CSS.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.