The Complete Vue JS Developer Course – inc. Vue JS 2!

The Complete Vue JS Developer Course – inc. Vue JS 2!
The Complete Vue JS Developer Course – inc. Vue JS 2!
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 44 Hours | 31.3 GB

Build real web apps with Vuex, Router, Node! Master Vue Js and Vue JS 2!

Vue JS is a very popular JavaScript front-end framework that was designed specifically to help you write Web apps faster and more easily than ever before!

Used by companies such as Nintendo, Adobe, GitLab, Baidu and Alibaba, Vue JS is rapidly increasing in popularity, so it’s a great time to add it to your CV.

By the end of this course you’ll have the skills and confidence you need to use Vue JS on your own projects!

So, no matter whether you’re a complete beginner to Vue JS, or an experienced programmer keen to improve your skills, this course is for you!

Students learn best when they’re putting what they learn in to practice straight away, so we’ve build this course around two really great projects (which will look fantastic in your career portfolio!):

Project 1 – Activity Planner app

In this opening project students build their own activity planner web app! It’s a brilliant introduction to the basic concepts of the Vue JS framework, and by the end you’ll:

  • Have learnt how to create Vue components, data and methods
  • Know how to create store data into our browser Local Storage.
  • Fully understand Vue JS concepts like data binding, data manipulation, event handling, state management (and much more!)

Project 2 – VueMeetuper app

A much more difficult project, but one you’ll be proud of completing! Here students take a big step up and build an incredibly functional online meet up web app. Your app will let you make and join various Meetups, create editable threads and dedicated posts, register and authenticate users, build a user profile page and get your location! After doing all that, students will:

  • Be able to manage authentication with JWT (json web tokens) and Session Authentication on the client/server side.
  • Understand forms in JS – including how to integrate and validate plugins, how to use interactive (wizard) forms and how to integrate Datepicker and Timepicker inputs.
  • Create a chat-like functionality using the Socket library (a JS library for realtime web applications) – including real-time page updates!
  • Be able to to get location from IP address and use this location to improve user experience!
  • And much more!

What you’ll learn

  • Develop powerful, modern, real-world web applications with Vue JS 2 and Node
  • Completely understand the processes and concepts of Vue JS 2
  • Use gained knowledge to create your own Web Applications
  • Become fluent in concepts and tools like Vuex, MongoDb, Sockets, Authentication
Table of Contents

Introduction
1 Detailed Overview + Requirements
2 How to get help + Course Info

Beginner optional section – Todo Application
3 Section Introduction
4 Initilization of Vue App
5 Your first code – Hello World!
6 Introduction to Variables
7 Introduction to Functions – part 1
8 Introduction to Functions – part 2
9 How web apps work – part 1
10 How web apps work – part 2
11 Introduction to Operators
12 What is Call Stack
13 Introduction to Objects
14 Introduction to Classes
15 More about Class Contructor
16 Introduction to this context
17 Introduction to Inheritance – part 1
18 Introduction to Inheritance – part 2
19 What is IF statement
20 Learn more about IFs
21 Introduction to Arrays
22 Map and Filter array functions
23 Create custom Array functions
24 Difference between var, const & let
25 What is function scope
26 Initilization of Todo App
27 Vue Component data and methods
28 Create todo container html and css
29 Create todo items html and stylings
30 Introduction to Scss
31 Let’s create more Vue Components
32 What are Props
33 Explanation of v-for directive
34 Initilization of Modal + Stylings
35 Modal open button stylings
36 Move modal to separate component
37 Toggling of Modal Component
38 Implement close Modal
39 Refactoring of Modal component
40 Initilization of Todo create form
41 What is Two way data binding
42 New Todo create component
43 Implementation of Todo create
44 Introduction to Form Validation
45 Close modal after Todo create
46 Learn how to handle form errors
47 Create edit and delete buttons
48 Display edit form for Todo
49 Get values to edit form inputs
50 Data store architecture
51 Dispatch action from the store
52 Finishing update todo functionality
53 Implementing delete todo functionality
54 Introduction to Store architecture
55 Learn how to persist data
56 Persist data improvements
57 Section Summary

