Top 8 Recommended Vue.js Self-Study Materials! [November 2024]

Join this bestselling Vue course to learn how to use the latest version of VueJS to build amazing, modern web apps!

No matter at which metric you look at (Google Trends, Github Stars, Tweets ...) - VueJS is the shooting star in the world of JavaScript frameworks - it simply is amazing!

This bestselling Udemy course teaches the latest version of Vue (Vue.js 3) from the ground up and in great detail. We'll cover all the core basics but we'll not stop thereafter - this course also dives into advanced concepts like the Composition API introduced with Vue 3.

Frontend frameworks like Vue JS are extremely popular because they give us this reactive, great user experience we know from mobile apps - but now in the browser! No wonder that jobs requiring frontend framework skills like VueJS are amongst the best paid ones in the industry!

You may know Angular 2+ and ReactJS, well, VueJS combines the best of both frameworks and makes building anything from small widgets to big, enterprise-level apps a breeze and a whole lot of fun!

And if you don't know the two mentioned frameworks: That's fine, too, this course does not expect any knowledge of any other frontend framework - you will learn it all throughout this Course!

This course covers it all!

We'll start at the very basics, what Vue.js is and how it works before we move on to more complex and advanced topics but I'll be honest: It's too much to fit it all into one sentence, so here's what you'll learn in this Course:

• What is VueJS and Why would you use it?

• The Basics (including the basic Syntax, Understanding Templates and much more!)

• How to Output Reactive Data & Listen to Events

• Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements ...)

• Setting up a Development Environment and Workflow

• Using Components (and what Components are to begin with)

• A Deep Dive Look Behind the Scenes of Vue

• Binding to Form Inputs

• Sending Http Requests to Backend APIs

• Authentication & Vue

• How to make your App more Beautiful with Animations and Transitions

• How to create an awesome Single-Page-Application (SPA) with Routing

• How to improve State Management by using Vuex

• How to Deploy the App

• And much more!

All these topics are taught with real examples and demo projects. This course is full of exercises, challenges and bigger courser projects that allow you to practice what you learned.

Along with many other smaller projects, we will build a couple of bigger main projects:

• The "Monster Slayer" Game - a game running in the browser, 100% powered by Vue

• The "Learning Resource Manager" - a web app that allows you to manage (add, delete, list) your favorite learning resources

• The "Find a Coach" app - a web app that allows you to sign up / login, register as a coach, list and filter available coaches and send messages to coaches

Is this course for you?

Now that you know what this course is about, let's see if this course is for you!

Here are three types of students who will love this course:

Student #1:

Has some JavaScript experience and is interested in what this language can do. You heard and read that JavaScript allows you to create nice web applications and enhance existing web pages. VueJS is your choice!

Student #2:

You already have some experience with other frontend frameworks like Angular (2+) or ReactJS. But either due to interest or disappointment of the existing frameworks, you seek some alternatives - VueJS might be what you were looking for!

Student #3:

Has experience with backend frameworks/ languages but now also wants to enter the frontend world. VueJS is an awesome choice here, it's fun, it uses native JS and it's extremely powerful!

Bonus: Student #4

Is disappointed by Angular 2+. Does a good framework need 2 hours of setup? No, certainly not - as VueJS will prove to this student!

Let's dive into VueJS right now!

