This course outlines the process of building websites using Vue 3, the progressive JavaScript framework, in conjunction with Firebase, a versatile backend-as-a-service platform. It focuses on how Vue 3’s reactivity model and composition API can be used to create intuitive and maintainable user interfaces. The course showcases how to integrate Firebase to manage backend processes such as database operations, user authentication, and hosting. Participants learn to employ Vue 3’s features to build single-page applications with real-time data from Firebase Firestore, set up authentication flows, and deploy their applications with Firebase Hosting. The synergy between Vue 3’s reactive components and Firebase’s powerful services enables developers to craft scalable, real-time web applications efficiently.
Overview
COURSE DIFFICULTY
Skills Learned
After completing this online training course, students will be able to:
Understand of Vuejs fundamentals
Utilization of Vue 3 new features
Set up a Vue development environment
Create a Vue application
Implement data binding and templates
Handle click and mouse events in Vue
Render lists with v-for directive
Bind HTML attributes dynamically
Apply dynamic CSS classes
Use computed properties in Vue
Set up Vue Router and routing basics
Manage state with VueX (implied by course depth)
01. Introduction & Setup
- What Is Vue?
- New Features in Vue 3
- What You Should Know
- Environment Setup
- Course Files
02. Vue Basics
- How to Use Vue (Using the CDN)
- Creating a Vue App
- Data & Templates
- Click Events
- Conditional Rendering
- Other Mouse Events
- Outputting Lists (V-For)
- Attribute Binding
- Dynamic Classes
- Toggling Favs
- Solution – Toggling Favs
- Computed Properties
03. The Vue CLI (for Bigger Projects)
- Why Use the Vue CLI
- Using the Vue CLI
- New Project Walkthrough
- Vue Files & Templates
- Template Refs
- Multiple Components
- Scoped & Global CSS
- Props
- Emitting Custom Events
- Click Event Modifiers
- Slots
- Challenge – Creating Another Modal
- Using Teleport
04. Project Build - Reaction Timer
- Project Preview & Setup
- Starting a New Game
- Lifecycle Hooks
- Creating a Timer
- Custom Events With Data
- Challenge – Showing the Results Component
- Finishing Touches
05. Forms & Data Binding
- Forms Intro & Setup
- 2-Way Data Binding
- Select Boxes
- Checkboxes
- Keyboard Events
- Challenge – Deleting Skills
- Submitting Forms
06. Vue Router Basics
- Why Use the Vue Router
- Vue Router Setup for New Projects
- Router Links
- Folder Structure
- Route Parameters
- Dynamic Links
- Redirects & 404’s
- Programatic Navigation
- Lazy Loading Components
07. Fetching Data
- Using JSON Server
- Fetching Data
- Conditionally Showing Data
08. Project Build - Simple Project Planner
- Project Preview & Setup
- Home Template & Data
- Single Project Component
- Using Material Icons
- Deleting Projects
- Completing Projects
- New Project Form
- Adding New Projects
- Navbar Component
- Edit Project Component
- Challenge – Updating Projects
- Creating a Filter Nav
- Challenge – Filtering Projects
09. The Composition API
- Drawbacks of the Options API
- Composition API Basics
- Template Refs
- Using Refs for Reactivity
- Refs vs Reactive
- Using Computed Values
- Watch & WatchEffect
- Using Props in the Setup Function
- Lifecycle Hooks
10. Async Code (& the Composition API)
- Fetching Data in Setup()
- Reusable Composable Functions
- Creating Another Composable
- Creating a Loading Spinner
- Making a Web Form
- Challenge – Making a Post Request
- Future Async Lessons
11. Routing (with the Composition API)
- Routing Recap & Navbar
- Using UseRouter
- Using UseRoute
- Challenge – Tag View
- Creating a Tag Cloud
12. Firebase Databases
- Creating a Firebase Project
- Connecting to Firebase
- Firestore Collections
- Fetching a Collection of Documents
- Fetching a Single Document
- Adding New Documents
- Deleting Documents
- Timestamps
- Ordering Documents
- Intro to Real-Time Data
13. Project Build - Live Chatroom with Authentication
- Project Preview & Setup
- Firebase Setup
- Login & Signup View
- Switching Between Forms
- Firebase Auth Setup
- Creating a Signup Composable
- Outputting Errors
- Creating a Login Composable
- Setup Context & Custom Events
- Navbar Component
- Logging Users Out
- Getting the Current User
- Route Guards
- Waiting for Firebase
- Challenge – Watching the Current User
- New Chat Form
- Adding Messages
- Real-Time Listener Composable
- Creating the Chat Window
- Formatting the Date
- Challenge – Auto-Scrolling the Chat Window
- Unsubscribing from Real-Time Data
- Final Route Guard
- Testing the Chatroom
14. Building & Deploying (Firebase Hosting)
- Installing Firebase Tools
- Building a Vue App
- Deploying the App
- Making Changes & Redeploying
15. Firebase Security Rules
- What Are Security Rules?
- Paths & Rules Explained
- Requiring Auth (in Rules)
- Locking Down the API
16. Project Build - Muso Ninjas
- Project Preview & Setup
- Global Styles & Custom Font
- Firebase Setup
- Firebase Config File
- Reusing Firebase Composables
- Creating a Login View
- Making a Pending State
- Creating a Signup View
- Navbar Component
- Challenge – Logging Users Out
- Challenge – Conditionally Showing Links
- New Project Component
- Handling File Inputs
- Intro to Firebase Storage
- Uploading Images (Part 1)
- Uploading Images (Part 2)
- Creating Playlist Documents
- Challenge – Getting Real-Time Playlist Data
- Listing Playlists
- Navbar & Route Guard
- Playlist Details Route
- Redirecting to Playlist Details
- Real-Time Document Data
- Playlist Details Template
- Checking Playlist
SKILLS LEARNED
Skills Learned
After completing this online training course, students will be able to:
Understand of Vuejs fundamentals
Utilization of Vue 3 new features
Set up a Vue development environment
Create a Vue application
Implement data binding and templates
Handle click and mouse events in Vue
Render lists with v-for directive
Bind HTML attributes dynamically
Apply dynamic CSS classes
Use computed properties in Vue
Set up Vue Router and routing basics
Manage state with VueX (implied by course depth)
COURSE OUTLINE
01. Introduction & Setup
- What Is Vue?
- New Features in Vue 3
- What You Should Know
- Environment Setup
- Course Files
02. Vue Basics
- How to Use Vue (Using the CDN)
- Creating a Vue App
- Data & Templates
- Click Events
- Conditional Rendering
- Other Mouse Events
- Outputting Lists (V-For)
- Attribute Binding
- Dynamic Classes
- Toggling Favs
- Solution – Toggling Favs
- Computed Properties
03. The Vue CLI (for Bigger Projects)
- Why Use the Vue CLI
- Using the Vue CLI
- New Project Walkthrough
- Vue Files & Templates
- Template Refs
- Multiple Components
- Scoped & Global CSS
- Props
- Emitting Custom Events
- Click Event Modifiers
- Slots
- Challenge – Creating Another Modal
- Using Teleport
04. Project Build - Reaction Timer
- Project Preview & Setup
- Starting a New Game
- Lifecycle Hooks
- Creating a Timer
- Custom Events With Data
- Challenge – Showing the Results Component
- Finishing Touches
05. Forms & Data Binding
- Forms Intro & Setup
- 2-Way Data Binding
- Select Boxes
- Checkboxes
- Keyboard Events
- Challenge – Deleting Skills
- Submitting Forms
06. Vue Router Basics
- Why Use the Vue Router
- Vue Router Setup for New Projects
- Router Links
- Folder Structure
- Route Parameters
- Dynamic Links
- Redirects & 404’s
- Programatic Navigation
- Lazy Loading Components
07. Fetching Data
- Using JSON Server
- Fetching Data
- Conditionally Showing Data
08. Project Build - Simple Project Planner
- Project Preview & Setup
- Home Template & Data
- Single Project Component
- Using Material Icons
- Deleting Projects
- Completing Projects
- New Project Form
- Adding New Projects
- Navbar Component
- Edit Project Component
- Challenge – Updating Projects
- Creating a Filter Nav
- Challenge – Filtering Projects
09. The Composition API
- Drawbacks of the Options API
- Composition API Basics
- Template Refs
- Using Refs for Reactivity
- Refs vs Reactive
- Using Computed Values
- Watch & WatchEffect
- Using Props in the Setup Function
- Lifecycle Hooks
10. Async Code (& the Composition API)
- Fetching Data in Setup()
- Reusable Composable Functions
- Creating Another Composable
- Creating a Loading Spinner
- Making a Web Form
- Challenge – Making a Post Request
- Future Async Lessons
11. Routing (with the Composition API)
- Routing Recap & Navbar
- Using UseRouter
- Using UseRoute
- Challenge – Tag View
- Creating a Tag Cloud
12. Firebase Databases
- Creating a Firebase Project
- Connecting to Firebase
- Firestore Collections
- Fetching a Collection of Documents
- Fetching a Single Document
- Adding New Documents
- Deleting Documents
- Timestamps
- Ordering Documents
- Intro to Real-Time Data
13. Project Build - Live Chatroom with Authentication
- Project Preview & Setup
- Firebase Setup
- Login & Signup View
- Switching Between Forms
- Firebase Auth Setup
- Creating a Signup Composable
- Outputting Errors
- Creating a Login Composable
- Setup Context & Custom Events
- Navbar Component
- Logging Users Out
- Getting the Current User
- Route Guards
- Waiting for Firebase
- Challenge – Watching the Current User
- New Chat Form
- Adding Messages
- Real-Time Listener Composable
- Creating the Chat Window
- Formatting the Date
- Challenge – Auto-Scrolling the Chat Window
- Unsubscribing from Real-Time Data
- Final Route Guard
- Testing the Chatroom
14. Building & Deploying (Firebase Hosting)
- Installing Firebase Tools
- Building a Vue App
- Deploying the App
- Making Changes & Redeploying
15. Firebase Security Rules
- What Are Security Rules?
- Paths & Rules Explained
- Requiring Auth (in Rules)
- Locking Down the API
16. Project Build - Muso Ninjas
- Project Preview & Setup
- Global Styles & Custom Font
- Firebase Setup
- Firebase Config File
- Reusing Firebase Composables
- Creating a Login View
- Making a Pending State
- Creating a Signup View
- Navbar Component
- Challenge – Logging Users Out
- Challenge – Conditionally Showing Links
- New Project Component
- Handling File Inputs
- Intro to Firebase Storage
- Uploading Images (Part 1)
- Uploading Images (Part 2)
- Creating Playlist Documents
- Challenge – Getting Real-Time Playlist Data
- Listing Playlists
- Navbar & Route Guard
- Playlist Details Route
- Redirecting to Playlist Details
- Real-Time Document Data
- Playlist Details Template
- Checking Playlist
