Learning Path: Vue.js: Web Application Development Made Easy
4.0 (1 rating)
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.
21 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Path: Vue.js: Web Application Development Made Easy to your Wishlist.

Add to Wishlist

Learning Path: Vue.js: Web Application Development Made Easy

Create modern web applications with Vue.js
4.0 (1 rating)
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.
21 students enrolled
Created by Packt Publishing
Last updated 7/2017
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 11 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn how to build a reactive web application in VueJS
  • See the importance of MVVM architecture and how VueJS compares with other frameworks
  • Get to know how to bring reactivity to an existing static application using VueJS
  • Understand how to use plugins to enrich your applications
  • Learn to develop customized plugins
  • Understand the usage of VueJS in your static application
  • Get familiar with VueJS components for structuring your application
View Curriculum
  • No prior AWS experience is needed

Vue.js is the upcoming efficient JavaScript framework for building user interfaces. It makes use of the  fast and composable Model–view–viewmodel architecture. If you’re a JavaScript developer looking to develop user interfaces speedily, this Learning Path is for you. This Learning Path will start by building a simple application in Vue.js so you can observe its features in action. Delving into more complex concepts, you’ll learn about reactive data binding, reusable components, plugins, filters, and state management with Vuex.

Moving further, create a To-Do Application. After that, you will build a GitHub application which connects to GitHub using the Axios client. You will learn to create different Vue components as well as handle computed properties for your application. Finally, you will then build a real-time chat application, where you will work with Pusher service, Vue Router, and Vuex. Then, know everything you need to be fully comfortable working with Virtual Private Clouds in the AWS ecosystem, as well as get acquainted with some essential best practices for securing your applications.

By the end of this Learning Path, you will have worked with the different features of Vue.js that will make you fall in love with single page web application development.

About the Author:

For this course, we have combined the best works of this esteemed author:

Olga Filipova took her master's degree in Computer Science in Portugal, at Coimbra University. She worked as a software engineer at Feedzai and as a tutor for professional web development course at a training center in Coimbra. Currently working as a senior software engineer and JavaScript team leader at Meetrics and as technical director at EdEra, she is skilled in project management, team leading, web-development, server management, and programming.

Peter van Meijgaard is a web application developer who has been tinkling with web development ever since he can remember. He is an avid JavaScript developer and loves Vue.js for its simplicity as well its ability to facilitate web app development. He has given various talks on Vue.js in the past, and has also worked on various training programmes.


Who is the target audience?
  • This Learning Path is for web developers who want to learn VueJs to build professional web applications. This Learning Path is also for novice web developers who want to learn VueJs.
Compare to Other Vue JS Courses
Curriculum For This Course
67 Lectures
Web development with Vue.js 2
42 Lectures 05:40:35

This video gives an overview of the entire course.

Preview 04:27

This video is an introduction to the terminology used in this course and for Vue, which will enable you to understand Vue better.


In this video, we will learn the importance of Vue and create a shopping list application using Vue.

The Importance of Vue.js and Working with Vue.js

Using Vue.js in a project is simple. In this video, we will see how to avoid any extra work with other frameworks and use Vue.js

Using Vue.js in an Existing Project

Vue.js was made better with the release of Vue.js 2.0. In this video, we will look at the release of Vue.js 2.0 and the projects that were made using Vue.js 2.0.

Vue.js 2.0! and Projects Using Vue.js

After learning about Vue, we will get started with creating an application. In this video, we will create an application, Pomodoro timer.

Let's Manage Time!

In this video, we will learn about the MVVM (Model View View Model) pattern, which helps in binding Model to the view and vice versa.

Preview 02:23

All Vue properties go through the DefineProperty method, which assigns getters and setters to them. This is what makes the binding so strong. Let’s learn about them!

DefineProperty, Getters, and Setters

Whenever you try a new tool, you want to compare it with other tools. In this video, we will compare Vue with other frameworks.

Comparing with Other Frameworks