1. Getting Started
2. Welcome to the Course!
3. What is "Vue.js"?
4. Different Ways of Using Vue
5. Exploring Vue Alternatives
6. Building A First App With Just JavaScript
7. Join our Online Learning Community
8. Important: Changed Vue Script Import Path
9. Re-building the App with Vue
10. Vue vs "Vanilla JavaScript" (just JavaScript)
11. Setting Up the Course Development Environment
12. Course Setup
13. Course Outline & What's In The Course
14. How To Get The Most Out Of This Course
15. Module Resources
16. Basics & Core Concepts - DOM Interaction with Vue
17. Module Introduction
18. Important: Changed Vue Script Import Path
19. Creating and Connecting Vue App Instances
20. Interpolation and Data Binding
21. Binding Attributes with the "v-bind" Directive
22. Understanding "methods" in Vue Apps
23. Working with Data inside of a Vue App
24. Outputting Raw HTML Content with v-html
25. A First Summary
26. Time to Practice: Data Binding
27. Understanding Event Binding
28. Events & Methods
29. Working with Event Arguments
30. Using the Native Event Object
31. Exploring Event Modifiers
32. Locking Content with v-once
33. Time to Practice: Event Binding
34. Data Binding + Event Binding = Two-Way Binding
35. Methods used for Data Binding: How It Works
36. Introducing Computed Properties
37. Working with Watchers
38. Methods vs Computed Properties vs Watchers
39. v-bind and v-on Shorthands
40. Time to Practice: Reactivity
41. Dynamic Styling with Inline Styles
42. Adding CSS Classes Dynamically
43. Classes & Computed Properties
44. Dynamic Classes: Array Syntax
45. Time to Practice: Dynamic Styling
46. Module Summary
47. Module Resources
48. Rendering Conditional Content & Lists
49. Module Introduction
50. Understanding the Problem
51. Rendering Content Conditionally
52. v-if, v-else and v-else-if
53. Using v-show Instead Of v-if
54. Rendering Lists of Data
55. Diving Deeper Into v-for
56. Removing List Items
57. Lists & Keys
58. Time to Practice: Conditional Content & Lists
59. Module Summary
60. Module Resources
61. Course Project: The Monster Slayer Game
62. Module Introduction
63. Project Setup & First Methods
64. Updating the Health Bars
65. Adding a "Special Attack"
66. Adding a "Heal" Functionality
67. Adding a "Game Over" Screen
68. Finishing the Core Functionality
69. Adding a Battle Log
70. Module Resources
71. Vue: Behind the Scenes
72. Module Introduction
73. An Introduction to Vue's Reactivity
74. Vue Reactivity: A Deep Dive
75. One App vs Multiple Apps
76. Understanding Templates
77. Working with Refs
78. How Vue Updates the DOM
79. Vue App Lifecycle - Theory
80. Vue App Lifecycle - Practice
81. Module Resources
82. Introducing Components
83. Module Introduction
84. Understanding the Problem
85. Introducing Components
86. The Why: Building Complex User Interfaces With Components
87. Multiple Vue Apps vs Multiple Components
88. Module Resources
89. Moving to a Better Development Setup & Workflow with the Vue CLI
90. Module Introduction
91. Why We Need A Development Server
92. Why We Want A Better Developer Experience
93. Fixing npm run serve (Vue CLI)
94. Installing & Using the Vue CLI
95. Inspecting the Created Project
96. Inspecting the Vue Code & ".vue" Files
97. Adding the "Vetur" Extension to VS Code
98. More on ".vue" Files
99. A New Vue Project
100. Creating a Basic Vue App
101. Adding a Component
102. Adding Styling
103. A Small Addition
104. An Alternative Setup - using "npm init" & Volar
105. Module Resources
106. Component Communication
107. Module Introduction
108. Introducing "Props" (Parent => Child Communication)
109. Prop Behavior & Changing Props
110. Validating Props
111. Supported Prop Values
112. Working with Dynamic Prop Values
113. Emitting Custom Events (Child => Parent Communication)
114. Defining & Validating Custom Events
115. Prop / Event Fallthrough & Binding All Props
116. Demo: Adding Components & Connecting Them
117. Demo: Adding More Component Communication
118. Time to Practice: Props & Custom Events
119. A Potential Problem
120. Provide + Inject To The Rescue
121. Provide + Inject for Functions / Methods
122. Provide + Inject vs Props & Custom Events
123. Module Summary
124. Module Resources
125. Diving Deeper Into Components
126. Module Introduction
127. Project Setup
128. Global vs Local Components
129. Scoped Styles
130. Introducing Slots
131. Named Slots
132. Slot Styles & Compilation
133. More on Slots
134. Scoped Slots
135. Dynamic Components
136. Keeping Dynamic Components Alive
137. Applying What We Know & A Problem
138. Teleporting Elements
139. Working with Fragments
140. The Vue Style Guide
141. Moving to a Different Folder Structure
142. Module Summary
143. Module Resources
144. Course Project: The Learning Resources App
145. Module Introduction
146. Setup & First Steps
147. First Components & Props
148. Styling and More Components
149. Header & BaseCard Components
150. Adding a Base Button
151. Dynamic Components & Attribute Fallthrough
152. Adding & Styling Tabs
153. Adding a Form
154. Fetching User Input
155. Adding a Modal Dialog
156. Deleting Items
157. Adding "Teleport"
158. Module Resources
159. Forms
160. Module Introduction
161. v-model & Inputs
162. Working with v-model Modifiers and Numbers
163. v-model and Dropdowns
164. Using v-model with Checkboxes & Radiobuttons
165. Adding Basic Form Validation
166. Building a Custom Control Component
167. Using v-model on Custom Components
168. Module Summary
169. Module Resources
170. Sending Http Requests
171. Module Introduction
172. Starting App & Why we need a Backend
173. Adding a Backend
174. How To (Not) Send Http Requests
175. Sending a POST Request to Store Data
176. Http Requests & Http Methods (Verbs)
177. Using Axios Instead Of "fetch()"
178. Getting Data (GET Request) & Transforming Response Data
179. Loading Data When a Component Mounts
180. Showing a "Loading..." Message
181. Handling the "No Data" State
182. Handling Technical / Browser-side Errors
183. Handling Error Responses
184. Module Summary
185. Module Resources
186. Routing: Building "Multi-Page" Single Page Applications
187. Module Introduction
188. What & Why?
189. Routing Setup
190. Registering & Rendering Routes
191. Navigating with router-link
192. Styling Active Links
193. Programmatic Navigation
194. Passing Data with Route Params (Dynamic Segments)
195. Navigation & Dynamic Paths
196. A Vue Bug
197. Updating Params Data with Watchers
198. Passing Params as Props
199. Redirecting & "Catch All" Routes
200. Using Nested Routes

