Vue.JS Training

Vue.JS Training

Get Information

Vue is a progressive framework for building user interfaces. Unlike other monolithic frames, Vue is designed to be adopted incrementally from scratch. The core library is focused only on the view layer and is easy to import and integrate with other libraries or existing projects. Vue, on the other hand, perfectly powers sophisticated single page applications when used in combination with modern tools and supporting libraries.

You can continue to build your HTML, CSS and JavaScript skills by learning Vue.js, one of the newest JavaScript frameworks available today.
Vue.js is a fun and easy-to-use JavaScript framework for building user interfaces. The essence of the frame is simple and fast; it can be used in projects of any size.
This course is mainly aimed at JavaScript enthusiasts who want to learn a modern and simple JavaScript framework.

About Education

Education Objectives:

  • js DOM Interactions
  • Class and Style Operations
  • js Condition Use and Lists
  • js Instance
  • Vue CLI Setup
  • Working with Component and communication between Components
  • Using Directive, Filter and Mixins
  • Throw HTTP Requests with js (Axios)
  • Routing Structure with Vue Router
  • State management with Vuex
  • Deployment Operations



Education Content

  • What is js?

Why should js be used?

Vue, React, Angular comparison

Create a simple Vue application

  • js DOM Interactions

Vue Template Structure

How does Template Syntax and Vue instance work?

Accessing data property information in Instance

Attribute Bind

What is a Directive? How to use it

Show HTML codes on Template

Event Listen

Get data from $event object

Event modifier

Writing JavaScript code in a template

Two Way DataBinding

Computed Property Usage

Watcher Usage

  • Class and Style Operations

Dynamically adding CSS Classes

Dynamically adding Style codes

  • js Condition Use and Lists

Use of v-if, v-else-if, v-else

v-show usage

v-if vs v-show

rendering lists with v-for

Return object with v-for

get index number with v-for

The v-bind:key property in lists

  • What is js Instance?

Basic information about Vue Instance

Working with multiple Vue instances

Accessing Vue Instance from outside

How does Vue manage Data and Method data?

Let’s take a closer look at $el and $data objects

Using $refs in Template

Vue LifeCycle


  • Vue CLI Setup
  • Introduction to Component Structure

Why Use Component?

How many different components can be defined?

Data storage with data method in Component

Registering components as Local and Global

Root Component in vue

  • Working with Component

Improving the Component structure

Naming Components

Component Style Scope Operations

  • Communication between components

Communication Problems

Parent => Contact between Child

Child => Communication between Parent

Child => Communication between Child

Event Bus Usage

Homework – Practice

  • Advanced Component Usage

Submit Content

Sending content with slots

Parsing content with Named Slots

Default Slot and Slot Defaults

Dynamically switch between components  Let’s understand the behavior of dynamic components!

Keep alive dynamic components

LifeCycle Hooks in Dynamic Components

  • Directive Usage

How does Directive work? Hook functions

Create simple directive

Send data to Directive

Send arguments to Directive

Modify directive with modifier

Local identification of Directives

  • Using Filters and Mixins

Creating a Local Filter

Global Filter and chaining multiple Filters

Alternative to Filter (Computed Property)

What are Mixins? Let’s understand the structure of mixins

Creating and using mimin

How to combine mixins?

Creating a Global Mixin

Mixin and Scope Concept

  • Throw HTTP Requests with js (Axios)

Installing the Axios class

GET request

POST request

PATCH request

DELETE request

Sending Parameters with GET (exceptional case)

Create a Custom Axios Instance

  • Routing Structure with Vue Router

What are Router and Route?

Define Route

Routing Methods

Lazy Routing

Navigating between Router Links and Components

Where am I? Styling Active Links

Routing operations via JavaScript

Send and read parameters with Route

Redirect Process

  • Example Application (CRUD operations)
  • State Management with Vuex

Why do we need a different State Government?

Central Store and State Concepts

Vuex Configuration and Store Creation

Methods of Access to State Data

What are Getters? How does it work?

Using mapGetters

Use spread operator for getters

What are Mutations? How does it work?

Use of Mutations

mapMutations Usage

What are Actions? How does it work?

Using mapActions

Parameter usage in Mutations and Actions

Module System

  • Sample Applications

Auth Operations

Component Preparation and Publishing via NPM

Making Translator with Translate API

  • Deployment Operations

Taking the Vue Project Live

Who Should Receive the Training?

  • Beginners in computer and software engineering
  • Those who want to master the concept of Front End Framework.
  • Anyone who wants to master the application development process with VueJS.


Basic knowledge of JavaScript, HTML and CSS is required.

Plan this training institutionally!

This training can be planned in different durations and content specific to your organization. Please contact us for detailed rich content and planning to realize your training objectives.

Get in touch

Additional information






Academy Club