The Ultimate Vue JS 2 Developers Course
4.6 (254 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,545 students enrolled
Wishlisted Wishlist

Please confirm that you want to add The Ultimate Vue JS 2 Developers Course to your Wishlist.

Add to Wishlist

The Ultimate Vue JS 2 Developers Course

Learn and master VueJS by building 3 professional, real world web application using Vue!
4.6 (254 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,545 students enrolled
Created by Anthony Gore
Last updated 5/2017
English
Current price: $19 Original price: $195 Discount: 90% off
30-Day Money-Back Guarantee
Includes:
  • 13 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand all Vue concepts from beginner to advanced
  • Build three real world applications using Vue.js utilising every Vue feature
  • Use the Vuex statement management library
  • Write basic Vue with ES5 and also modern Vue with ES6
  • Setup VueJS environment with development tools including Webpack
  • Create a universal application with server-side rendering
  • Use popular plugins from the Vue ecosystem like vue-router and vue-resource
  • Cutting-edge features like Single File Components, Render functions and Server-Side Rendering
View Curriculum
Requirements
  • HTML and CSS
  • Javascript
  • Git and Github
  • NPM
  • ES6 (for Project 2 & 3 only)
  • Webpack (for Project 2 & 3 only)
  • Node.js/Express (for Project 3 only)
Description

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:

  1. A simple but powerful e-commerce UI complete with products and a shopping cart that will utilise most of the essential features of Vue. 
  2. 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.
  3. 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.

I look forward to seeing you in the course!

Who is the target audience?
  • Existing web developers looking to learn Vue.js
  • New web developers looking to pick up a Javascript framework
  • Curious React and Angular developers
  • Laravel developers
Curriculum For This Course
178 Lectures
13:00:14
+
Introduction
2 Lectures 22:47

How to do this course. Read first!
01:36
+
Project 1 - Overview & setup
6 Lectures 18:11
Demo of the finished product
04:14

Register for the Imgur API
03:01

Reviewing the Vue.js Poster Store Github repo
01:02

Clone repo, install dependencies and setup environment file
02:13

Running server and viewing project
01:53

Tour of the project files
05:48
+
Project 1 - Up and running with Vue
7 Lectures 22:59
Include Vue in project
03:07

Creat an instance of Vue
02:39

Adding a data property
03:32

Vue essentials: Directives
02:57

Adding a method
05:13

Rendering a list of items
03:42

Add classes to items
01:49
+
Project 1 - Building the shopping cart
14 Lectures 49:00
First, a request!
01:26

Creating the cart
03:56

Vue essentials: Reactivity
01:52

Iterate cart items in template
04:37

Enhancing cart in the template
01:04

Hide cart if empty
04:13

Adding quantity to cart items
05:13

Cart items quantity logic
05:38

Adding price to cart items
02:58

Vue essentials: Filters
02:31

Formatting price
04:44

Adding quantity buttons to template
03:48

Quantity buttons logic
04:53

Adding classes and breaking loop in addItems
02:07
+
Project 1 - Adding product search
6 Lectures 22:59
Search button
06:09

Search input
02:49

Overview of vue-resource
03:10

Overview of API
03:36

Adding vue-resource to project
02:21

AJAX call for products
04:54
+
Project 1 - Building the product list
7 Lectures 30:49
Replacing dummy items with the real thing
03:35

Product image
06:10

Adding search result count to product list
06:19

Loading message
05:57

Vue essentials: Lifecycle hooks
02:41

Default search on page load
03:49

Adding price to products
02:18
+
Project 1 - Enhancing the shopping cart
5 Lectures 22:34
Vue essentials: Transitions
04:19

Fading in cart total
06:40

Vue essentials: Key
04:05

Vue essentials: List transitions
03:29

Fade in cart items
04:01
+
Project 1 - Scroll loading products
10 Lectures 40:16
How scroll load works
06:32

Creating the results array
03:22

Including scroll monitor in the project
04:41

Scroll monitor basic setup
03:38

Implementing scroll load (part 1)
04:35

Implementing scroll load (part 2)
06:22

Fixing search results
01:38

Adding a "no more items" message
02:59

Vue essentials: Computed properties
02:24

Enhancing "no more items" logic
04:05
+
Project 1 - Finishing touches
2 Lectures 05:41
Hiding elements before Vue compiles them
03:51

Requiring a search string
01:50
+
Project 2 - Overview & setup
7 Lectures 33:51

Demo the completed app features:

  • Overview
  • Filters
  • Detail page
  • Route
  • keep-alive
  • Responsive app, day selector
  • Tooltips
Preview 03:44

  • Demonstration of OMDB API
Getting data from the OMDB API
03:50

  • Visit Github project
  • Clone repo
  • npm install
  • Open code in IDE
  • Customising .env file
Clone repo, NPM install, setup environment
05:03

  • Examine start and build scripts in package.json
  • Start server with npm run start
  • Exit server with Ctrl+C
Running local server
02:06

  • Public folder used for favicon and logo
  • src folder is main working folder
  • Sass/CSS is already provided
  • Overview of server.js which uses Node Express
  • Overview of API module
Tour of the project files
06:18

  • Examine webpack config entry and output and loaders
  • Test webpack by running a build
  • Test babel loader
  • Test SASS import and style loader
  • Discussion of webpack middleware
  • Discussion of hot module replacement middleware
Webpack configuration
09:21

  • Import Vue package into script
  • Create Vue instance with hello world message as a data property
  • Render message in index.html file
  • Import style file for CSS
Hello World
03:29
20 More Sections
About the Instructor
Anthony Gore
4.6 Average rating
249 Reviews
1,545 Students
1 Course
Web Developer, Online Instructor

Hi, I'm Anthony and I'm a web developer and online course instructor from Sydney, Australia. I'm the curator of the Vue.js Developers Newsletter and am currently writing Vue.js Full Stack Development for Packt Publishing.

I've worked for several years as freelancer web developer, but I've also worked for large organisations. I've done development work on all kinds of projects from single page web apps to corporate mega-sites.

Besides web development I'm a keen musician and enjoys travelling and working remotely.

I hope to meet you in one of my courses!