Build Web Apps with Vue JS 3 & Firebase

Udemy

Develop the skills to create and deploy interactive web applications using Vue JS 3 and Firebase.

Online

₹ 3099

particular

details

                                    Medium of instructions
                                    English

                                    Mode of learning
                                    Self study

                                    Mode of Delivery
                                    Video and Text Based

Introduction & Setup

What is Vue?
New Features in Vue 3
What You Should Already Know
Environment Setup
Course Files

Vue Basics

How to use Vue (using the CDN)
Creating a Vue App
Templates & Data
Methods & Click Events
Conditional Rendering
Other Mouse Events
Outputting Lists (v-for)
Attribute Binding
Dynamic Classes
CHALLENGE - Add to Favs
SOLUTION - Add to Favs
Computed Properties

The Vue CLI (for Bigger Projects)

Why Use the Vue CLI?
How to Use the Vue CLI
New Project Walkthrough
Vue Files & Templates
Template Refs
Multiple Components
Component Styles & Global Styles
Passing Data with Props
Emitting Custom Events
Click Event Modifiers
Slots
CHALLENGE - Reusing Components
Using Teleport

Project Build - Reaction Timer

Project 1 Preview & Setup
Starting a New Game
Component Lifecycle Hooks
Creating the Reaction Timer
Emitting Custom Events with Data
CHALLENGE - Showing a Results Component
Finishing Touches

Forms & Data Binding

Forms Intro & Setup
Two-way Data Binding
Select Fields
Checkboxes
Keyboard Events & Modifiers
CHALLENGE - Deleting Skills
Submitting the Form

Vue Router Basics

Why Use the Vue Router?
Router Setup for New Projects
Router Links
Folder Structure
Route Parameters
Dynamic Links
404 Pages & Redirects
Programmatic Navigation
Lazy Loading Components

Fetching Data

Using JSON Server
Where to Fetch Data
Conditionally Showing Data

Project Build - Simple Project Planner

Project 2 Preview & Setup
Home View & Data
Single Project Template
Using Material Icons
Deleting Projects
Completing Projects
New Project Form
Adding New Projects
Navbar Component
Edit Project Route
CHALLENGE - Updating Projects
Creating a Filter Nav
CHALLENGE - Showing Filtered Projects

The Composition API

Drawbacks of the Options API
Composition API Basics
Template Refs in the Setup Function
Using Refs for Reactivity
Refs vs Reactive
Computed Values in the Setup Function
Using watch and watchEffect
Using Props in the Setup Function
Lifecycle Hooks

Async Code (& the Composition API)

Fetching Data in the Setup Function
Reusable Composition Functions (Composables)
Creating Another Composable
Creating a Loading Spinner
Making a Web Form
CHALLENGE - Making a POST Request
Future Async Lesson & Extra Styling

Routing (with the Composition API)

Routing Recap & Navbar
Using useRouter
Using useRoute
CHALLENGE - Creating a Tag Route
Creating a Tag Cloud

Firebase Databases (Firestore)

Creating a Firebase Project
Connecting to a Firebase Project
Firestore Collections & Documents
Fetching a Collection of Documents
Fetching Single Documents
Adding Documents
Deleting Docments
Using Timestamps
Ordering Collections
Intro to Real-Time Listeners

Project Build - Live Chat Room with Authentication

Project 3 Preview & Setup
Firebase Setup (& Reusing Firebase Projects)
Creating a Signup & Login Form
CHALLENGE - Switching Between Forms
Firebase Authentication Setup
Creating a Signup Composable
Outputting Errors
Creating a Login Composable
Setup Context & Emitting Events
Navbar Component
Logging Users Out (Composable)
Getting the Current User (Composable)
Route Guards (for Unauth Users)
Waiting for Firebase Auth to Initialize
CHALLENGE - Watching the Current User
New Chat Form
Adding New Messages to Firestore
Real-Time Firestore Listener (Composable)
Creating the Chat Window
Formatting Dates (date-fns)
CHALLENGE - Auto-Scrolling the Chat Window
Unsubscribing From Real-Time Listeners
Final Route Guard
Testing & Next Steps

Building & Deploying (Firebase Hosting)

The Firebase CLI
Building an App
Deploying the App
Making Changes & Re-deploying

Firebase Security Rules

What Are Security Rules?
Paths & Rules Explained
Requiring Authentication
Locking the API to a Domain

Project Build - Muso Ninjas (& Firebase Storage)

Project 4 Preview & Setup
Global Styles & Custom Font
Creating a Firebase Project
Connecting to Firebase
Reusing Firebase Composables
Creating a Login View
Adding a 'pending' State to Requests
Creating a Signup View
Adding a Navbar Component
CHALLENGE - Logging Users Out
CHALLENGE - Conditionally Showing Links
New Playlist Component
Handling File Changes
Intro to Firebase Storage
Uploading Images (part 1)
Uploading Images (part 2)
Adding New Playlists
CHALLENGE - Getting Real-Time Playlist Data
Listing Playlists
Nav Update & Route Guards
Playlist Details Route
Redirecting to Playlist Details
Getting Single Documents (Real-time)
Playlist Details Template
Checking Playlist Ownership
CHALLENGE - Deleting a Playlist (Composable)
Deleting Images from Storage
More on Firestore Rules
Storage Rules
Adding Songs to Playlists
Updating Playlist Details
Listing Songs
CHALLENGE - Deleting Songs
User Playlists Route
Firestore Queries
Listing User Playlists
Final Touches
Building & Deploying
Next Steps

