The Ultimate Vue JS 2 Developers Course

The Ultimate Vue JS 2 Developers Course

English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 13 Hours | 2.21 MB

Learn and master VueJS by building 3 professional, real world web application using Vue!

Vue.js 2 is one of the hottest Javascript frameworks right now and demand for Vue developers is quickly growing amongst employers.

In this course we will learn by doing! I will lead you through the process of building three real world, professional Vue.js applications that, together, demonstrate all the features and capabilities of Vue from the basics to the cutting edge:

  • A simple but powerful e-commerce UI complete with products and a shopping cart that will utilise most of the essential features of Vue.
  • A multi-page movie session times app that introduces professional features of Vue like components, Vue Router and the Webpack build flow, allowing you to create complex and larger apps.
  • A Google Calendar clone. This project uses cutting edge features like server-side rendering and the Vuex state management library.
  • In addition to writing code, we will also take the time to discuss the essential Vue concepts so that you leave with a solid understanding of Vue in addition to having the skill and confidence to go and start building your own Vue apps.

This course is ideal for existing web developers looking to upskill with Vue.js. Please note these requirements:

  • Project 1 assumes knowledge of HTML and basic Javascript
  • Project 2 & 3 assume some familiarity with modern Javascript (ES6), Webpack and Node.js. However, these technologies can be learned in parallel with this course. I provide links to external resources to help you learn them if you need to.
Table of Contents

Introduction
1 Course introduction
2 How to do this course. Read first.html

Project 1 – Overview setup
3 Demo of the finished product
4 Register for the Imgur API
5 Reviewing the Vue.js Poster Store Github repo
6 Clone repo install dependencies and setup environment file
7 Running server and viewing project
8 Tour of the project files

Project 1 – Up and running with Vue
9 Include Vue in project
10 Creat an instance of Vue
11 Adding a data property
12 Vue essentials Directives
13 Adding a method
14 Rendering a list of items
15 Add classes to items

Project 1 – Building the shopping cart
16 First a request
17 Creating the cart
18 Vue essentials Reactivity
19 Iterate cart items in template
20 Enhancing cart in the template
21 Hide cart if empty
22 Adding quantity to cart items
23 Cart items quantity logic
24 Adding price to cart items
25 Vue essentials Filters
26 Formatting price
27 Adding quantity buttons to template
28 Quantity buttons logic
29 Adding classes and breaking loop in addItems

Project 1 – Adding product search
30 Search button
31 Search input
32 Overview of vue-resource
33 Overview of API
34 Adding vue-resource to project
35 AJAX call for products

Project 1 – Building the product list
36 Replacing dummy items with the real thing
37 Product image
38 Adding search result count to product list
39 Loading message
40 Vue essentials Lifecycle hooks
41 Default search on page load
42 Adding price to products

Project 1 – Enhancing the shopping cart
43 Vue essentials Transitions
44 Fading in cart total
45 Vue essentials Key
46 Vue essentials List transitions
47 Fade in cart items

Project 1 – Scroll loading products
48 How scroll load works
49 Creating the results array
50 Including scroll monitor in the project
51 Scroll monitor basic setup
52 Implementing scroll load part 1
53 Implementing scroll load part 2
54 Fixing search results
55 Adding a no more items message
56 Vue essentials Computed properties
57 Enhancing no more items logic

Project 1 – Finishing touches
58 Hiding elements before Vue compiles them
59 Requiring a search string

Project 2 – Overview setup
60 Demo of the finished product
61 Getting data from the OMDB API
62 Clone repo NPM install setup environment
63 Running local server
64 Tour of the project files
65 Webpack configuration
66 Hello World

Project 2 – Setting up components
67 Vue essentials Components
68 Configuring components
69 Setup the movie-list component
70 Setup the check-filter component

Project 2 – Filters
71 Vue essentials Props
72 Add props to check-filter component
73 Making check-filter toggleable
74 Vue essentials Custom events
75 Emitting a custom event from check-filter
76 Vue essentials Vue.js devtools
77 Adding a payload to check-filter event
78 Processing check-filter event in root instance
79 Add filter arrays to movie-list
80 Creating logic for genre filter

