Trang chủ

Web Development

Vue JS

Build Web Apps with Vue JS 3 & Firebase

Build Web Apps with Vue JS 3 & Firebase

Loại khoá học: Web Development

Learn Vue JS 3 & Firebase by creating & deploying dynamic web apps (including Authentication).

50.000 VND

25 VND

Đầy Đủ Bài Giảng

Học Online Tiện Lợi

Kích Hoạt Nhanh 2-5 Phút

Thanh toán tự động

Được phép tải xuống

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?

Email

Nội dung

Khoá học liên quan

Unreal Engine 5: Blueprint Cơ Bản

Unreal Engine 5: Blueprint Cơ Bản

Trở thành Quality Control (QC) / Tester (kiểm thử phần mềm)

Trở thành Quality Control (QC) / Tester (kiểm thử phần mềm)

The Complete Spring Boot Development Bootcamp

The Complete Spring Boot Development Bootcamp

Complete C# Unity Game Developer 3D

Complete C# Unity Game Developer 3D

Artificial Intelligence A-Z 2024: Build 7 AI + LLM & ChatGPT

Artificial Intelligence A-Z 2024: Build 7 AI + LLM & ChatGPT

Phân tích và xử lý dữ liệu với phần mềm R

Phân tích và xử lý dữ liệu với phần mềm R

Beginning C++ Programming - From Beginner to Beyond

Beginning C++ Programming - From Beginner to Beyond

Backend RESTFul Server với Node.JS và Express (SQL/MongoDB)

Backend RESTFul Server với Node.JS và Express (SQL/MongoDB)

JSP, Servlets and JDBC for Beginners: Build a Database App

JSP, Servlets and JDBC for Beginners: Build a Database App

.NET Core MVC - The Complete Guide 2024 [E-commerce] [.NET8]

.NET Core MVC - The Complete Guide 2024 [E-commerce] [.NET8]

iOS & Swift - The Complete iOS App Development Bootcamp

iOS & Swift - The Complete iOS App Development Bootcamp

Unity 2D Dungeon Gunner Roguelike Development Course

Unity 2D Dungeon Gunner Roguelike Development Course

100 Days of Code: The Complete Python Pro Bootcamp

100 Days of Code: The Complete Python Pro Bootcamp

Khóa học Xử lý Dữ liệu cho Data Warehouse (Phần Cơ Bản)

Khóa học Xử lý Dữ liệu cho Data Warehouse (Phần Cơ Bản)

[NEW] Master Spring Boot 3 & Spring Framework 6 with Java

[NEW] Master Spring Boot 3 & Spring Framework 6 with Java

Automate Everything with Python

Automate Everything with Python

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

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

Get khoá học cho tôi