The Vue 3 Bootcamp – The Complete Developer Guide

Introduction
1 Introduction
2 A Little Bit of Setup

An Introduction to Vue
3 What is VueJS
4 Building the HTML Template
5 Styling Our App With CSS
6 Making it Functional With JavaScript
7 Creating a Vue App
8 Rebuilding the App in Vue
9 Vue vs Vanilla JS

Diving Deeper in Vue
10 Installing Needed Dependencies
11 Spinning Up a Vue Development Server
12 Some Important Terminologies
13 Creating HTML With Vue Templates
14 Styling Our App
15 Accessing Variables Within Our HTML
16 Adding Event Handlers
17 Defining Our Variable as State
18 Composition API vs Options API

Vue Directives
19 App Overview
20 [OPTIONAL] Building the HTML and CSS
21 Conditional Rendering With v-if
22 Two Way Binding With v-model
23 Event Handling By Creating a New Note
24 Iteratively Rendering DOM Elements With v-for
25 The Importances of a Key
26 Adding Error Handling

Components and Props
27 App Overview
28 [OPTIONAL] The HTML and CSS
29 List Card Rendering
30 Watching For State Changes
31 Separating Our Code Into Components
32 Passing Data to Components via Props

Pages and Routing
33 Introduction to Routing
34 Creating a New App
35 Creating Two View Components
36 Adding Routing to Our App
37 RouterLink to Navigate Within the App
38 Styling the Active RouterLink
39 Pages With Dynamic Paths
40 Extracting the Path Params
41 The Powers of Nested Routes
42 Programmatically Adjust the Route
43 Adding 404 Not Found Pages
44 Redirect Routes
45 Routing Our Quiz App

Completing Our Quiz App
46 Quiz Page HTML and CSS
47 Separating Code Into Components
48 Passing Props to the Question Component
49 Listening to Changes With Watch
50 Computing Values With State
51 More Computing…
52 Passing Data From the Child to the Parent
53 Emitting an Event From the Child Component
54 Completing the Quiz

Animations For an Interactive and Fluid App
55 Introduction to Vue Animations
56 The Transition Component
57 Animating When a Component Leaves
58 Conditional Rendering Animations
59 Building a Small App
60 TransitionGroup to Animate Multiple Elements
61 fdsfs
62 Animating the Other Cards Into Place
63 Routing Animations
64 Animating Upon Rendering
65 Lifecycle Hook of the Transition
66 Animation Styling With JavaScript

API Requests to Fetch Data
67 App Overview
68 The Process of Fetching Data From an API
69 Creating the App
70 Where to Fetch the Data
71 Making the HTTP Requests
72 The Suspense Component
73 Request Offsets and Limits
74 Implementing Paginations
75 Building the UI
76 A Little Fix
77 Component Lifecycle Hooks
78 Fetching Data With onMounted
79 Slots For Dynamic HTML
80 More on Slots
81 Adding a Better Loading State
82 Creating the Header Component
83 Maintaining State With KeepAlive

State Managements in Vue
84 Introduction to State Management
85 Building a Small Project
86 Declaring State With Reactive
87 Ref vs Reactive
88 A Lot of Nested Components
89 Prop Drilling
90 ProvideInject
91 Store Reusable Logic With Composables
92 Global State With Pinia

Vue With TypeScript
93 An Introduction to TypeScript
94 An Optional TypeScript Lesson
95 Building the HTML App
96 Types With State
97 Types With Functions
98 Types With Props
99 Types With Computed
100 Reusing Our Types Throughout Multiple Components

CAPSTONE PROJECT START
101 Project Overview

Building the UI With a Vue Library
102 Your Two Options
103 Setting Up the Vue App
104 Building the NavBar
105 Building the Modal
106 Building the Timeline
107 Adding a Profile View
108 Adding the User Bar
109 Adding an Image Gallary

Identifying Users With Authentication
110 An Introduction to Authentication
111 Supabase – A Backend as a Service
112 Connecting Our Vue App to Supabase
113 Creating a Pinia User Store
114 Adding Input Validation
115 Client vs Backend Validation
116 Signing Up the User
117 Validating if the User is Already Registered
118 Improving Error Handing
119 Adding a Loading State For the Modal
120 Handling the Success Case
121 Adding the Login Logic
122 Persisting the Login State
123 A Loading State for Retrieving the User
124 Handling Logout

Uploading and Displaying Photos
125 Navigating to the User’s Profile
126 Conditionally Rendering the Upload Photo Modal
127 Adding the Input Elements
128 Creating a Bucket For File Storage
129 Programmatically Uploading a Photo
130 Updating the Image Policy
131 Creating the Posts Table
132 Adding a Post to Our DB
133 Adding a Loading State
134 Handling the Success State
135 Fetching Posts Upon Render
136 Adding a Loading State

Complex Data Relations
137 Building a Following Follower Table
138 Conditionally Rendering a Follow Button
139 Making the Profile Component Reactive
140 Implementing the Follow User Functionality
141 Determining Follower Info on Render
142 Implementing the Unfollow Functionality
143 Toggling the FollowFollowing Buttons
144 Performing Aggregate Queries

Scroll Based Pagination
145 Check Auth Status in Timeline Page
146 Separating HTML into Components
147 Fetching the Followers
148 Fetching the Followers’ Posts
149 Rendering the Posts
150 Sorting By Most Recent
151 Let’s Do Some Math
152 The Intersection Observer API
153 Emitting an Event on Intersect
154 Implementing the Pagination
155 Stopping Unnecessary HTTP Requests
156 Saving Data in Environment Variables