Here's an improved version of the text that emphasizes the focus on the Composition API and distinguishes the course from outdated ones:

In this cutting-edge Vue 3 course, you'll dive deep into the Composition API, creating seven projects (plus one as an exercise) to master the latest essentials of the Vue framework. Unlike outdated courses still teaching the Options API, this curriculum focuses exclusively on the modern Composition API, preparing you to build state-of-the-art applications or secure a job in today's Vue ecosystem.

We will cover:

• Vue 3 templates and directives

• Components with Composition API, including props, events, and slots

• Transitions in Vue 3

• TypeScript integration with Vue 3

• Composition API in-depth, including building your own composables

• Vue Router for creating Single Page Applications (SPAs)

• Pinia for efficient state management

• Drag&Drop handling

• Optimistic UIs - build apps that provide great user experience

• Build custom complex components, like Modal Dialog with full understanding of inner workings

Projects you'll build using the Composition API:

1. Can You Drive?

2. Simple Quiz (exercise project for you to build!)

3. Image Gallery

4. Task List

5. Event Registration Mini-App

6. User Settings App

7. Recipe Book App

8. Trello Board App (featuring Drag&Drop and Modals)

Join this course to gain hands-on experience with Vue 3's Composition API, using Vite for modern project setup. You'll learn how to leverage the full power of the Composition API and Pinia for state management, creating dynamic single-page applications (SPAs) with Vue Router, enhancing your apps with smooth transitions, and utilizing TypeScript for type-safe code. This course is perfect for beginners and developers looking to upgrade their skills to the latest Vue 3 practices.

Throughout the curriculum, you'll build real-world projects that showcase the strengths of Vue 3's Composition API, from creating a simple quiz application to managing complex state with Pinia in a user settings app. By the end of this course, you will have a deep understanding of how to use Vue 3's Composition API to build scalable, maintainable, and modern applications. You'll also learn best practices for structuring your Vue applications and working efficiently with TypeScript to catch errors early and improve your development workflow.

This course is designed to be practical and project-based, ensuring you not only learn the theory but also apply your knowledge in building functional applications using the latest Vue 3 techniques. By focusing exclusively on the Composition API, you'll be ahead of the curve and well-prepared for the future of Vue development. Whether you're looking to break into the industry or enhance your existing skills, this Vue 3 course is your gateway to becoming a proficient and up-to-date Vue developer.

