Vue JS 2 – The Full Guide by Real Apps (Vuex, Router, Node)

Vue JS 2 – The Full Guide by Real Apps (Vuex, Router, Node)
Vue JS 2 – The Full Guide by Real Apps (Vuex, Router, Node)
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 29 Hours | 17.5 GB

Vue JS is my favourite framework for building web apps. Vue 2 link best from Angular and React. Vue router & Vuex incl.

If you are planning to start your career as a developer or you just want to improve your programming skills, then this course is right for you.Get all you need to start web development in one course!

This resource is the only resource you need in order to start Web Development with Vue 2 JS and during this course you will get confidence and skills required to start your own projects. You will get the right mindset to apply for a developer career.

We will start very easily in first Vue JS project, in which we will create a layout of our application. I will explain to you how to create Vue components, data and methods. We will spent entire first section learning in improving in Vue JS concepts like data binding, data manipulation, event handling, state management and much more.

Furthermore, we will work on a simple store model that will help us to better understand Vuex in later sections. We will store data into our browser Local Storage.

After first project we will jump into a much bigger application. We will start to work on Vue Meetuper project. Application to create and join various Meetups. Very exciting!

Later in this course, we will take a look on authentication with JWT (json web tokens) and Session Authentication on the client/server side.

Next, we will work on a core application functionality to create Meetup. I will introduce you forms in Vue.js. We will integrate vuelidate plugin and we will validate our form inputs. You will get familiar with interactive forms (wizard form). We will not work only with with traditional inputs but I will show you how to integrate Datepicker and Timepicker inputs.

After the Meetup create section we will take a look on feature to join and leave Meetup.

We are still not finished yet. Next, we will work on feature to create threads and posts. This section will be very interesting because I will introduce Socket library. Socket is a JavaScript library for realtime web applications. It enables realtime, bi-directional communication between web clients and servers. We will use it to create chat-like functionality. Users can create posts on thread, after post has been created all of the clients present in Meetup detail page will get their page updated in real time.

Development process is not finished with a post section. We will work on Profile page section. This section is dedicated to you only. I prepared series of assignments on which you will be able to create this feature by yourself.

In later sections we will work on feature to get location from IP address and we will use this location to improve UX on our page. We will lookup Meetups by this location, so every user entering our page has unique experience. I will show you how to create basic pagination, and we will be paginating threads on Meetup detail page.

We will finish course with meetup update feature. This feature again will be mostly created by you.

During this course we will be switching from our frontend application to our backend Node.js application.

NOTE: Node sections are completely optional, you are able to download server code and work only on Vue JS Application.

What you’ll learn

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

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

Activity Project – Vue Intro
3 Init Project
4 App Introduction
5 Install Vue
6 First Directives, v-bind v-if
7 Directives v-on v-else
8 Directives v-for
9 Iterate Activities Assignment
10 Activity Form
11 Vue Components
12 Activity Form Adjustments

Activity Project – Vue CLI
13 Init Project Vue CLI
14 Init Project Github Repo
15 Project Folder Structure Explanation
16 Merging Code from old Application
17 Lifecycle Functions Intro
18 Eslint
19 Computed Properties
20 Watchers
21 More Computed Properties
22 Category Select Input
23 Activity Create Component
24 Create Activity Emit Event
25 Create Activity Debugging
26 Create Activity Vue Set
27 Fetch Activities Async
28 Reject Error from Fetch Activities
29 Style Biding
30 Progress Styles
31 Mixins
32 Filters
33 Abstraction Fake API Part 1
34 Abstraction Fake API Part 2
35 Callbacks
36 Delete Activity Part 1
37 Delete Activity Part 2
38 Update Activity Part 1
39 Update Activity Part 2
40 Store part 1
41 Store part 2
42 Store part 3
43 Update Activity Continue Part 1
44 Update Activity Continue Part 2
45 Local Storage
46 Filtering Activities Part 1
47 Filtering Activities Part 2
48 Filtering Activities Part 3

