The Vue 3 Bootcamp - The Complete Developer Guide

Focused View

Laith Harb

17:30:55

223 View

1. Introduction

1. Introduction.mp4

03:05

2. A Little Bit of Setup.mp4

03:41

2. An Introduction to Vue

1. What is VueJS.mp4

02:40

2. Building the HTML Template.mp4

04:18

3. Styling Our App With CSS.mp4

03:26

4. Making it Functional With JavaScript.mp4

09:11

5. Creating a Vue App.mp4

04:02

6. Rebuilding the App in Vue.mp4

08:07

7. Vue vs Vanilla JS.mp4

04:20

3. Diving Deeper in Vue

1. Installing Needed Dependencies.mp4

09:03

2. Spinning Up a Vue Development Server.mp4

04:51

3. Some Important Terminologies.mp4

05:06

4. Creating HTML With Vue Templates.mp4

06:10

5. Styling Our App.mp4

05:06

6. Accessing Variables Within Our HTML.mp4

04:15

7. Adding Event Handlers.mp4

05:47

8. Defining Our Variable as State.mp4

06:26

9. Composition API vs Options API.mp4

08:31

4. Vue Directives

1.1 NotesApp.zip

1. App Overview.mp4

02:33

2. [OPTIONAL] Building the HTML and CSS.mp4

19:11

3. Conditional Rendering With v-if.mp4

08:20

4. Two Way Binding With v-model.mp4

06:24

5. Event Handling By Creating a New Note.mp4

10:43

6. Iteratively Rendering DOM Elements With v-for.mp4

08:52

7. The Importances of a Key.mp4

04:15

8.1 NotesAppFinal.zip

8. Adding Error Handling.mp4

09:32

5. Components and Props

1. App Overview.mp4

03:25

2.1 QuizApp.zip

2. [OPTIONAL] The HTML and CSS.mp4

10:58

3.1 data.zip

3. List Card Rendering.mp4

05:09

4. Watching For State Changes.mp4

06:08

5. Separating Our Code Into Components.mp4

09:48

6.1 QuizAppComponentsFinal.zip

6. Passing Data to Components via Props.mp4

06:01

6. Pages and Routing

1. Introduction to Routing.mp4

04:24

2. Creating a New App.mp4

02:34

3. Creating Two View Components.mp4

03:25

4. Adding Routing to Our App.mp4

10:16

5. RouterLink to Navigate Within the App.mp4

07:51

6. Styling the Active RouterLink.mp4

03:29

7. Pages With Dynamic Paths.mp4

13:04

8. Extracting the Path Params.mp4

05:13

9. The Powers of Nested Routes.mp4

11:23

10. Programmatically Adjust the Route.mp4

05:56

11. Adding 404 Not Found Pages.mp4

09:06

12.1 RouterVueLearningFinal.zip

12. Redirect Routes.mp4

02:15

13.1 RouterVueLearningFinal.zip

13. Routing Our Quiz App.mp4

12:23

7. Completing Our Quiz App

1. Quiz Page HTML and CSS.mp4

11:34

2. Separating Code Into Components.mp4

05:07

3. Passing Props to the Question Component.mp4

08:56

4. Listening to Changes With Watch.mp4

07:15

5. Computing Values With State.mp4

03:34

6. More Computing....mp4

04:02

7. Passing Data From the Child to the Parent.mp4

09:09

8. Emitting an Event From the Child Component.mp4

09:21

9.1 QuizApp.zip

9. Completing the Quiz.mp4

11:42

8. Animations For an Interactive and Fluid App

1. Introduction to Vue Animations.mp4

04:11

2. The Transition Component.mp4

09:30

3. Animating When a Component Leaves.mp4

04:15

4. Conditional Rendering Animations.mp4

04:54

5. Building a Small App.mp4

11:50

6. TransitionGroup to Animate Multiple Elements.mp4

05:16

7. fdsfs.mp4

02:34

8. Animating the Other Cards Into Place.mp4

03:47

9.1 animation-final.zip

9. Routing Animations.mp4

08:16

10. Animating Upon Rendering.mp4

06:16

11. Lifecycle Hook of the Transition.mp4

06:08

12. Animation Styling With JavaScript.mp4

08:01

9. API Requests to Fetch Data

1. App Overview.mp4

01:45

2. The Process of Fetching Data From an API.mp4

05:24

3.1 styles.zip

3. Creating the App.mp4

02:24

4. Where to Fetch the Data.mp4

04:43

5. Making the HTTP Requests.mp4

09:33

6. The Suspense Component.mp4

07:34

7. Request Offsets and Limits.mp4

05:58

8. Implementing Paginations.mp4

06:59

9.1 Naive UI Documentation.html

9.2 ShowsAppUI.zip

9. Building the UI.mp4

18:01

10. A Little Fix.mp4

02:58

11. Component Lifecycle Hooks.mp4

10:46

12.1 Rick and Morty API.html

12. Fetching Data With onMounted.mp4

07:30

13. Slots For Dynamic HTML.mp4

13:32

14. More on Slots.mp4

09:08

15. Adding a Better Loading State.mp4

06:24

16. Creating the Header Component.mp4

