Vue.js Essentials - 3 Course Bundle
4.4 (1,356 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,424 students enrolled

Vue.js Essentials - 3 Course Bundle

Learn and master VueJS by building 3 professional, real world web application using Vue!
4.4 (1,356 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,424 students enrolled
Created by Anthony Gore
Last updated 2/2019
English
English
Price: $99.99
30-Day Money-Back Guarantee
This course includes
  • 12.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll 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
Course content
Expand all 182 lectures 12:37:30
+ Build Your First Vue.js App - Introduction
1 lecture 02:25

Welcome to Build Your First Vue.js App. This is a hands-on course for web developers who've never used Vue.js before, or want to brush up on the fundamentals.

My name is Anthony Gore and I'll be your instructor on this course. Let me tell you a little bit about it!

In this course we're going to cover many of the fundamental features of Vue, including stuff like:

  • Installing Vue

  • Adding Vue to a web page

  • Creating Vue data and methods

  • Template syntax

And so on.

We'll also build a simple app called Vue.js Poster Shop, which will allow you to practice all the theory you've learned in a real-world app.

Let's take a look at the finished product so you can get a sense of what you're going to be able to do with Vue by the end of the course.

Demo of the finished product

This is Vue.js Poster Shop. It allows you to search for a kind of poster you might want to buy. For example, here's a search for "cat", because who doesn't want a poster of a cat, right?

If you're more of a dog person, though, you can use the search bar at the top and search for that.

Cart

When you see a poster you want to purchase, you can add it to the cart like that.

From the cart, you can increase the quantity of an item if you want more than one. You can also decrease the quantity, and if you decrease it to 0, it's going to be removed from the cart entirely.

So you can see we have complete shopping cart functionality here, and you'll be surprised at how easy it is to do all this with Vue.

Scroll loading

There are also a variety of other subtle features of the app that give it a really nice user experience.

One I'll show you now is the scroll loading feature.

So you can see from the message at the top of the page that a search for "cat" has returned 11 results.

As I start to scroll down the page to view the results, notice the scroll bar over here on the right of the page.

You'll see that it suddenly jumps up as I scroll toward the bottom of the results.

The reason is that not all 11 of the results are added to the page at once; in fact, only 4 are added at a time, and more get added as we keep scrolling.

This feature that makes the page load faster and run smoother.

You'll be able to advanced Vue.js features like this by the end of the course as well.

Introducing the course
02:25
+ Build Your First Vue.js App - Setting up the project
3 lectures 09:38
Starter code installation
04:44
Running the server and viewing the project
02:19
Touring the project files
02:35
+ Build Your First Vue.js App - Up and running with Vue
7 lectures 19:27
Including Vue in the project
02:58
Creating an instance of Vue
01:29
Rendering data on the page
01:55
Understanding directives
02:43
Adding a method
03:57
Rendering the list of products
03:54
Adding key to iterated products
02:31
+ Build Your First Vue.js App - Building the shopping cart
12 lectures 26:24
Creating the cart
01:31
Understanding reactivity
01:28
Vue Devtools
01:30
Adding products to the cart
02:40
Displaying cart items
02:24
Hiding cart if empty
02:20
Adding quantity to cart items
02:34
Cart items quantity logic
02:53
Understanding filters
01:24
Formatting price
02:40
Adding quantity buttons to template
02:07
Implementing inc and dec logic
02:53
+ Build Your First Vue.js App - Adding product search
6 lectures 15:34
Adding search button
03:40
Adding search input
03:13
Overview of vue-resource
01:46
Overview of API
02:04
Adding vue-resource to project
02:05
AJAX call for products
02:46
+ Build Your First Vue.js App - Building the product list
9 lectures 30:15
Replacing dummy items
02:30
Adding product image & price
03:04
Adding search result count to product list
03:33
Adding the loading message
05:02
Understanding lifecycle hooks
02:45
Default search on page load
02:29
Understanding transitions
03:55
Fading in cart total
04:26
Fading in cart items
02:31
+ Build Your First Vue.js App - Scroll loading products
6 lectures 21:25
How scroll load works
04:26
Adding a sensor element
02:47
Scroll monitor setup
02:52
Triggering code with scroll monitor
04:24
Appending items
03:55
Fixing search results
03:01
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

If you're looking to learn and master Vue.js with an expert instructor, look no further than Vue.js Essentials.

In this series of three courses, you'll build three real-world Vue.js apps that take you from the very basics of Vue to the cutting edge.

With over 6000 past students, this course bundle includes 10 hours of high-quality video with English closed captions.

Keep reading to see what's included...

Course 1: Build Your First Vue.js App

This first course is an introduction for those who've never used Vue.js or who need to brush up on the basics.

We'll cover key Vue concepts such as:

  • Installing Vue

  • Adding Vue to a web page

  • Template syntax (interpolations and directives)

  • Lifecycle hooks

  • Transitions

And more!

The best way to learn is by doing, so we'll put this theory into practice and build a simple but powerful eCommerce user interface complete with products and a shopping cart called Vue.js Poster Shop.

Course 2: Build A Vue.js Single-Page App with Vue Router

Now that you know the basics of Vue, you're ready to learn Vue's most powerful features!

By the end of this second course, you'll be able to build a high-performing, feature-rich Vue.js app using the single-page application (SPA) architecture.

Topics covered in this course include:

  • Components

  • Vue Router

  • Slots

  • Single-file components

  • Custom plugins and directives

  • Webpack configuration for Vue.js projects

And more!

Together, we'll build a movie session times app called Vue.js Cinema that, unlike the app from the first course, includes multiple pages managed with Vue Router.

Building this app will introduce you to the power and versatility of components-based app design. You'll also learn how to utilize Webpack for an enhanced Vue development experience. 

Course 3: Build A Professional Vue App with Vuex & Server-Side Rendering

Are you ready to become a Vue expert?

Now that you're comfortable building Vue.js SPAs, you're ready for Vue's advanced concepts!

In this course, I'll show you the tools and techniques that front-end experts use to build highly optimized, high performing web UI. 

Firstly, we'll cover the Vuex state management pattern, which is a special method for storing data in your app that's essential for bigger and more complex sites. 

We'll then set up server-side rendering (SSR) from scratch. This is where we compile our app on the Node.js server in order to drastically improve page load time.

The case-study project for this course is our most ambitious yet; a Google Calendar clone called Vue.js Cinema that utilizes Vuex, SSR and a host of other optimizations.

Who this course is for:
  • 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