Vue Js Development

Vue is an open-source, front-end library developed by Evan You, an ex-Google employee. Vue is used for creating web applications, and like React, it’s not a complete MVC framework
The packages developed for Vue are lesser than that of React due to its lower popularity, which makes it a challenge to select packages that provide functionality relevant to a particular scenario.

Vue js development

Vue Js?

Vue was initially released in February 2014 by ex-Google employee Evan You and has become popular even though it’s not backed by a big company the development team has only about a dozen developers. Vue is being used by a few companies like Xiaomi, Adobe, Grammarly, Alibaba, and also in many small projects.
Vue uses Virtual DOM (VDOM) as an adopted concept of React. Like React, Vue updates only those objects that get changed in the “real” DOM, so the rendering speed is faster than Angular and similar to React

What you’ll learn

  • Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones
  • Understand the Theory behind Vue.js and use it in Real Projects
  • Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)
  • Learn the latest version of Vue (Vue 3), including the brand-new Composition API

Vue Js Course Curriculum

Getting Started
  • What is "Vue.js"?
  • Different Ways of Using Vue
  • Exploring Vue Alternatives
  • Building A First App With Just JavaScript
  • Re-building the App with Vue
  • Vue vs "Vanilla JavaScript" (just JavaScript)
  • Setting Up the Course Development Environment
  • Course Outline & What's In The Course
  • How To Get The Most Out Of This Course
Basics & Core Concepts – DOM Interaction with Vue
  • Creating and Connecting Vue App Instances
  • Interpolation and Data Binding
  • Binding Attributes with the "v-bind" Directive
  • Understanding "methods" in Vue Apps
  • Working with Data inside of a Vue App
  • Outputting Raw HTML Content with v-html
  • Understanding Event Binding
  • Events & Methods
  • Working with Event Arguments
  • Using the Native Event Object
  • Exploring Event Modifiers
  • Locking Content with v-once
  • Data Binding + Event Binding = Two-Way Binding
  • Methods used for Data Binding: How It Works
  • Introducing Computed Properties
  • Working with Watchers
  • Methods vs Computed Properties vs Watchers
  • v-bind and v-on Shorthands
  • Dynamic Styling with Inline Styles
  • Adding CSS Classes Dynamically
  • Classes & Computed Properties
  • Dynamic Classes: Array Syntax
  • Module Summary
Rendering Conditional Content & Lists
  • Understanding the Problem
  • Rendering Content Conditionally
  • v-if, v-else and v-else-if
  • Using v-show Instead Of v-if
  • Rendering Lists of Data
  • Diving Deeper Into v-for
  • Removing List Items
  • Lists & Keys
Course Project: The Monster Slayer Game
  • Project Setup & First Methods
  • Updating the Health Bars
  • Adding a "Special Attack"
  • Adding a "Heal" Functionality
  • Adding a "Game Over" Screen
  • Finishing the Core Functionality
  • Adding a Battle Log
Vue: Behind the Scenes
  • An Introduction to Vue's Reactivity
  • Vue Reactivity: A Deep Dive
  • One App vs Multiple Apps
  • Understanding Templates
  • Working with Refs
  • How Vue Updates the DOM
  • Vue App Lifecycle - Theory
Introducing Components
  • Introducing Components
  • The Why: Building Complex User Interfaces With Components
  • Multiple Vue Apps vs Multiple Components
Moving to a Better Development Setup & Workflow with the Vue CLI
  • Why We Need A Development Server
  • Why We Want A Better Developer Experience
  • Installing & Using the Vue CLI
  • Inspecting the Created Project
  • Inspecting the Vue Code & ".vue" Files
  • Adding the "Vetur" Extension to VS Code
  • More on ".vue" Files
  • A New Vue Project
  • Creating a Basic Vue App
  • Adding a Component
  • Adding Styling
Component Communication
  • Introducing "Props" (Parent => Child Communication)
  • Prop Behavior & Changing Props
  • Validating Props
  • Supported Prop Values
  • Working with Dynamic Prop Values
  • Emitting Custom Events (Child => Parent Communication)
  • Defining & Validating Custom Events
  • Prop / Event Fallthrough & Binding All Props
  • Demo: Adding Components & Connecting Them
  • Demo: Adding More Component Communication
  • A Potential Problem
  • Provide + Inject To The Rescue
  • Provide + Inject for Functions / Methods
  • Provide + Inject vs Props & Custom Events
Diving Deeper Into Components
  • Project Setup
  • Global vs Local Components
  • Scoped Styles
  • Introducing Slots
  • Named Slots
  • Slot Styles & Compilation
  • More on Slots
  • Scoped Slots
  • Dynamic Components
  • Keeping Dynamic Components Alive
  • Applying What We Know & A Problem
  • Teleporting Elements
  • Working with Fragments
  • The Vue Style Guide
  • Moving to a Different Folder Structure
Forms
  • v-model & Inputs
  • Working with v-model Modifiers and Numbers
  • v-model and Dropdowns
  • Using v-model with Checkboxes & Radiobuttons
  • Adding Basic Form Validation
  • Building a Custom Control Component
  • Using v-model on Custom Components
Sending Http Requests
  • Starting App & Why we need a Backend
  • Adding a Backend
  • How To (Not) Send Http Requests
  • Sending a POST Request to Store Data
  • Http Requests & Http Methods (Verbs)
  • Using Axios Instead Of "fetch()"
  • Getting Data (GET Request) & Transforming Response Data
  • Loading Data When a Component Mounts
  • Showing a "Loading..." Message
  • Handling the "No Data" State
  • Handling Technical / Browser-side Errors
  • Handling Error Responses
Routing: Building “Multi-Page” Single Page Applications
  • What & Why?
  • Routing Setup
  • Registering & Rendering Routes
  • Navigating with router-link
  • Styling Active Links
  • Programmatic Navigation
  • Passing Data with Route Params (Dynamic Segments)
  • Navigation & Dynamic Paths
  • Updating Params Data with Watchers
  • Passing Params as Props
  • Redirecting & "Catch All" Routes
  • Using Nested Routes
  • More Fun with Named Routes & Location Objects
  • Using Query Params
  • Rendering Multiple Routes with Named Router Views
  • Controlling Scroll Behavior
  • Introducing Navigation Guards
  • Diving Deeper Into Navigation Guards
  • The Global "afterEach" Guard
  • Beyond Entering: Route Leave Guards
  • Utilizing Route Metadata
  • Organizing Route Files
Vue & Authentication
  • How Authentication Works in Vue Apps (or any SPA)
  • Locking / Protecting Backend Resources
  • Adding an Authentication Page (Login & Signup)
  • Preparing Vuex
  • Adding a "Signup" Action & Flow
  • Better UX: Loading Spinner & Error Handling
  • Adding a "Login" Action & Flow
  • Attaching the Token to Outgoing Requests
  • Updating the UI Based on Auth State
  • Adding a "Logout" Action & Flow
  • Authentication & Routing (incl. Navigation Guards)
  • Adding "Auto Login"
  • Adding "Auto Logout"
Optimizing & Deploying Vue Apps
  • What To Deploy?
  • Optimization: Using Asynchronous Components
  • Building the Project For Production
  • Deploying a Vue App

Testimonial

Interested To
Get Our Featured Service

Get Started Now