1. Course Introduction
2. What is Vue.js and Why You Should Learn It?
3. The Essence of Vue.js - How Vue.js Works in 3 Minutes
4. Course Overview: What You'll Learn and the Projects You'll Build
5. Why Choose Vue 3: Benefits and Advantages
6. Maximizing Your Learning: How to Make the Most Out of This Course
7. Accessing the Source Code: Where to Find It
8. VSCode Setup: Essential Shortcuts, Extensions, and Tips
9. Need a Reminder on HTML, JavaScript, or CSS? Here's Some Help
10. Join Discord!
11. 1st Mini Project - Can you Drive?
12. Intro: Project 1
13. Making the Vue App Alive!
14. Reactivity in Vue - Using ref()
15. Computed Properties - Using computed()
16. Conditional CSS Classes
17. Input Bindings
18. Exercise 1 - Build a Simple Quiz Game
19. Exercise 1 - Solution
20. 2nd Mini Project - Image Gallery with Favorites
21. Intro: 2nd Mini Project
22. Event Handling (v-on)
23. Event Handling Modifiers
24. Conditional Rendering (v-if)
25. Rendering Lists (v-for)
26. Attribute Binding
27. Exercise 2 - Favorite Toggling/Image Removing
28. Exercise 2 - Solution to Task 1
29. Exercise 2 - Solution to Task 2
30. 3rd Mini Project - Task Manager
31. Intro: 3rd Mini Project
32. Lifecycle Hooks
33. Template Refs (Accessing DOM Elements)
34. Displaying Task List
35. Adding New Tasks
36. Watchers and Side Effects
37. Comparing watch with watchEffect
38. Using Local Storage
39. Exercise 3 - Remove Button & Filtering Tasks
40. Exercise 3 - Solution
41. 4th Medium Project - Event Registration (Components)
42. Intro: 4th Medium Project
43. Creating Vue Project using Vite
44. Understanding the Project Structure and Files
45. Installing and Using TailwindCSS
46. Creating and Using Components
47. Rendering a List of Components
48. Passing Props
49. Component Events
50. Fall through Attributes
51. Basic Component Slots
52. Exercise 4 - Create a Reusable Card Component
53. Exercise 4 - Solution
54. Named Slots
55. Conditional Named Slots
56. Component Variants
57. 4th Medium Project - Event Registration (Data Fetching)
58. Intro: 4th Medium Project - Checkpoint #1
59. Setting Up the Mock API Server
60. Fetching Data
61. Loading State
62. Preventing Layout Shifts (Placeholders)
63. Posting Data to the Server
64. Exercise 5 - Loading Bookings
65. Exercise 5 - Solution
66. 4th Medium Project (Optimistic UI, Error Handling)
67. Intro: 4th Medium Project - Checkpoint #2
68. Optimistic UI Explained with Event Booking Example
69. Implementing Event Booking Optimistic UI
70. Cancelling Bookings with Optimistic UI
71. Extracting EventList: Why?
72. Extracting EventList: Let's Go!
73. Extracting EventList: Handling Empty States
74. Extracting EventList: Error Handling and Error Recovery
75. Responsive Design
76. Dynamic Components & Icons
77. 4th Medium Project (Composables & Sharing State)
78. Intro: Composables and State Sharing
79. Creating and Using Composables
80. Using Composable and Eliminating Events
81. The BookingList Component
82. Error Handling Component & Exercise 6
83. Exercise 6 Solution
84. 5th Medium Project (TypeScript, Transitions, Tabs)
85. Intro: 5th Medium Project Introduction
86. Create a Vue TypeScript Project & Add Tailwind
87. Define Props and Events with TypeScript Types
88. Narrowing Down the Types of refs and Other Data
89. Rendering Tabs - How to Display the Tab Active State?
90. Rendering Tab Content using Dynamic Components
91. Transitions - How to Add CSS Transitions on Tab Content
92. Custom Transition Components - How to Reuse Transitions?
93. 5th Medium Project (TypeScript, Teleport, KeepAlive, Shared State)
94. Intro: 5th Medium Project Checkpoint #2
95. General Form Markup & Transition Gotcha
96. How is the reactive Function Different from ref in Vue 3?
97. KeepAlive Component - How to Not Lose the State of Dynamic Components?
98. Creating Privacy & Notifications Forms: Adding Markup and Maintaining User Data
99. Syncing Local Storage: How to Store and Retrieve Settings
100. TypeScript Safety: Generics and Keyof - Mindblowing Type Safety!
101. Building a Notification System using Toast Component
102. Creating a useNotifications Composable
103. Teleport Component - How to Move Markup to Another Element (e.g. body)
104. 6th Medium Project (Vue Router)
105. Intro: 6th Project
106. Creating the Recipe Book Project
107. Understanding Vue Router and it's Config
108. How Route Views are Rendered and How to Add Links?
109. Adding Routes, RouterLink vs A Element and Using Route Name
110. Dynamic Routes - How to Define Them and Read Parameters in the Component?
111. Linking to Dynamic Routes with Params
112. Fallback Route, 404 Page - It's not Easy!
113. Programmatic Navigation
114. Data Fetching Inside the onMounted Hook Caveat and Solution!
115. Redirects and Aliases
116. 6th Medium Project (Pinia State Management)
117. Understanding Pinia: What It Is, How It Works, and Why You Need It
118. Defining and Creating Store
119. Adding Actions to Your Pinia Store
120. Working with Getters in Pinia
121. Listing and Filtering Recipes: Balancing Logic in the Store
122. Pinia Plugins
123. Pinia Plugin: Syncing with Local Storage
124. Pinia and TypeScript: Typing Custom Properties
125. Exercise 7 - Edit Form
126. Exercise 7 Solution - Edit Form
127. Favorites: Pinia Action, Getter and Component Changes
128. Favorites: Mixing Pinia State and List of Favorites
129. Adding Tailwind CSS and Styling Your App
130. 7th Project - Trello Clone (Drag & Drop, Modal)
131. Intro: 7th Medium Project
132. Setting Up the Trello Clone Project
133. Adding the Lists UI
134. Types & Reactive List of Cards
135. Adding Drag&Drop
136. How Scoped Named Slots Work
137. Building a Modal Dialog - It's Simple!
138. Building a Modal Dialog - Opening & Closing
139. Focusing the Input when Modal Dialog Opens
140. Trapping Focus Within the Modal Dialog
141. Adding & Editing Cards - App Logic
142. Adding & Editing Cards - ModalDialog Logic & Finishing Touches
143. Summary: What We've Learned
144. What Next? 11 Ideas For Extending the Project
145. Bonus
146. Bonus

If you’re already familiar with Vue 2 & The Options API, then this course will teach you everything you need to know to switch over to (and get started with) Vue 3 & the amazing new Composition API.

My name’s Danny, I’m an Indie App Developer & Creator of Fudget, the highest rated personal finance app for iOS, Android, Mac & Windows.

And I’ve spent the last 12 months creating Fudget 2 - which is built on Vue 3 & The Composition API.

In this course you’ll start by learning the key differences between the Options API & Composition API by creating a simple Options API app & converting it to the Composition API.

You’ll then master all of the basics including:

• Reactive data with Refs & Reactive Objects

• Methods, Computed Properties & Watchers

• Lifecycle Hooks

• Directives

• Vue Router

• Child Components - including the new ways of handling props, emits & modelValue

• Dynamic Components