Before putting our hands into the code and starting to enhance our applications with components, plugins, mixins, templates, and other things, let's overview the main Vue features.

Vue.js Fundamentals

In this video, we will analyze all possible ways to install Vue.js. We will also learn debugging and testing our application

Installing, Using a Vue.js Application

Debugging is necessary for a Vue application. In this video, we will debug our application.

Debugging Your Vue Application

Scaffolding our applications is necessary so that the reusable components can be used in them. In this video, we will scaffold the application

Scaffolding Our Applications

Components are an important part of any Vue Application. So, we will create and use a component in our application

Preview 10:06

Now that we have learnt about components, we will use them to rewrite our application.

Rewriting the Shopping List with Simple Components

Single-file components are better to work with. Vue provides a lot of features with single-file components. In this video, we will learn about single file components.

Single-File Components

In this video, we will rewrite our application using single-file components, about which we learnt in the previous video.

Rewriting Our Shopping List Application with Single-File Components

As we rewrote our shopping list application, similarly, we will rewrite our Pomodoro application using single-file components.

Rewriting the Pomodoro Application with Single-File Components

With Vue, you can use the special transition wrapper component to specify the CSS transition to use on data changing. We will learn about that here.

Reactive Binding of CSS Transitions

Data binding is a mechanism of propagating changes from the data to the visible layer and vice versa. We will revisit all the different ways of data binding and apply them to our applications.

Revisiting Data Binding and Interpolating Data

Vue supports full JavaScript expressions inside the data binding brackets! By adding any JavaScript expression to the template of Pomodoro application components, filters are applied to the result of the expression.

Using Expressions and Filters

V-bind directive allows binding an element's attribute or a component property to an expression. The v-if directive allows to conditionally render the whole element.

Revisiting and Applying Directives

In this video, we will change the title component using events.

Parent-Child Components' Communication, Events, and Brain Teaser

In this video, we will learn the importance of the global state store. We will understand Vuex and its store.

Introduction to Vuex and the Global State Store

Greetings are important to users who use your application. In this video, we are going to create a greetings example to see Vuex in action.

Greetings with Store

In this video, we will install Vuex and import the store to our application.

Installing and Using the Vuex Store in Our Applications

In this video, we are going to take a look at changing the title, finding shopping lists by ID with the help of the Vuex store.

Using the Vuex Store in the Shopping List Application

In this video, we are going to animate our pause, stop, and run buttons, and improving the time interface of the Pomodoro timer using the Vuex store. We will also add a few changes to make the timer fun.

Using the Vuex Store in the Pomodoro Application

Plugins written for Vue can provide various functionalities, starting from the definition of some global Vue methods or even the instance methods. Let’s use the existing resource plugin for Vue.

Using the Vue-Resource Plugin in the Shopping List Application

Now that we know how to use thye existing plugins with our Vue application, why not create our own plugin? We already have a little bit of animation in our Pomodoro application. It would be nice to add some sounds to our Pomodoro!

Creating and Using a Plugin in the Pomodoro Application

Before we start writing unit tests, let's try to understand what we're trying to achieve by writing them. Why is unit testing so important?

Why Unit Tests?

Let's check on some particularities of unit testing our Vue application and its components. In order to be able to write tests for the component instance, first of all, it should be instantiated!

Unit Tests for Vue Applications

Before starting the actual writing of our unit tests, let's establish some rules. For each of our .js or .vue files, there will exist a corresponding test spec file, which will have the same name and a .spec.js extension

Writing Unit Tests for the Shopping List Application

In this video, we will write unit tests for our pomodoro application to test it.

Writing Unit Tests for Our Pomodoro Application

End-to-end (e2e) testing is a technique in which the whole flow of the application is being tested. In this kind of testing, neither mocks nor stubs are used, and the real system is being under the test.

End-to- end Testing and Nightwatch e2e

So, now that we know all the theory behind the UI testing, we can create our first end-to-end test for our Pomodoro application. Let's define the steps that we will perform and the things that we should test.