Project 1 – Activity Planner App
58 Section Introduction
59 Introduction to Vue components
60 Making improvements in Activity Form
61 Section Outro
62 Introduction to Vue.JS (Initialise Project)
63 Introduction to the Activity Planner App
64 Installation of Vue.JS Framework
65 Starting with directives – directive v-bind and v-if
66 Explanation of directives v-else and v-on
67 Explanation of directive v-for
68 Iterate over activities array
69 Introduction to forms – Create Activity Form

Introducing Vue CLI
70 Section Intro
71 Introduction to watchers
72 Learning more about computed properties
73 Creating select input in form
74 Moving form to separate component
75 Learning how to emit events
76 Introduction to debugging
77 Responsive UI updates with Vue.set
78 Asynchronous fetching of Activities data
79 Handle error from response
80 Introduction to Style Binding
81 Initialization of the Activity Planner via Vue CLI
82 Improving styling of Progress Bar
83 Introduction to Mixins
84 Introduction to Filters
85 Create abstraction of API
86 Finishing the API abstraction + Debugging
87 Introduction to callback functions
88 Implementing Delete Activity functionality
89 Finishing Delete Activity functionality
90 Implementing Update Activity functionality
91 Finishing Update Activity functionality
92 Info before cloning my github repository
93 Introduction to Store architecture – part 1
94 Store architecture – part 2
95 Store architecture – part 3
96 Improvements of Activity update functionality Part 1
97 Improvements of Activity update functionality Part 2
98 Persisting activities data in Local Storage
99 Filtering activities feature – part 1
100 Filtering activities feature – part 2
101 Filtering activities feature – part 3
102 Section Outro
103 Initialization of the Activity Planner via Github
104 Explanation of CLI application folder structure
105 Merging code from Project 1 application
106 Introduction to lifecycle funtions
107 Introduction to Eslint
108 Introduction to computed properties

Project 2 – VueMeetuper App
109 Section Intro
110 Display Meetups data in app
111 Introduction to Vue router
112 Setting up navigation to Detail page
113 Working on Detail page + fetching Meetup Data
114 Display Threads & Posts data in Detail page
115 Working on Meetup Find Page
116 Implementation of Not Found Page
117 Section Outro
118 Note before cloning my github repository
119 Initialization of VueMeetuper via Github
120 Note before initialisation of server
121 [Optional] Initialization of VueMeetuper app via Vue CLI
122 [Optional] Explanation of Node Server
123 Setting up Mongo Atlas Database
124 Explanation of Proxy + fetching Categories data
125 Display Categories data in app

Vuex – state management pattern + library
126 Section Intro
127 Finishing the Loading Spinner
128 Section Outro
129 Initialization of Vuex
130 Introduction to Vuex Actions
131 Injecting Vuex into Components
132 Purpose of Shared Functions in Vuex
133 Easier access to Vuex – Mapping
134 Introduction to Modules – part 1
135 Introduction to Modules – part 2
136 Implementation of Loading Spinner

Form Validation – Introduction to Validators + Vuelidate
137 Section Intro
138 Initialization of Register and Login page
139 Binding component values to form
140 Validation of form inputs
141 Introduction to built-in Vuelidate validators
142 Creating custom validators
143 Section Outro

Server Authentication – Learning Session Authentication + Passport
144 Section Intro
145 Initialization of Register functionality
146 Implementation of Register controllers and routes
147 Configuring Session implementation
148 Introduction to Passport package
149 Implementation of Login functionality + Debugging
150 Implementation of Logout and Authentication middleware
151 Debugging of implemented Authentication functionality
152 Section Outro

Client Authentication – Learning Session Authentication
153 Section Intro
154 Creating only-guest restricted pages
155 Section Outro
156 Sending request to register user
157 Sending request to login user
158 Display user name in navigation bar
159 Creating persistent authentication state
160 Working on logout functionality
161 Informing application about authentication state
162 Creating Secret page protected by authentication
163 Redirecting when user is not authenticated

Server Authentication – Learning JWT Authentication
164 Section Intro
165 Replacing Session authentication with JWT
166 Finishing implementation of JWT
167 Debugging implemented JWT functionality