• Composables - how to create them from scratch & how to import them from the VueUse library

• And you’ll learn State Management using Pinia, the incredible successor to Vuex

After learning the basics, you’re gonna create a real world app called Noteballs from scratch - which has full CRUD capabilities, uses Pinia for State Management and demonstrates real-world use of all the basics you learned earlier.

FIREBASE 9 UPDATE (JUN 2022):

The course has been updated with 3 hours of new content on Firebase 9, where we will:

• Hook Noteballs up to a Firebase Cloud Firestore database

• Add Authentication, so that multiple users can register, login and log out of our app

• Add Realtime Data Sync, so that if a user adds a note on one device, they'll see the note instantly appear on another device

• Add Firebase Security Rules to protect our users' data

• Host our finished app on Firebase Hosting so that we can share it with anyone

After this course, you’ll be able to create your own Vue 3 apps based entirely on the Composition API - from scratch.

This course requires a basic understanding of Vue 2 & The Options API, HTML, CSS & JavaScript.

Please check out the preview videos & I look forward to seeing you in the course.

1. Introduction
2. Introduction
3. What is the Composition API?
4. Editor & Software Setup
5. Vue Devtools
6. Getting Started
7. Vue 3 Docs & Install Node.js
8. Create a Vue Project
9. Project Setup
10. Finished Source Code
11. Options API vs Composition API - Switching Over
12. Options API - Design
13. Options API - Data & Methods
14. Convert it to Composition API
15. Composition API - Data (refs) & Methods
16. Script Setup - An Easier Way!
17. Finished Source Code
18. Refs, Reactive Objects & Non-Reactive Data
19. Refs
20. Two-Way Data Binding
21. Reactive Objects
22. Non-Reactive Data
23. Finished Source Code
24. Methods, Computed & Watch
25. Methods
26. Computed Properties
27. A Note on Filters
28. Watch
29. Finished Source Code
30. Lifecycle Hooks
31. Mounted Hooks
32. Activated Hooks
33. Updated Hooks
34. Multiple Hooks!
35. Finished Source Code
36. Directives
37. Local Custom Directives
38. Global Custom Directives
39. Finished Source Code
40. Vue Router
41. $route - Part 1
42. $route - Part 2
43. useRoute
44. useRouter
45. Finished Source Code
46. Lists, Teleport, Template Refs & nextTick
47. Lists (v-for)
48. Template Refs
49. nextTick
50. Teleport - Part 1
51. Teleport - Part 2
52. Finished Source Code
53. Child Components, Props & Emits
54. Child Components
55. Fix Lazy-Loading Views
56. Slots
57. Props
58. Emits
59. modelValue
60. update:modelValue
61. Dynamic Components - Part 1
62. Dynamic Components - Part 2
63. Provide / Inject - Part 1
64. Provide / Inject - Part 2
65. Finished Source Code
66. Composables
67. What is a Composable?
68. Create a Composable
69. Use Our Composable
70. Reuse our Composable
71. Add Composable from VueUse
72. Finished Source Code
73. State Management with Pinia
74. What is State Management?
75. Composable State vs Vuex vs Pinia
76. State - Part 1
77. State - Part 2
78. Actions
79. Getters
80. Use our Store Anywhere
81. Finished Source Code
82. Noteballs: Setup & Router
83. Introduction & Noteballs App
84. Create Project
85. Router - Install & Setup
86. Router - Add Some Routes
87. Add RouterView & Navigation
88. Router - Tidying Up
89. Finished Source Code
90. Noteballs: Bulma & Design
91. Install Bulma
92. Nav Bar - Design
93. Nav Bar - Navigation & Logo
94. Nav Bar - Responsive Design & Menu
95. Pages (Design)
96. Notes (Design)
97. Add Note Form (Design)
98. Finished Source Code
99. Noteballs: Data, Methods, Child Components, Computed & Emit
100. Notes Array (Ref)
101. Add Note Method
102. Child Component - Note
103. Props (Note)
104. Computed (Note Length)
105. Delete Note (Emit)
106. Finished Source Code
107. Noteballs: Pinia, Reusable Components, Router & More
108. Pinia - Setup & State
109. Use Our Store
110. Action - Add Note
111. Action (with Parameters) - Add Note
112. Action - Delete Note
113. Edit Note Page & Route
114. Reusable Component - AddEditNote
115. Hook up with modelValue
116. Important: Fix Production Error "modelValue is not defined"
117. Fix the Focus
118. Custom Color, Placeholder & Label Props
119. Getter - Get Note Content (useRoute)
120. Getter (with Parameters) - Get Note Content
121. Action - Update Note
122. useRouter - Redirect to Notes Page
123. More Getters & Stats Page
124. Finished Source Code
125. Noteballs: Directives, Watchers & Composables
126. Directive - Autofocus
127. Global Directive - Autofocus
128. Watch the Number of Characters (Watch)
129. Composable - useWatchCharacters
130. Composable - Multiple Parameters
131. Click Outside Composable (VueUse, Template Refs)
132. Finished Source Code
133. Noteballs: Delete Modal
134. Delete Modal Design (Reactive Objects)
135. Hide the Delete Modal (modelValue & update:modelValue)
136. Delete Modal - Click Outside to Close
137. Delete Modal - Keyboard Control (Lifecycle Hooks)
138. Delete Modal - Delete The Note
139. Finished Source Code
140. Firebase 9: Introduction & Setup
141. Introduction to Firebase
142. Create a Firebase Project
143. Create App & Install Firebase
144. Setup Firestore Database
145. Connect to Database
146. Firebase 9: Read, Add, Delete, Update & Order
147. Display Notes from Firestore
148. Get Notes in Real Time
149. Add Note
150. Delete Note
151. Update Note
152. Order Notes by Date (ID)
153. Improve Document Structure & Auto ID’s
154. Display Date on Note
155. Add a Progress Bar
156. Show Placeholder when No Notes
157. Firebase 9: Authentication
158. Login & Register Page - Tabs
159. Login & Register Page - Form
160. Firestore Authentication & Auth Store
161. Register User
162. Logout User
163. Login User
164. Listen for Auth Changes & Store User Data
165. Improve Logout Button
166. Redirect User on Auth Change
167. Firebase 9: Multiple Users
168. Restructure Database for Multiple Users
169. Setup Refs for Multiple Users
170. Clear Notes array in State when user logs out
171. Unsubscribe from the Get Notes Listener
172. Firebase 9: Security & Hosting
173. Navigation Guards - Part 1
174. Navigation Guards - Part 2
175. Firestore Security Rules - Part 1
176. Firebase Security Rules - Part 2
177. Hosting - Part 1
178. Hosting - Part 2
179. Bonus Lectures
180. Bonus Lecture

