Mô tả

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 :).

Bạn sẽ học được gì

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!

Yêu cầu

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

Nội dung khoá học

28 sections

Introduction & Setup

5 lectures
What is Vue?
05:51
New Features in Vue 3
04:06
What You Should Already Know
01:36
Environment Setup
02:45
Course Files
01:24

Vue Basics

12 lectures
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

The Vue CLI (for Bigger Projects)

13 lectures
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

PROJECT BUILD - Reaction Timer

7 lectures
Project 1 Preview & Setup
04: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

Forms & Data Binding

7 lectures
Forms Intro & Setup
05: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

Vue Router Basics

9 lectures
Why Use the Vue Router?
02: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

Fetching Data

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

PROJECT BUILD - Simple Project Planner

13 lectures
Project 2 Preview & Setup
05: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

The Composition API

9 lectures
Drawbacks of the Options API
04:43
Composition API Basics
07: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

Async Code (& the Composition API)

7 lectures
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

Routing (with the Composition API)

5 lectures
Routing Recap & Navbar
05:00
Using useRouter
03:33
Using useRoute
02:09
CHALLENGE - Creating a Tag Route
10:49
Creating a Tag Cloud
15:52

Firebase Databases (Firestore)

10 lectures
Creating a Firebase Project
03:39
Connecting to a Firebase Project
07:38
Firestore Collections & Documents
04:56
Fetching a Collection of Documents
09:32
Fetching Single Documents
06:34
Adding Documents
03:53
Deleting Docments
05:35
Using Timestamps
05:48
Ordering Collections
02:19
Intro to Real-Time Listeners
11:54

PROJECT BUILD - Live Chat Room with Authentication

24 lectures
Project 3 Preview & Setup
07:03
Firebase Setup (& Reusing Firebase Projects)
04:23
Creating a Signup & Login Form
08:04
CHALLENGE - Switching Between Forms
04:34
Firebase Authentication Setup
03:30
Creating a Signup Composable
14:36
Outputting Errors
03:06
Creating a Login Composable
07:30
Setup Context & Emitting Events
06:39
Navbar Component
03:50
Logging Users Out (Composable)
05:00
Getting the Current User (Composable)
08:38
Route Guards (for Unauth Users)
09:16
Waiting for Firebase Auth to Initialize
04:21
CHALLENGE - Watching the Current User
04:01
New Chat Form
08:37
Adding New Messages to Firestore
10:06
Real-Time Firestore Listener (Composable)
11:52
Creating the Chat Window
07:02
Formatting Dates (date-fns)
05:50
CHALLENGE - Auto-Scrolling the Chat Window
03:57
Unsubscribing From Real-Time Listeners
06:02
Final Route Guard
02:27
Testing & Next Steps
00:53

Building & Deploying (Firebase Hosting)

4 lectures
The Firebase CLI
06:18
Building an App
01:18
Deploying the App
01:32
Making Changes & Re-deploying
02:52

Firebase Security Rules

4 lectures
What Are Security Rules?
02:12
Paths & Rules Explained
08:24
Requiring Authentication
02:20
Locking the API to a Domain
02:03

PROJECT BUILD - Muso Ninjas (& Firebase Storage)

39 lectures
Project 4 Preview & Setup
06:46
Global Styles & Custom Font
07:37
Creating a Firebase Project
04:15
Connecting to Firebase
03:50
Reusing Firebase Composables
10:36
Creating a Login View
08:31
Adding a 'pending' State to Requests
06:38
Creating a Signup View
07:08
Adding a Navbar Component
08:33
CHALLENGE - Logging Users Out
04:00
CHALLENGE - Conditionally Showing Links
03:18
New Playlist Component
07:42
Handling File Changes
11:04
Intro to Firebase Storage
04:23
Uploading Images (part 1)
08:07
Uploading Images (part 2)
05:43
Adding New Playlists
12:56
CHALLENGE - Getting Real-Time Playlist Data
04:35
Listing Playlists
05:36
Nav Update & Route Guards
08:14
Playlist Details Route
04:41
Redirecting to Playlist Details
05:00
Getting Single Documents (Real-time)
07:37
Playlist Details Template
09:32
Checking Playlist Ownership
07:13
CHALLENGE - Deleting a Playlist (Composable)
09:27
Deleting Images from Storage
06:12
More on Firestore Rules
07:30
Storage Rules
06:40
Adding Songs to Playlists
11:29
Updating Playlist Details
08:44
Listing Songs
06:05
CHALLENGE - Deleting Songs
05:13
User Playlists Route
06:15
Firestore Queries
09:44
Listing User Playlists
03:40
Final Touches
02:21
Building & Deploying
02:10
Next Steps
01:11

Using Vue with Firebase 9

17 lectures
Intro & Starter Project
09:15
Firebase Config File
06:09
Fetching Firestore Data
07:46
Real Time Collection Data
10:27
Adding New Documents
04:34
Deleting Documents
03:22
Updating Documents
06:10
Setting up Firebase Auth
01:39
Signing Up New Users
09:11
Logging Users Out
02:42
Logging Users In
04:19
Getting the Current User
07:43
Conditional Navbar Content
04:15
Waiting for Auth to be Ready
05:08
Making a Route Guard
05:14
Redirecting Users
02:40
Firestore Queries
10:58

Extra Lessons & More Resources

8 lectures
Extra JavaScript Lessons
00:47
ES6 Modules (Import & Export)
05:04
Using map( ) & filter( )
06:22
Spread Syntax
02:13
Template Strings
02:10
Arrow Function Syntax
02:46
Fetch & Promises
05:26
Async & Await
03:01

ARCHIVED - Introduction

3 lectures
Introduction
02:46
Course Files
01:00
Text Editor Setup
03:24

ARCHIVED - Vue.js Basics

12 lectures
What is Vue.js?
03:36
Setting up Vue.js (the simple way)
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

ARCHIVED - The Vue CLI

11 lectures
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

ARCHIVED - The Vue Router

9 lectures
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

ARCHIVED - Project One - Ninja Smoothies

22 lectures
Project Preview & Setup
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

ARCHIVED - Project Two - Real-Time Chat App

14 lectures
Project Overview & Setup
03:14
Project Structure
01:12
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

ARCHIVED - Project Three - Geo Ninjas

27 lectures
Project Overview & Setup
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

ARCHIVED - Firebase Cloud Functions

4 lectures
What Are Cloud Functions?
02:07
Creating a Simple Callable Function
07:03
Calling a Function
07:40
Intro to Firebase Rules
04:48

ARCHIVED - ES6 & Extras

4 lectures
ES6 Arrow Functions
04:40
ES6 Promises
05:45
Imports and Exports
03:35
JavaScript Filter Method
05:11

ARCHIVED - BONUS: Vue CLI 3

12 lectures
Vue CLI 3 Introduction
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

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.