Vue Meetuper Intro
49 Project init GIT – Preferable
50 [Optional]: Project Init Vue CLI
51 [Optional]: Server Explanation
52 Database Setup
53 Proxy Config + Fetch Categories
54 Display Categories
55 Display Meetups
56 Vue Router Intro
57 Router Navigation to Detail Page
58 Meetup Detail Page & Fetch Data
59 Meetup Detail – Display Threads & Posts
60 Meetup Find Page
61 Not Found Page

Meetuper – Vuex
62 Vuex Init
63 Vuex Actions
64 Provide Vuex to Components
65 Vuex shared functions
66 Mapping Functions
67 Modules part 1
68 Modules part 2
69 App Spinner part 1
70 App Spinner part 2

Meetuper – Authentication
71 Init Page Register & Login
72 Bind Values to Form
73 Validation Start
74 More Validators
75 Custom Validators

[Server]: Meetuper – Session Authentication
76 Register Init [Skippable – Code Included]
77 Register Implementation
78 Session Setup
79 Passport Intro
80 Login Implementation & Debugging
81 Logout & Auth Middleware
82 Debugging Auth & Logout

Meetuper – Session Authentication
83 Register
84 Login
85 Username in Navbar
86 Preserve Auth State
87 Logout
88 Resolve Auth State
89 Secret Page
90 Secret Page Redirect
91 Only Guest User

[Server] – JWT Authentication
92 Server Init [Skippable – Server Code Included]
93 Finishing JWT
94 Debugging JWT

Meetuper JWT Authentication
95 JWT Client
96 Logout & Interceptor
97 Display Toast Message
98 Error Handling Server

Meetup Create
99 Meetup Create Init
100 Move through the steps
101 Merge Form Data
102 Confirmation Step and Input Validation
103 Check Step Validity part 1
104 Check Step Validity part 2
105 Dynamic Render Component
106 Date Picker Input
107 Time Picker Input
108 Confirmation Event
109 [Server] Create meetup
110 Finalisation of Create Meetup

Meetuper Join & Leave
111 Join & Leave Computed Properties
112 Apply Computed Properties
113 Join Meetup
114 [Server] Join & Leave Meetup
115 Join Meetup Working
116 Leave Meetup Finish
117 Join & Leave Debugging

Meetuper Post & Thread Create
118 Thread Create Modal
119 Toggle Modal
120 Create Thread Action + Server
121 Create Thread Working + Debugging
122 Ordering Threads + Toast
123 Thread List and Post Create Components
124 Custom Directive
125 Auto Expand Directive
126 Send Post Action
127 [Server] Send Post
128 Send Post Action & Update View

129 Socket Init
130 Emitting & Subscribing
131 Custom Plugin
132 Socket Plugin
133 Socket Final
134 Socket Testing
135 Redirect After Logout, Final Improvements

Meetuper Profile Page
136 Page Profile & Server
137 Fetch Stats Actions
138 Display Stats
139 Tab Functionality
140 User Update Modal Component
141 Provide User To Modal
142 Update User
143 Profile Section Debugging

Meetuper Interesting Features
144 [Server] Get location from IP
145 Meta Module
146 Display Location in Find Page
147 Display Location in Create Page
148 Search Meetup By Location
149 Search Meetup By Location Debugging
150 Find Meetups by Category
151 Find Meetups Improvements
152 Load More Threads, Server Init
153 Fetch Threads Apply Query Params
154 Fetch More Threads Working
155 Debugging Section

Meetuper Edit
156 Page Meetup Edit
157 Edit Guard
158 Bind Values to Meetup Edit
159 Update Meetup Working
160 Meetup Update Fixes
161 Meetup Edit Styling Changes
162 Meetups Home Page – Add Location
163 Debugging & Final Lesson!
164 Course Completed!

[Bonus]: Heroku Deploy
165 Heroku Preparation Part 1
166 Heroku Preparation Part 2
167 Heroku Preparation Part 3
168 App Testing