In this course we will take you from a Vue 3 novice to a job ready engineer. This course is loaded with practical projects and examples so that you can truly understand and utilize Vue 3 and the composition API in great depth.

We will be building five projects, each one getting more and more complex. We will end this course by building an Instagram clone with features like file upload and user authentication. By the end of this course, you should have multiple practical example to show off your knowledge!

Here are a list of thing you will learn in this course:

• The difference between pure Vanilla JS and Vue3

• How to utilize the composition API - this course is 100% composition API, no options API

• Utilizing all the important Vue directives for things like conditional rendering or rendering of a list

• Fetching data from an external API and handling the success, loading and error states

• Handling user authentication

• Building a Postgres database to handle complex relations

• Utilizing TypeScript for bug free code

• All the important ways to handle state (pinia, composables, inject/eject, ref, reactive)

• Animating and transitioning a UI application

• Storing and retrieving images from a bucket

• Scroll based pagination with the Observer Intersection API

  
  

I really hope you enjoy this course and learn a ton from it!

1. Introduction
2. Introduction
3. A Little Bit of Setup
4. An Introduction to Vue
5. What is VueJS
6. Building the HTML Template
7. Styling Our App With CSS
8. Making it Functional With JavaScript
9. Creating a Vue App
10. Rebuilding the App in Vue
11. Vue vs Vanilla JS
12. Diving Deeper in Vue
13. Installing Needed Dependencies
14. Spinning Up a Vue Development Server
15. Some Important Terminologies
16. Creating HTML With Vue Templates
17. Styling Our App
18. Accessing Variables Within Our HTML
19. Adding Event Handlers
20. Defining Our Variable as State
21. Composition API vs Options API
22. Vue Directives
23. App Overview
24. [OPTIONAL] Building the HTML and CSS
25. Conditional Rendering With v-if
26. Two Way Binding With v-model
27. Event Handling By Creating a New Note
28. Iteratively Rendering DOM Elements With v-for
29. The Importances of a Key
30. Adding Error Handling
31. Components and Props
32. App Overview
33. [OPTIONAL] The HTML and CSS
34. List Card Rendering
35. Watching For State Changes
36. Separating Our Code Into Components
37. Passing Data to Components via Props
38. Pages and Routing
39. Introduction to Routing
40. Creating a New App
41. Creating Two View Components
42. Adding Routing to Our App
43. RouterLink to Navigate Within the App
44. Styling the Active RouterLink
45. Pages With Dynamic Paths
46. Extracting the Path Params
47. The Powers of Nested Routes
48. Programmatically Adjust the Route
49. Adding 404 Not Found Pages
50. Redirect Routes
51. Routing Our Quiz App
52. Completing Our Quiz App
53. Quiz Page HTML and CSS
54. Separating Code Into Components
55. Passing Props to the Question Component
56. Listening to Changes With Watch
57. Computing Values With State
58. More Computing...
59. Passing Data From the Child to the Parent
60. Emitting an Event From the Child Component
61. Completing the Quiz
62. Animations For an Interactive and Fluid App
63. Introduction to Vue Animations
64. The Transition Component
65. Animating When a Component Leaves
66. Conditional Rendering Animations
67. Building a Small App
68. TransitionGroup to Animate Multiple Elements
69. Animating the Other Cards Into Place
70. Routing Animations
71. Animating Upon Rendering
72. Lifecycle Hook of the Transition
73. Animation Styling With JavaScript
74. API Requests to Fetch Data
75. App Overview
76. The Process of Fetching Data From an API
77. Creating the App
78. Where to Fetch the Data
79. Making the HTTP Requests
80. The Suspense Component
81. Request Offsets and Limits
82. Implementing Paginations
83. Building the UI
84. A Little Fix
85. Component Lifecycle Hooks
86. Fetching Data With onMounted
87. Slots For Dynamic HTML
88. More on Slots
89. Adding a Better Loading State
90. Creating the Header Component
91. Maintaining State With KeepAlive
92. State Managements in Vue
93. Introduction to State Management
94. Building a Small Project
95. Declaring State With Reactive
96. Ref vs Reactive
97. A Lot of Nested Components
98. Prop Drilling
99. Provide/Inject
100. Store Reusable Logic With Composables
101. Global State With Pinia
102. Vue With TypeScript
103. An Introduction to TypeScript
104. An Optional TypeScript Lesson
105. Building the HTML App
106. Types With State
107. Types With Functions
108. Types With Props
109. Types With Computed
110. Reusing Our Types Throughout Multiple Components
111. CAPSTONE PROJECT START
112. Project Overview
113. Building the UI With a Vue Library
114. Your Two Options
115. Setting Up the Vue App
116. Building the NavBar
117. Building the Modal
118. Building the Timeline
119. Adding a Profile View
120. Adding the User Bar
121. Adding an Image Gallary
122. Identifying Users With Authentication
123. An Introduction to Authentication
124. Supabase - A Backend as a Service
125. Connecting Our Vue App to Supabase
126. Creating a Pinia User Store
127. Adding Input Validation
128. Client vs Backend Validation
129. Signing Up the User
130. Validating if the User is Already Registered
131. Improving Error Handing
132. Adding a Loading State For the Modal
133. Handling the Success Case
134. Adding the Login Logic
135. Persisting the Login State
136. A Loading State for Retrieving the User
137. Handling Logout
138. Uploading and Displaying Photos
139. Navigating to the User's Profile
140. Conditionally Rendering the Upload Photo Modal
141. Adding the Input Elements
142. Creating a Bucket For File Storage
143. Programmatically Uploading a Photo
144. Updating the Image Policy
145. Creating the Posts Table
146. Adding a Post to Our DB
147. Adding a Loading State
148. Handling the Success State
149. Fetching Posts Upon Render
150. Adding a Loading State
151. Complex Data Relations
152. Building a Following Follower Table
153. Conditionally Rendering a Follow Button
154. Making the Profile Component Reactive
155. Implementing the Follow User Functionality
156. Determining Follower Info on Render
157. Implementing the Unfollow Functionality
158. Toggling the Follow/Following Buttons
159. Performing Aggregate Queries
160. Scroll Based Pagination
161. Check Auth Status in Timeline Page
162. Separating HTML into Components
163. Fetching the Followers
164. Fetching the Followers' Posts
165. Rendering the Posts
166. Sorting By Most Recent
167. Let's Do Some Math
168. The Intersection Observer API
169. Emitting an Event on Intersect
170. Implementing the Pagination
171. Stopping Unnecessary HTTP Requests
172. Saving Data in Environment Variables

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