Client Authentication – Learning JWT Authentication
168 Implementing JWT authentication to VueMeetuper
169 Changing Logout and adding Interceptor functionality
170 Display Toast message on error
171 Improving error handing on Server
172 Section Outro

Meetup Create – Building Interactive form to create Meetups
173 Section Introduction
174 Initialization of time picker Input
175 Emitting form data to parent page
176 Implementing create meetup on server
177 Wrapping up create meetup functionality
178 Section Summary
179 Initialization of Meetup create page
180 Separating form into multiple screens
181 Sharing form data with form screens
182 Confirmation form step and input validation
183 Checking form step validity – part 1
184 Checking form step validity – part 2
185 Creating dynamically rendered component
186 Initialization of date picker Input

Join & Leave Meetup – Learn how to be a member of Meetup
187 Section Introduction
188 Creating join and leave meetup computed properties
189 Applying computed properties to view
190 Implementing join meetup functionality
191 Server implementation of join and leave meetup
192 Finishing up join meetup functionality
193 Finishing up leave meetup functionality
194 Debugging of join and leave meetup implementation
195 Section Summary

Posts and Threads – Adding interactivity to Meetups
196 Section Introduction
197 Sending Action to create Thread post
198 Server implementation of create Post
199 Updating view after post is created
200 Section Summary
201 Implementing modal window to create Thread
202 Toggling modal window functionality
203 Implemeting Action to create Thread
204 Finishing Thread create feature + Debugging
205 Ordering Threads by date + displaying Toast message
206 New components Thread List and Post Create
207 Introduction to custom directives
208 Creating Auto Expand directive

Sockets – Realtime chat functionality
209 Section Introduction
210 Initialization of Socket library
211 Learning how to emit event and subscribe to socket
212 Introduction to Vue plugins
213 Creating custom socket plugin
214 Wrapping up socket functionality
215 Testing socket implementation
216 Redirecting after logout – small improvements
217 Section Summary

Profile Page – Section filled up with Assignments
218 Section Introduction
219 Section Summary
220 Initialization of Profile page
221 Fetching user statistics from server
222 Displaying user statistics in page
223 Implementing Tabs to display different screen
224 Creating Modal to display update user form
225 Passing user data to modal component
226 Finishing up update user feature
227 Debugging of profile section

User Location – Learn how to display User location from IP address
228 Section Introduction
229 Getting location from IP – server implementation
230 Creating meta module in Vuex
231 Displaying Location in Find Page
232 Providing location to meetup create page
233 Searching Meetup by location
234 Debugging of search meetup functionality
235 Section Summary

UX Improvements – Search meetups by category and lazy loading
236 Section Introduction
237 Implementing search meetup by category feature
238 Improvements in meetup search
239 Loading more threads – server implementation
240 Applying query parameters to fetch threads request
241 Loading more threads in VueMeetuper
242 Debugging of meetup search and load more threads feature
243 Section Summary

Meetup Update – Learn how to update created meetups
244 Section Introduction
245 Section Summary
246 Creating page to update meetup
247 Allow only meetup creators to access update meetup page
248 Bind values to Meetup Edit component
249 Finishing up Meetup update functionality
250 Fixing small issues in Meetup update
251 Style changes in meetup update page
252 Adding location to meetup home page
253 Course wrap-up + Debugging

[Bonus] Heroku Deploy – Deploying VueMeetup to live server
254 Section Introduction
255 Setting up production environment – part 1
256 Setting up production environment – part 2
257 Deploying application to Heroku
258 Testing Application on Heroku

[Bonus] Delete Meetup
259 Section Introduction
260 Implementing delete endpoint on server
261 Display confirm window before delete
262 Create action in VUEX to delete meetup
263 Mutate state after meetup delete
264 Remove threads and posts from state
265 Remove threads and posts from state

[Bonus] Pagination
266 Pagination server implementation
267 Initilization of pagination component
268 Set pagination parameters in Vuex
269 Sending request with actual page
270 Persistent pagination with query params
271 Section Summary

Confirmation Email
272 Section Introduction
273 Create confirmation Hash
274 Tips and Suggestions before sending Email
275 Send email with NodeMailer
276 New user Activate Page
277 Activate User implementation
278 Display redirect messages
279 Last Improvements + Section Summary