Using Vue with Firebase 9

Intro & Starter Project
Firebase Config File
Fetching Firestore Data
Real Time Collection Data
Adding New Documents
Deleting Documents
Updating Documents
Setting up Firebase Auth
Signing Up New Users
Logging Users Out
Logging Users In
Getting the Current User
Conditional Navbar Content
Waiting for Auth to be Ready
Making a Route Guard
Redirecting Users
Firestore Queries

Extra Lessons & More Resources

Extra JavaScript Lessons
ES6 Modules (Import & Export)
Using map( ) & filter( )
Spread Syntax
Template Strings
Arrow Function Syntax
Fetch & Promises
Async & Await

Archived - Introduction

Introduction
Course Files
Text Editor Setup

Archived - Vue.js Basics

What is Vue.js?
Setting up Vue.js (the simple way)
The Vue Instance
Methods
Data Binding
Events
The Event Object
Keyboard Events
Two-way Data Binding (v-model)
Modifiers
Conditional Output with v-if
Looping with v-for

Archived - The Vue CLI

The Vue CLI
Components & Vue Files
The data() Function
Nesting Components
Scoped CSS
Passing Data with Props
Custom Events
Life-cycle Hooks
Making Requests with Axios
Filters
Computed Properties (custom search box)

Archived - The Vue Router

What is the Vue Router?
Setting up Routes
Router Links
Route Parameters
Watching the $route Object
More on Router Links
Programmatically Redirecting Users
Hash vs History Mode
Styling Active Links

Archived - Project One - Ninja Smoothies

Project Preview & Setup
Project Structure
Material Design
Navbar Component
Index Component
Deleting (local) Data
Introduction to Firebase
Setting up Firestore
Installing Firebase
Retrieving Firestore Data
Deleting Firestore Data
Add Smoothie Component
Adding Ingredients
Outputting Ingredients
Saving Records to Firestore
Deleting Ingredients
Edit Smoothie Route
Firestore Queries
Edit Smoothie Form
Updating Firestore Records
Deploying to Firebase
Project Review

Archived - Project Two - Real-Time Chat App

Project Overview & Setup
Project Structure
Firestore Setup
Making a Welcome Screen
Passing Props Via Routes
Route Guards
Creating the Chat Window
New Message Component
Adding Messages to Firestore
Real-Time Events (event listeners)
Formatting Times with Moment
Auto-scrolling
Deploying the App
Project Review

Archived - Project Three - Geo Ninjas

Project Overview & Setup
Project Structure
Setting up Firebase
Navbar Component
Map Component
Google Maps API
Creating a New Map
Creating a Signup Page
Firebase Auth & Data Structure
Checking if an Alias exists
Signing up a User
Creating Firestore User Records
Wrapping the Vue Instance
Logging a User Out
Login Component
Logging Users In
Geolocation API
Updating a User’s Location
Route Guarding (auth)
Conditional Navbar Links
Ninja (map) Markers
User Profiles
User Comments (data discussion)
Adding Comments
Showing Comments (Real-Time)
Some Final Styles
Deploying the app

Archived - Firebase Cloud Functions

What Are Cloud Functions?
Creating a Simple Callable Function
Calling a Function
Intro to Firebase Rules

Archived - ES6 & Extras

ES6 Arrow Functions
ES6 Promises
Imports and Exports
JavaScript Filter Method

Archived - BONUS: Vue CLI 3

Vue CLI 3 Introduction
Using the new Vue CLI
The CLI Service
Custom Presets
Adding Plugins
Build & Deploy to Firebase
Instant Prototyping
Build Targets (Making a Web Component)
Using Web Components
The Vue GUI (part 1)
The Vue GUI (part 2)
Using 'vue init' with the New CLI

Popular Courses

Popular Platforms

Popular Searches

Build Web Apps with Vue JS 3 & Firebase

Online

₹ 3099

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

certificate providing authority

Who it is for

What you will learn

The syllabus

Introduction & Setup

Vue Basics

The Vue CLI (for Bigger Projects)

Project Build - Reaction Timer

Forms & Data Binding

Vue Router Basics

Fetching Data

Project Build - Simple Project Planner

The Composition API

Async Code (& the Composition API)

Routing (with the Composition API)

Firebase Databases (Firestore)

Project Build - Live Chat Room with Authentication

Building & Deploying (Firebase Hosting)

Firebase Security Rules

Project Build - Muso Ninjas (& Firebase Storage)

Using Vue with Firebase 9

Extra Lessons & More Resources

Archived - Introduction

Archived - Vue.js Basics

Archived - The Vue CLI

Archived - The Vue Router

Archived - Project One - Ninja Smoothies

Archived - Project Two - Real-Time Chat App

Archived - Project Three - Geo Ninjas

Archived - Firebase Cloud Functions

Archived - ES6 & Extras

Archived - BONUS: Vue CLI 3

Instructors

Articles

Popular Articles

Latest Articles

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Thank You!

Download the Careers360 App on your Android phone