1. Introduction & Setup
2. What is Vue?
3. New Features in Vue 3
4. What You Should Already Know
5. Environment Setup
6. Course Files
7. Vue Basics
8. How to use Vue (using the CDN)
9. Creating a Vue App
10. Templates & Data
11. Methods & Click Events
12. Conditional Rendering
13. Other Mouse Events
14. Outputting Lists (v-for)
15. Attribute Binding
16. Dynamic Classes
17. CHALLENGE - Add to Favs
18. SOLUTION - Add to Favs
19. Computed Properties
20. The Vue CLI (for Bigger Projects)
21. Why Use the Vue CLI?
22. How to Use the Vue CLI
23. New Project Walkthrough
24. Vue Files & Templates
25. Template Refs
26. Multiple Components
27. Component Styles & Global Styles
28. Passing Data with Props
29. Emitting Custom Events
30. Click Event Modifiers
31. Slots
32. CHALLENGE - Reusing Components
33. Using Teleport
34. PROJECT BUILD - Reaction Timer
35. Project 1 Preview & Setup
36. Starting a New Game
37. Component Lifecycle Hooks
38. Creating the Reaction Timer
39. Emitting Custom Events with Data
40. CHALLENGE - Showing a Results Component
41. Finishing Touches
42. Forms & Data Binding
43. Forms Intro & Setup
44. Two-way Data Binding
45. Select Fields
46. Checkboxes
47. Keyboard Events & Modifiers
48. CHALLENGE - Deleting Skills
49. Submitting the Form
50. Vue Router Basics
51. Why Use the Vue Router?
52. Router Setup for New Projects
53. Router Links
54. Folder Structure
55. Route Parameters
56. Dynamic Links
57. 404 Pages & Redirects
58. Programmatic Navigation
59. Lazy Loading Components
60. Fetching Data
61. Using JSON Server
62. Where to Fetch Data
63. Conditionally Showing Data
64. PROJECT BUILD - Simple Project Planner
65. Project 2 Preview & Setup
66. Home View & Data
67. Single Project Template
68. Using Material Icons
69. Deleting Projects
70. Completing Projects
71. New Project Form
72. Adding New Projects
73. Navbar Component
74. Edit Project Route
75. CHALLENGE - Updating Projects
76. Creating a Filter Nav
77. CHALLENGE - Showing Filtered Projects
78. The Composition API
79. Drawbacks of the Options API
80. Composition API Basics
81. Template Refs in the Setup Function
82. Using Refs for Reactivity
83. Refs vs Reactive
84. Computed Values in the Setup Function
85. Using watch and watchEffect
86. Using Props in the Setup Function
87. Lifecycle Hooks
88. Async Code (& the Composition API)
89. Fetching Data in the Setup Function
90. Reusable Composition Functions (Composables)
91. Creating Another Composable
92. Creating a Loading Spinner
93. Making a Web Form
94. CHALLENGE - Making a POST Request
95. Future Async Lesson & Extra Styling
96. Routing (with the Composition API)
97. Routing Recap & Navbar
98. Using useRouter
99. Using useRoute
100. CHALLENGE - Creating a Tag Route
101. Creating a Tag Cloud
102. Firebase Databases (Firestore)
103. Creating a Firebase Project
104. Connecting to a Firebase Project
105. Firestore Collections & Documents
106. Fetching a Collection of Documents
107. Fetching Single Documents
108. Adding Documents
109. Deleting Docments
110. Using Timestamps
111. Ordering Collections
112. Intro to Real-Time Listeners
113. PROJECT BUILD - Live Chat Room with Authentication
114. Project 3 Preview & Setup
115. Firebase Setup (& Reusing Firebase Projects)
116. Creating a Signup & Login Form
117. CHALLENGE - Switching Between Forms
118. Firebase Authentication Setup
119. Creating a Signup Composable
120. Outputting Errors
121. Creating a Login Composable
122. Setup Context & Emitting Events
123. Navbar Component
124. Logging Users Out (Composable)
125. Getting the Current User (Composable)
126. Route Guards (for Unauth Users)
127. Waiting for Firebase Auth to Initialize
128. CHALLENGE - Watching the Current User
129. New Chat Form
130. Adding New Messages to Firestore
131. Real-Time Firestore Listener (Composable)
132. Creating the Chat Window
133. Formatting Dates (date-fns)
134. CHALLENGE - Auto-Scrolling the Chat Window
135. Unsubscribing From Real-Time Listeners
136. Final Route Guard
137. Testing & Next Steps
138. Building & Deploying (Firebase Hosting)
139. The Firebase CLI
140. Building an App
141. Deploying the App
142. Making Changes & Re-deploying
143. Firebase Security Rules
144. What Are Security Rules?
145. Paths & Rules Explained
146. Requiring Authentication
147. Locking the API to a Domain
148. PROJECT BUILD - Muso Ninjas (& Firebase Storage)
149. Project 4 Preview & Setup
150. Global Styles & Custom Font
151. Creating a Firebase Project
152. Connecting to Firebase
153. Reusing Firebase Composables
154. Creating a Login View
155. Adding a 'pending' State to Requests
156. Creating a Signup View
157. Adding a Navbar Component
158. CHALLENGE - Logging Users Out
159. CHALLENGE - Conditionally Showing Links
160. New Playlist Component
161. Handling File Changes
162. Intro to Firebase Storage
163. Uploading Images (part 1)
164. Uploading Images (part 2)
165. Adding New Playlists
166. CHALLENGE - Getting Real-Time Playlist Data
167. Listing Playlists
168. Nav Update & Route Guards
169. Playlist Details Route
170. Redirecting to Playlist Details
171. Getting Single Documents (Real-time)
172. Playlist Details Template
173. Checking Playlist Ownership
174. CHALLENGE - Deleting a Playlist (Composable)
175. Deleting Images from Storage
176. More on Firestore Rules
177. Storage Rules
178. Adding Songs to Playlists
179. Updating Playlist Details
180. Listing Songs
181. CHALLENGE - Deleting Songs
182. User Playlists Route
183. Firestore Queries
184. Listing User Playlists
185. Final Touches
186. Building & Deploying
187. Next Steps
188. Using Vue with Firebase 9
189. Intro & Starter Project
190. Firebase Config File
191. Fetching Firestore Data
192. Real Time Collection Data
193. Adding New Documents
194. Deleting Documents
195. Updating Documents
196. Setting up Firebase Auth
197. Signing Up New Users
198. Logging Users Out
199. Logging Users In
200. Getting the Current User