Project 2 – Refactoring with single file components
81 Vue essentials Single file components
82 Refactor project to use single file components

Project 2 – Getting data from API
83 Understanding the API
84 Getting data from the API
85 Replace dummy data with API data
86 Creating movie-item component
87 Fleshing out movie-item template
88 Enhance genre filter for multi-genre movies
89 Adding no results and loading messages

Project 2 – Displaying session times
90 Adding moment library to project
91 Displaying session times
92 Filtering session times
93 Adding time filters
94 Filter movies based on time filter
95 Filter sessions based on time filter
96 Enhance the no results message with filters

Project 2 – Component communication with an event bus
97 Vue essentials Event bus
98 Using a global event bus in the project

Project 2 – Creating the Detail page
99 Vue essentials Vue router
100 Abstract main page into overview component
101 Setting up Vue router
102 Adding router-view to main template
103 Creating detail page
104 Passing movie ID to detail page
105 Displaying movie-item in detail page
106 Vue essentials Slots
107 Incorporating slots in movie-item
108 Fleshing out detail page

Project 2 – Adding the day selector
109 Creating day-select component
110 Addings days to day-select
111 Day selection logic
112 Application-level day property
113 Mobile day selector

Project 2 – Adding tooltips
114 Vue essentials Custom directives
115 Adding tooltip custom directive
116 Creating tooltip in DOM
117 Adding classes and event listeners to tooltip
118 Vue essentials Plugins
119 Making tooltip a custom plugin

Project 2 – Finishing touches
120 Adding keep-alive to router to maintain filter state
121 How v-cloak works alongside Webpack
122 Building for production

Project 3 – Overview setup
123 Demo of the finished product
124 Clone repo NPM install setup environment
125 Tour of the files
126 Webpack configuration and extract text demo

Project 3 – Setting up the calendar
127 Setup the app component
128 Add moment to root set timezone
129 Generate list of days in current month
130 Padding days to startend of month for complete weeks
131 Grouping days into blocks of weeks

Project 3 – Calendar day functionality
132 Vue essentials Shorthands
133 Adding calendar-day component
134 Adding days of week above calendar grid
135 Highlighting current day on calendar
136 UI effects for past and days outside of month
137 Vue essentials Vuex
138 Add Vuex store to project and create basic state properties

Project 3 – Adding the month selector
139 Adding header and creating current-month component
140 Displaying date in current-month component
141 Adding buttons to current-month component
142 Moving Vuex into own file
143 Changing month and year with Vuex mutation
144 Enhancing current-month logic
145 Vue.js Dev Tools Vuex

Project 3 – Creating the event form
146 Creating event-form component
147 Capture click in calendar-day
148 Positioning Event Form
149 Opening and closing Event Form
150 Displaying events in calendar-day
151 Creating events state in store
152 Adding input to event-form
153 Submit new event to store
154 Get event date in store
155 Improving form
156 Focus directive Enter keyup is create
157 Displaying date on Event Form
158 Highlight Event Form active day

Project 3 – Loading stored events
159 Setup for sending events to server
160 Receiving event on server
161 Vue essentials Vuex actions
162 Creating addEvent action in store
163 Returning a promise from addEvent action

Project 3 – Writing events to template
164 Replace Vuex state in main file
165 Move mock data to HTML template
166 Splicing mock data into HTML file

Project 3 – Server-side rendering
167 Vue essentials Render functions
168 Creating root instance template with a render function
169 Introduction to server-side rendering
170 Server-side rendering webpack flow
171 Creating common entry file
172 Creating server entry file
173 Setting up bundle renderer
174 Splicing rendered bundle into HTML template
175 Vuex state hydration

Project 3 – Finishing touches
176 Adding image to header and reloading page on initial render
177 Building for production

Wrap up
178 Wrap up