Writing e2e Tests for the Pomodoro Application

Deploying web applications, it means that there will be a public URL, and any person will be able to type this URL on their browser and access the application.

Software Deployment

In this section, we will prepare the application to run on Heroku.

Deploying the Pomodoro Application

In this section, we will perform a similar procedure and deploy our shopping list application.

Deploying the Shopping List Application

We applied the most important concepts of Vue to make our applications reactive, fast, maintainable, and testable. However, it’s important to know that Vue 2.0 has been launched. It brings some new possibilities and some new things to learn and use.

Vue 2.0

Let's check again what we have done so far. We have developed two applications using Vue.js. Let's revisit them.

Revisiting Our Applications

In the previous video, we summarized what the applications that we have developed are doing. They are nice but lack features, style, identity, UX patterns, extension to other platforms, and so on. Let's check what we can still do.

Why is it Just the Beginning?
Fun Projects with Vue 2
25 Lectures 05:04:26

This video will give an overview of entire course

Preview 03:35

The video gives you a better understanding how the todo application is going to look like. The video will show that it’s easy to add, remove, toggle, and edit a todo item.

Introduction to the todo Application

This video gives you a starting point to begin developing a Vue application. In this video, we will take a look at the Vue devtools for Google Chrome.

Setting Up Our Development Environment

This video will show how to implement the functionality of adding a todo.

Let’s Start by Adding todos

This video will show how to toggle and remove a todo.

Toggling and Removing a todo

This video will show you how it’s possible to edit a todo.

Editing a todo

This video gives you a better understanding of how the GitHub-application is going to look like. It will also show you how to search for a GitHub user with a given username.

Introduction of the GitHub Application

The video gives you a better understanding about Vue CLI and how to create a new application.

Scaffolding Our Application

This video will give you a better understanding about how to configure Vue Router.

Setting Up Vue Router

This video will show you how they can perform AJAX-requests using Axios.

Setting Up Axios

This video will show how to install Vue Material and add it to the project.

Setting Up Vue Material

This video will show you how to respond to the change inside the text-input.

Making the Text-Input Working

This video will show you how to create a repositories table on the repositories page.

Creating the Repositories Table

This video will show you how to create a user-card for the GitHub user information. You will also learn how to create Vue components and import them correctly.

Creating the User Table

This video gives you a better understanding of how the chat-application is going to look like. The video will also show you how the results are displayed in real time.

Introduction to the Chat Application

This video will start with creating an entry point for the chat application. In this video, the server side of the application will be created.

Scaffolding Our Client and Server

In this video, we will add the necessary packages to our client. We will configure Vue, Socket.IO, Vue Router, and Vuex.

Adding Packages to Our Client

In this video, we will start by expanding our Vuex store. In the previous section, we stored the GitHub information on the root of the application. We are going to use the Vuex store as a central place to store this information.

Setting Up the Vuex Store

In this video, we will start by setting up our pages. We will touch route metadata to check if the user is logged in or not.

Setting Up Our Pages

In this video, we will add the basic functionality to our Join page. You will join a room with a given username and room name. The page will have a connection with the Vuex store to join a room.

Adding Functionality to the Join Page

In this video, we will begin and finish the styling for the join page. We will use the BEM standard for our CSS. We will also use a CSS reset file to make sure all the browsers show the CSS the same way.

Styling the Join Page

In this video, we will finalize the join page. We will refactor the created HTML elements to Vue components.

Finalizing the Join Page

In this video, we will add the functionality of creating a message to the room’s page. We need to fire events to the server and listen for events on the client.

Adding Functionality to the Room Page

In this video, we will finalize the room page. We will refactor the HTML-tree to reusable Vue components.

Finalizing the Rooms Page

In this video, we will finalize the application. We will tweak the pages a little bit and fix a couple of bugs. We need to scroll to the latest message, focus the input on changing the page, and more.

Final Tweaks
About the Instructor
Packt Publishing
3.9 Average rating
8,175 Reviews
58,832 Students
687 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.