Mastering Vue

Reviews Curriculum
This Masters Program makes you expert in developing modern single page applications. This program will help you to get in-depth knowledge of JavaScript, Vue Building blocks, Databinding, Directives, Filters, Vuex, Forms and Vuelidate, Http and Promises and unit testing using a hands-on project based on real-life case studies.
Course Preview
  • Javascript Essentials
  • Vue
  • Unit Testing
  • Project
Total 20,000
Discount Offered 4,001

20,000 15,999

*Instructor-led Course. Price exclusive of taxes.

Upcoming Batches

Class will start with one hour of orientation session, covering the learning path and objective of the program. You will have the flexibility to select batch as per your schedule and time preference.
Skills you will master
  • Dependency Injection
  • Unit Testing
  • JavaScript
  • Visual Studio
  • Debugging
  • Express
  • Deployment
  • Project Development
  • Vue

Career Outlook

Career Opportunity 13 Million of professionals associated with vue across the globe

Salary Trend

$78,000 is the median advertised salary for Software Developer in 2017. Companies competing to hire the limited number of Software Engineer are willing to offer up to US $200,000 per year. ( &

Job Titles Include

Software Developer, Software Engineer, Web Developer, Front end Developer, Developer

Course Description

  • About the course
  • Course Curriculum
  • Assessment
  • F&Q's

About the course

The Mastering Vue course is primarily designed for UI Developer(s)/Web Developer(s) who want to learn how to create single page web application using Vue.js. In this course, you will learn the Vue.js and JavaScript fundamental like modules, components, directives, instance lifecycle hooks, routing, forms validation, state management, unit testing classes, arrow function, REST API call that help you to build rich, scalable, extensible and high performance single page web application and much more.

Course objectives

At the completion of this course, attendees will be able to;

  1. Understand JavaScript core and advanced concepts
  2. Understand Vue basic and advanced in-depth concepts
  3. Create components, directives, filters and forms validations etc.
  4. Create REST Service using Express
  5. Consume REST service
  6. Optimize web page performance
  7. Secure application based on user roles
  8. Scale SPA for Phone, Tablets, Laptop & Desktop using Bootstrap
  9. Publish their App on cloud

Who can do this course?

All professionals who are keen to develop interactive, light weight and highly extensible SPA should go for this course.


Anyone who wants to learn Mastering Vue should have a basic knowledge of JavaScript programming and HTML5.


Visual Studio Code, Node.js, Vue CLI

Javascript Essentials

Javascript Essentials

JavaScript and ES6

  1. Understanding JavaScript
  2. Understanding ES6
  3. JavaScript Data Types – Primitive & Non-Primitive
  4. Naming a variable
  5. Number Mathematics

var, let and const

  1. Using var
  2. Using let
  3. Using const

Functions and Arrow Function

  1. Different types of Functions
  2. Named Function
  3. Anonymous Function
  4. Arrow Function
  5. Anonymous Function vs. Arrow Function

Objects and Constructor Function

  1. Creating Object
  2. Literal Object
  3. Primitive types as Objects
  4. Constructor Function

Class and Methods

  1. ES6 Class
  2. Class Members
  3. Templated String



Introduction to Vue

  1. Introduction to Vue
  2. Vue History
  3. Understanding Vue Versions
  4. Angular vs. Vue vs. React

Setting Up Environment

  1. Installing Node.js and Vue CLI
  2. Installing Visual Studio Code
  3. Useful VS Code Extensions for Vue Development


  1. Introduction to Vue CLI
  2. Creating new project
  3. Building Project
  4. Vue CLI Commands and Options

Exploring Vue App Structure

  1. Understanding Vue folder structure
  2. Vue Initialization Process
  3. Vue Building Blocks

Data Binding


    1. Text
    2. Raw HTML
    3. Attributes
    4. Using JavaScript Expressions


    1. Arguments
    2. Modifiers

    Short hands

    1. v-bind Shorthand
    2. v-on Shorthand

    Class and Style Binding

    Form Input Bindings: v-model


  1. Introduction to Directive
  2. Built in Directives: v-if, v-show, v-for etc.
  3. Creating Custom Directives
  4. Using Custom Directive

Events Handling

  1. Listening to Events using v-on
  2. Event Modifiers: stop, prevent, capture, self etc.
  3. Key Modifiers: enter, tab, delete, esc, space, up, down etc.
  4. System Modifiers: ctrl, alt, shift


  1. Introduction to Filters
  2. Built-in Filters: capitalize, uppercase, lowercase, currency, json, filterBy, orderBy
  3. Creating Custom Filters


  1. Understanding Routing
  2. Setting up vue-router
  3. Defining Routes

Navigation and Route Parameters

  1. Adding a Navigation Bar
  2. Styling Active Router Links
  3. Navigation using code
  4. Route Parameters

Nested Routes and Route Guards

  1. Setting up Child or Nested Routes
  2. Introduction to Vue Route Guards
  3. Using Route Guards

The Vue Instance

  1. Creating a Vue Instance
  2. Data and Methods
  3. Instance Lifecycle Hooks
  4. Lifecycle Diagram


  1. Understanding Components
  2. Registering Components Locally and Globally
  3. Root Component
  4. Thinking in components
  5. Composing application as components


  1. Defining Base Component
  2. Defining Sub Component

Vue Forms Validations

  1. Introduction to Vuelidate
  2. Installing Vuelidate
  3. Adding a Validator
  4. Adding Validation UI Feedback
  5. Controlling Styles for Invalid Entries
  6. Validating Passwords for Equality
  7. Controlling the Form Submit Button


  1. Understanding Vue Error Messages
  2. Debugging Code in the Browser
  3. Debugging Code using IDE

State management - Vuex

  1. Introduction to state management
  2. Understanding Vuex
  3. Centralized store
  4. Understanding Getters
  5. Using Getters
  6. Mapping Getters to Properties

Introduction to Node

  1. Understanding Node.js
  2. Uses of Node.js
  3. Creating Node.js App


  1. Building a Web Server
  2. HTTP Request Methods, Headers
  3. Response Codes and Headers

Express Framework

  1. Understanding Express
  2. Installing Express
  3. Creating and Running Express App

Database Operations with REST Service

  1. Introduction to REST
  2. Developing REST services using Express
  3. REST Service CRUD Operations

Unit Testing

Unit Testing

Unit Testing

  1. Understanding Unit Testing
  2. Vue Unit Testing Framework
  3. Unit Testing with Jasmine and Karma
  4. Writing Unit Tests

Vue Unit Tests

  1. Creating a basic unit test
  2. Unit tests for component
  3. Running and Debugging Unit Tests



Project: ECommerce Site Development

Discussing Project Architecture

  1. Understanding Application layers
  2. Discussing Application Entities Properties
  3. Discussing Relationship among Application Entities

Developing Application Architecture

  1. Designing Application Architecture
  2. Developing REST API
  3. Developing User Login and Signup Page


  1. Implementing Token based Authentication
  2. Managing User session
  3. Implementing Authorization

Route Protection

  1. Protecting a Route from Unauthorized Access
  2. Need of Route Protection

Developing Category, Product Operations

  1. Developing Category CRUD Operations
  2. Developing Product CRUD Operations

Product Listing

  1. Displaying Products to Users
  2. Applying Paging and Sorting


  1. Creating Cart
  2. Adding Products to Cart
  3. Removing Products from Cart

Payment Gateway

  1. Understanding Payment Gateway Process
  2. Integrating Payment Gateway


  1. Understanding Github
  2. Creating Github Repository
  3. Uploading code to Github repository
  4. Performing operations on repository


  1. Deploying using Github
  2. Vue Hosting Options
  3. Hosting Vue App on cloud server

Master Program Certificate

Dot Net Tricks Certificate

Dot Net Tricks's mock-up tests and assignments help the professionals to work on real-world projects and to get an edge in their careers and make their lives better. This training program includes 3 mock-up tests and 2 assignments.

Mockup-Tests objectives

At the completion of mockup-tests, attendees will be able to;

  1. Monitor theirs learning progress
  2. Evaluate themselves
  3. Crack theirs technical interview first round with objective questions

Assignments objectives

At the completion of assignments, attendees will be able to;

  1. Gain confidence to work on Vue project
  2. Evaluate theirs development skills
  3. Prepare themselves for real-application development

Q1. What is Masters Program and how is it different from the individual courses offered by Dot Net Tricks?

Masters Program is a structured learning path recommended by leading industry experts and ensures that you transform you to be a master of multitude skills, and this program aims at providing you an in-depth knowledge of the each and every skill. Individual courses at Dot Net Tricks focus on specialization in one or two specific skills, however, if you intend to become a master, then this is the path for you to follow.

Q2. Who are your mentors?

All our mentors are highly qualified and experience professionals. All have at least 8-10 yrs of development experience in various technologies and are trained by Dot Net Tricks to deliver interactive training to the participants.

Q3. What If I miss my online training class?

All online training classes are recorded. You will get the recorded sessions so that you can watch the online classes when you want. Also, you can join other class to do your missing classes.

Q4. Whom do I contact, if I have more queries?

You can give us a CALL at +91 113 303 4100 OR email us at

Q5. Can I share my course with someone else?

In short, no. Check our licensing that you agree to by using Dot Net Tricks LMS. We track this stuff, any abuse of copyright is taken seriously. Thanks for your understanding on this one.

Q6. Do you offer certificates of completion?

Yes, We would be providing you with the certificate of completion of the program, once you have successfully submitted all the assessment and it has been verified by our subject matter experts.

Q7. How do I enroll for the course?

You can enroll in the course by doing payment. Payment can be made using any of the following options.
  1. Visa debit/credit card
  2. Net banking
  3. Through PayPal

Q8. How do I get an invoice?

You'll get a receipt upon checkout, however, if you need an invoice send us your details and we'll get one back to you right away.

Q9. Student discounts?

Yes, Dot Net Tricks provides student discount to learners who cannot afford the fee. Email us from your student account, or attach your student ID.

Q10. How do I setup my team?

Purchase the team license, then drop us an email with a list of user emails you’d like to have access, we'll create your team accounts.

Q11. Do you provide any course material or live session videos?

Yes we do. You will get access to the entire content including class videos, mockups, and assignments through LMS.

Q12. Do you provide technology version upgrade session free?

Yes we do. As the technology upgrades your content gets updated at no cost.

Q13. Do you prepare me for the job interview?

Yes, we do. We will discuss all possible technical interview questions and answers during the training program so that you can prepare yourself for interview.

Q14. Do you provide hands-on real application development?

Yes, we do provide you to do hands-on real application development.

Course Features

Anywhere, Any Device

All sessions can be attended from anywhere, and using any device. Staying at home or office, you can upgrade yourself with latest technologies.

Instructor-led Sessions

All sessions are led by our expert mentors. Even you have access to your live online training sessions video which will be available to you through LMS within 24 hours.


Each Module will be followed by objective mockup tests and practical assignments which help you to monitor your learning progress and Evaluate yourself.

Real-life Case Studies

All the sessions are delivered using real-life examples. You will learn how to develop real project using industry recomended principles and practices.

365 Days Access

You will get 365 days access to the LMS. This includes video, course material, exercise files and ppts used during the session.


We have a community forum for all our learners wherein you can enrich their learning through peer interaction and knowledge sharing.

Technical Support

We have online support team available to help you with any technical queries you may have during the course.


At the end of the course, you need to complete one project. On successful completion, you will receive course completion certificate.

Weʼve trained thousands of developers at some of the worldʼs largest tech companies, including:

Corporate Training

Our corporate training programs are specially designed as per industry requirements, so that your employees can develop applications with latest technologies. As a trusted and resourceful training partner, Dot Net Tricks helps you achieve success with its industry-leading instructional design and customer training initiatives.

Professional Reviews