10:03

17.1 ShowsAppFinal.zip

17. Maintaining State With KeepAlive.mp4

05:47

10. State Managements in Vue

1. Introduction to State Management.mp4

03:17

2. Building a Small Project.mp4

05:49

3. Declaring State With Reactive.mp4

03:42

4. Ref vs Reactive.mp4

06:51

5. A Lot of Nested Components.mp4

06:17

6. Prop Drilling.mp4

07:36

7. ProvideInject.mp4

09:00

8. Store Reusable Logic With Composables.mp4

07:05

9. Global State With Pinia.mp4

13:38

11. Vue With TypeScript

1. An Introduction to TypeScript.mp4

09:50

2. An Optional TypeScript Lesson.mp4

18:46

3. Building the HTML App.mp4

05:16

4. Types With State.mp4

05:09

5. Types With Functions.mp4

07:55

6. Types With Props.mp4

08:37

7. Types With Computed.mp4

08:08

8. Reusing Our Types Throughout Multiple Components.mp4

03:47

12. CAPSTONE PROJECT START

1. Project Overview.mp4

03:04

13. Building the UI With a Vue Library

1.1 InstagramUIFinal.zip

1. Your Two Options.mp4

01:36

2. Setting Up the Vue App.mp4

07:06

3. Building the NavBar.mp4

14:57

4. Building the Modal.mp4

13:22

5. Building the Timeline.mp4

12:36

6. Adding a Profile View.mp4

07:12

7. Adding the User Bar.mp4

08:58

8.1 InstagramUIFinal.zip

8. Adding an Image Gallary.mp4

05:16

14. Identifying Users With Authentication

1. An Introduction to Authentication.mp4

01:57

2. Supabase - A Backend as a Service.mp4

03:37

3. Connecting Our Vue App to Supabase.mp4

04:11

4. Creating a Pinia User Store.mp4

04:37

5. Adding Input Validation.mp4

14:44

6. Client vs Backend Validation.mp4

03:20

7. Signing Up the User.mp4

11:41

8. Validating if the User is Already Registered.mp4

08:08

9. Improving Error Handing.mp4

03:14

10. Adding a Loading State For the Modal.mp4

05:29

11. Handling the Success Case.mp4

07:33

12. Adding the Login Logic.mp4

13:00

13. Persisting the Login State.mp4

11:51

14. A Loading State for Retrieving the User.mp4

05:37

15. Handling Logout.mp4

07:12

15. Uploading and Displaying Photos

1. Navigating to the Users Profile.mp4

03:16

2. Conditionally Rendering the Upload Photo Modal.mp4

09:52

3. Adding the Input Elements.mp4

06:42

4. Creating a Bucket For File Storage.mp4

02:50

5. Programmatically Uploading a Photo.mp4

06:04

6. Updating the Image Policy.mp4

02:49

7. Creating the Posts Table.mp4

05:58

8. Adding a Post to Our DB.mp4

06:11

9. Adding a Loading State.mp4

04:36

10. Handling the Success State.mp4

08:08

11. Fetching Posts Upon Render.mp4

09:36

12.1 instagramupload.zip

12. Adding a Loading State.mp4

02:34

16. Complex Data Relations

1. Building a Following Follower Table.mp4

04:49

2. Conditionally Rendering a Follow Button.mp4

03:05

3. Making the Profile Component Reactive.mp4

01:32

4. Implementing the Follow User Functionality.mp4

05:18

5. Determining Follower Info on Render.mp4

10:59

6. Implementing the Unfollow Functionality.mp4

02:31

7. Toggling the FollowFollowing Buttons.mp4

02:28

8. Performing Aggregate Queries.mp4

07:52

17. Scroll Based Pagination

1. Check Auth Status in Timeline Page.mp4

06:39

2. Separating HTML into Components.mp4

03:53

3. Fetching the Followers.mp4

05:26

4. Fetching the Followers Posts.mp4

05:13

5. Rendering the Posts.mp4

02:31

6. Sorting By Most Recent.mp4

01:42

7. Lets Do Some Math.mp4

04:00

8. The Intersection Observer API.mp4

08:40

9. Emitting an Event on Intersect.mp4

03:41

10. Implementing the Pagination.mp4

06:21

11. Stopping Unnecessary HTTP Requests.mp4

04:18

12. Saving Data in Environment Variables.mp4

05:30

Description

Learn to built frontend Vue 3 applications using Pinia, TypeScript, Supabase and the Composition API

What You'll Learn?

Best practices for building a Vue 3 frontend application
Utilizing the Composition API within a Vue3 project
Identifying when to use a state management solution
Handling user authentication

Who is this for?

Beginner Web Developers that want to dive in to Vue3

More details

Description
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!
Who this course is for:
Beginner Web Developers that want to dive in to Vue3

User Reviews

Rating

average 0

Total votes0

Focused display

Vue JS

Laith Harb

Instructor's Courses

I am a software engineer at Prodigy Education and an instructor on YouTube. I helped thousands of individuals learn tech with my instructional videos. I have over 3 years of experience in the industry and thus have accumulated tons of knowledge about software development. I am excited to be your next instructor!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.