Getting Started

Welcome to the Course!
What is "Vue.js"?
Different Ways of Using Vue
Exploring Vue Alternatives
Building A First App With Just JavaScript
Join our Online Learning Community
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
Module Resources

Basic & Core Concepts - DOM Interaction with Vue

Module Introduction
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
A First Summary
Time to Practice: Data Binding
Understanding Event Binding
Events & Methods
Working with Event Arguments
Using the Native Event Object
Exploring Event Modifiers
Locking Content with v-once
Time to Practice: Event Binding
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
Time to Practice: Reactivity
Dynamic Styling with Inline Styles
Adding CSS Classes Dynamically
Classes & Computed Properties
Dynamic Classes: Array Syntax
Time to Practice: Dynamic Styling
Module Summary
Module Resources

Rendering Conditional Content & Lists

Module Introduction
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
Time to Practice: Conditional Content & Lists
Module Summary
Module Resources

Course Project: The Monster Slayer Game

Module Introduction
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
Module Resources

Vue: Behind the Scenes

Module Introduction
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
Vue App Lifecycle - Practice
Module Resources

Introduction Components

Module Introduction
Understanding the Problem
Introducing Components
The Why: Building Complex User Interfaces With Components
Multiple Vue Apps vs Multiple Components
Module Resources

Moving to a Better Development Setup & Workflow with the Vue CLI

Module Introduction
Why We Need A Development Server
Why We Want A Better Developer Experience
A Note About The NodeJS Version
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
A Small Addition
Module Resources

Component Communication

Module Introduction
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
Time to Practice: Props & Custom Events
A Potential Problem
Provide + Inject To The Rescue
Provide + Inject for Functions / Methods
Provide + Inject vs Props & Custom Events
Module Summary
Module Resources

Diving Deeper Into Components

Module Introduction
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
Module Summary
Module Resources

Course Project: The Learning Resources App

Module Introduction
Setup & First Steps
First Components & Props
Styling and More Components
Header & BaseCard Components
Adding a Base Button
Dynamic Components & Attribute Fallthrough
Adding & Styling Tabs
Adding a Form
Fetching User Input
Adding a Modal Dialog
Deleting Items
Adding "Teleport"
Module Resources

Forms

Module Introduction
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
Module Summary
Module Resources

Sending Http Requests

Module Introduction
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
Module Summary
Module Resources

Routing: Building "Multi-Page" Single Page Applications

Module Introduction
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
A Vue Bug
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
Summary
Module Resources

Animations & Transitions

Module Introduction
Animation Basics & CSS Transitions
Understanding CSS Animations
Why Is "Just CSS" Not Enough?
Playing CSS Animations with Vue's Help
Using the Transition Component
CSS Animations with the Transition Component
Using Custom CSS Class Names
Example: Animating a Modal
Transitioning Between Multiple Elements
Using Transition Events
Building JavaScript Transitions (instead of CSS)
Disabling CSS Transitions
Getting Started with Animated Lists
Animating Lists with "transition-group"
Animate List Item Movement
Animating Route Changes
An Important Note on Animated Route Changes
Module Resources

Vuex

Module Introduction
What & Why?
Creating & Using a Store
Connecting Components to State
Introducing Mutations - A Better Way of Changing Data
Passing Data to Mutations with Payloads
Introducing Getters - A Better Way Of Getting Data
Running Async Code with Actions
Understanding the Action "Context"
Using Mapper Helpers
Example: Adding More State
Organizing your Store with Modules
Understanding Local Module State
Namespacing Modules
Structuring Vuex Code & Files
A Challenge!
Challenge Solution (1/3)
Challenge Solution (2/3)
Challenge Solution (3/3)
Summary
Module Resources

main Project: "Find a Coach" Web App

Module Introduction
Planning the Project / Web App
Planning the Data Requirements
Planning the Layout / Components
Registering Routes
Adding Route Page Components
Working on the Main Layout & Styling
Wiring Up Pages
Adding Vuex and Coach Data
Working on the Coaches List and List Items
Adding a Couple of Base Components (Base Card, Base Button, Base Badge)
Building the Coach Detail Component
Filtering Coaches
Registering as a Coach: The Form
Adding Coaches to Vuex
Adding Form Validation
Working on the Contact Form
Storing Requests (Messages) With Vuex
Outputting Incoming Requests (Messages)
Filtering Requests for the Active Coach
Sending a PUT Http Request to Store Coach Data
Fetching Coach Data (GET Http Request)
Rendering a Loading Spinner
Adding Http Error Handling
Sending Coaching Requests Http Requests
Caching Http Response Data
Adding Route Transitions
The "Not Found" Page & Summary
Module Resources

Vue & Authentication

Module Introduction
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"
Summary
Module Resources

Optimizing & Deploying Vue Apps

Module Introduction
What To Deploy?
Optimization: Using Asynchronous Components
Note: Async Components & Routing
Building the Project For Production
Deploying a Vue App
Module Resources

The Composition API - Replacing the Options API

Module Introduction
Which Problem Does The Composition API Solve?
Replacing "data" with "refs"
Building "reactive" Objects
Reactivity: A Deep Dive
Replacing "methods" with Regular Functions
Time to Practice: Data & Functions
Replacing "Computed Properties" with the "computed" Function
Two-Way-Binding and the Composition API
Working with Watchers
Time to Practice: Composition API Core Building Blocks
A First Summary
How To Use Template Refs
Components, Props & The Composition API
Emitting Custom Events
Working with Provide/ Inject
Lifecycle Hooks in the Composition API
Migrating from Options API to Composition API - An Example Project
Migrating the First Component
Migrating a Big Component
Migrating the Remaining Components
Routing, Params & The Composition API
The Route & Router Objects and the Composition API
Using Vuex with the Composition API
Summary
Module Resources

Reusing Functionality: Mixins & Custom Composition Functions

Module Introduction
Reusability Concepts
Using Mixins
Understanding Mixin Merging
Global Mixins
Disadvantages of Mixins
Custom Hooks / Composables & The Composition API
More Custom Composition Functions
Why Hooks / Composables Beat Mixins
Example: Creating a "Search" Hook
Custom Hooks Gotchas
More Thoughts on Custom Hooks / Composables
Example: A Custom "Sort" Hook
Module Resources

Round & Next Steps

Course Roundup & Next Steps

Vue 2 to Vue 3 Migration

Vue 3 - Overview
Important Changes & Migration Steps
Vue 3: New Features
The New Composition API (Optional!)
Further Migration Resources
About this Course & Vue 3
About this Course & Vue 3 (Written Summary)

Getting Started [VUE2]

Why is this section marked with "VUE2"?
Course Introduction
Join our Online Learning Community
Let's Create our First VueJS Application
Extending the VueJS Application
Course Structure
Take Advantage of all Course Resources!
Setup VueJS Locally
Module Resources & Useful Links

Using VueJS to Interact with the DOM [VUE2]

Module Introduction
Understanding VueJS Templates
How the VueJS Template Syntax and Instance Work Together
Accessing Data in the Vue Instance
Binding to Attributes
Understanding and Using Directives
Disable Re-Rendering with v-once
How to Output Raw HTML
Optional: Assignment Starting Code
Broken Udemy Download Links
Time to Practice - Outputting Data to Templates
Listening to Events
Getting Event Data from the Event Object
Passing your own Arguments with Events
Modifying an Event - with Event Modifiers
Listening to Keyboard Events
Time to Practice - Events
Writing JavaScript code in the Templates
Using Two-Way-Binding
Reacting to Changes with Computed Properties
An Alternative to Computed Properties: Watching for Changes
Saving Time with Shorthands
Time to Practice - Reactive Properties
Dynamic Styling with CSS Classes - Basics
Dynamic Styling with CSS Classes - Using Objects
Dynamic Styling with CSS Classes - Using Names
Setting Styles Dynamically (without CSS Classes)
Styling Elements with the Array Syntax
Time to Practice - Styling
Module Wrap Up
Module Resources & Useful Links

Using Conditionals and Rendering Lists [VUE2]

Module Introduction
Conditional Rendering with v-if
v-else-if in Vue.js 2.1
Using an Alternative v-if Syntax
Don't Detach it with v-show
Rendering Lists with v-for
Getting the Current Index
Using an Alternative v-for Syntax
Looping through Objects
Looping through a List of Numbers
Keeping Track of Elements when using v-for
Time to Practice - Conditionals & Lists
Module Wrap Up
Module Resources & Useful Links

First Course Project - The Monster Slayer [VUE2]

Introduction & Challenge
Setting up the Course Project
Creating the Vue Instance and Styling the Healthbars
Showing the Player Controls Conditionally
Implementing a "Start Game" Method
Implementing an "Attack" Method
Write better Code - Time for Refactoring!
Implementing a "Special Attack"
Implementing a "Heal" Metho
Finishing the Action Buttons
Creating an Action Log
Printing the Log (v-for)
Finishing the Log
Styling the Log Conditionally
Wrap Up
Full Application Code

Understanding the VueJS Instance [VUE2]

Module Introduction
Some Basics about the VueJS Instance
Using Multiple Vue Instances
Accessing the Vue Instance from Outside
How VueJS manages your Data and Methods
A Closer Look at $el and $data
Placing $refs and Using them on your Templates
Where to learn more about the Vue API
Mounting a Template
Using Components
Limitations of some Templates
How VueJS Updates the DOM
The VueJS Instance Lifecycle
The VueJS Instance Lifecycle in Practice
Module Wrap Up
Module Resources & Useful Links

Moving to a"Real" Development Workflow with Webpack and Vue CLI [VUE2]

Module Introduction
Why do we need a Development Server?
What does "Development Workflow" mean?
Using the Vue CLI to create Projects
Installing the Vue CLI and Creating a new Project
An Overview over the Webpack Template Folder Structure
Understanding ".vue" Files
Understanding the Object in the Vue File
How to Build your App for Production
Module Wrap Up
More about ".vue" Files and the CLI
Debugging VueJS Projects

An Introduction to components [VUE2]

Module Introduction
An Introduction to Components
Storing Data in Components with the Data Method
Registering Components Locally and Globally
The "Root Component" in the App.vue File
Creating a Component
Using Components
Time to Practice - Components
1 question
Time to Practice - Components (Code)
Moving to a Better Folder Structure
Alternative Folder Structures
How to Name your Component Tags (Selectors)
Scoping Component Styles
Module Wrap Up
Module Resources & Useful Links

Communicating between Components [VUE2]

Module Introduction
Communication Problems
Using Props for Parent => Child Communication
Naming "props"
Using "props" in the Child Component
Validating "props"
Using Custom Events for Child => Parent Communication
Understanding Unidirectional Data Flow
Communicating with Callback Functions
Communication between Sibling Components
Using an Event Bus for Communication
Centralizing Code in an Event Bus
Time to Practice - Component Communication
Time to Practice - Component Communication (Code)
Wrap Up
Module Resources & Useful Links

Advance Component Usage [VUE2]

Module Introduction
Setting up the Module Project
Passing Content - The Suboptimal Solution
Passing Content with Slots
How Slot Content gets Compiled and Styled
Changed Slot Styling Behavior
Using Multiple Slots (Named Slots)
Default Slots and Slot Defaults
A Summary on Slots
Switching Multiple Components with Dynamic Components
Understanding Dynamic Component Behavior
Keeping Dynamic Components Alive
Dynamic Component Lifecycle Hooks
Time to Practice - Slots and Dynamic Components
Time to Practice - Slots and Dynamic Components (Code)
Wrap Up
Module Resources & Helpful Links

Second Course Project - Wonderful Quotes [VUE2]

Module Introduction
Setting up the Project
Initializing the Application
Creating the Application Components
Passing Data with Props and Slots
Allowing Users to Create Quotes with a NewQuote Component
Adding Quotes with Custom Events
Adding an Info Box
Allowing for Quote Deletion
Controlling Quotes with a Progress Bar
Finishing Touches and State Management
Module Resources

Handling User Input with Forms [VUE2]

Module Introduction
A Basic <input> Form Binding
Grouping Data and Pre-Populating Inputs
Modifying User Input with Input Modifiers
Binding <textarea> and Saving Line Breaks
Using Checkboxes and Saving Data in Arrays
Using Radio Buttons
Handling Dropdowns with <select> and <option>
What v-model does and How to Create a Custom Control
Creating a Custom Control (Input)
Submitting a Form
Time to Practice - Forms
Time to Practice - Forms (Code)
Wrap Up
Module Resources & Useful Links

Usng and Creating Directives [VUE2]

Module Introduction
Understanding Directives
How Directives Work - Hook Functions
Creating a Simple Directive
Passing Values to Custom Directives
Passing Arguments to Custom Directives
Modifying a Custom Directive with Modifiers
02:24
Custom Directives - A Summarytering Directives Locally
Using Multiple Modifiers
Passing more Complex Values to Directives
Time to Practice - Directives
Time to Practice - Directives (Code)
Wrap Up
Module Resources & Useful Links

Improving your App with Filters and Mixins [VUE2]

Module Introduction
Creating a Local Filter
Global Filters and How to Chain Multiple Filters
An (often-times better) Alternative to Filters: Computed Properties
Understanding Mixins
Creating and Using Mixins
How Mixins get Merged
Creating a Global Mixin (Special Case!)
Mixins and Scope
Time to Practice - Filters & Mixins
Time to Practice - Filters and Mixins (Code)
Wrap Up
Module Resources & Useful Links

Adding Animations and Transitions [VUE2]

Module Introduction
Understanding Transitions
Preparing Code to use Transitions
Setting Up a Transition
Assigning CSS Classes for Transitions
Creating a "Fade" Transition with the CSS Transition Property
Creating a "Slide" Transition with the CSS Animation Property
Mixing Transition and Animation Properties
Animating v-if and v-show
Setting Up an Initial (on-load) Animation
Using Different CSS Class Names
Using Dynamic Names and Attributes
Transitioning between Multiple Elements (Theory)
Transitioning between Multiple Elements (Practice)
Listening to Transition Event Hooks
Understanding JavaScript Animations
Excluding CSS from your Animation
Creating an Animation in JavaScript
Animating Dynamic Components
Animating Lists with <transition-group>
Using <transition-group> - Preparations
Using <transition-group> to Animate a List
Understanding the App
Creating the App
Adding Animations
Wrap Up
Module Resources & Useful Links
The Animated "Monster Slayer" App

Connecting to Servers via Http - Using vue-resource [VUE2]

Module Introduction
Accessing Http via vue-resource - Setup
Firebase & The Right Database
Creating an Application and Setting Up a Server (Firebase)
POSTing Data to a Server (Sending a POST Request)
GETting and Transforming Data (Sending a GET Request)
Configuring vue-resource Globally
Intercepting Requests
Intercepting Responses
Where the "resource" in vue-resource Comes From
Creating Custom Resources
Resources vs "Normal" Http Requests
Understanding Template URLs
Wrap Up
Module Resources & Useful Links

Routing in a VueJS Application [VUE2]

Module Introduction
Setting up the VueJS Router (vue-router)
Setting Up and Loading Routes
Understanding Routing Modes (Hash vs History)
Navigating with Router Links
Where am I? - Styling Active Links
Navigating from Code (Imperative Navigation)
Setting Up Route Parameters
Fetching and Using Route Parameters
Reacting to Changes in Route Parameters
vue-router 2.2: Extract Route Params via "props"
Setting Up Child Routes (Nested Routes)
Navigating to Nested Routes
Making Router Links more Dynamic
A Better Way of Creating Links - With Named Routes
Using Query Parameters
Multiple Router Views (Named Router Views)
Redirecting
Setting Up "Catch-All" Routes / Wildcards
Animating Route Transitions
Passing the Hash Fragment
Controlling the Scroll Behavior
Protecting Routes with Guards
Using the "before enter" Guard
Using the "before leave" Guard
Loading Routes Lazily
Wrap Up
Module Resources & Useful Links

Better State Management with Vuex [VUE2}

Module Introduction
Why a Different State Management May Be Needed
Understanding "Centralized State"
Using the Centralized State
Why a Centralized State Alone Won't Fix It
Understanding Getters
Using Getters
Mapping Getters to Properties
Understanding Mutations
Using Mutations
Why Mutations have to run Synchronously
How Actions improve Mutations
Using Actions
Mapping Actions to Methods
A Summary of Vuex
Two-Way-Binding (v-model) and Vuex
Improving Folder Structures
Modularizing the State Management
Using Separate Files
Using Namespaces to Avoid Naming Problems
Auto-namespacing with Vuex 2.1
Wrap Up
Module Resources & Useful Links

Final Project - The Stock Trader [VUE2]

Project Introduction
Project Setup and Planning
Creating the First Components
Setup Project Routes
Adding a Header and Navigation
Planning the Next Steps
Creating Stocks Components
Adding a "Buy" Button
Setting up the Vuex State Management
Adding a Portfolio Module to Vuex
Working on the Portfolio Stocks
Connecting the Portfolio with Vuex
Time to fix some Errors
Displaying the Funds
Adding some Order Checks
Making Funds Look Nicer with Filters
Ending the Day - Randomizing Stocks
Animating the Route Transitions
Saving & Fetching Data - Adding a Dropdown
Setting up vue-resource and Firebase
Saving Data (PUT Request)
Fetching Data (GET Request)
Testing and Bug Fixes
Project Wrap Up
Bonus: Debugging Vuex with Vue Developer Tools
Module Resources & Useful Links

Deploying a VueJS Application [VUE2]

Module Introduction
Preparing for Deployment
AWS S3 & Bucket Policies
Deploying the App (Example: AWS S3)

Bonus: Using Axios insted of vue-resource [VUE2]

About this Section
Module Introduction
Project Setup
Axios Setup
Sending a POST Request
Sending a GET Request
Accessing & Using Response Data
Setting a Global Request Configuration
Using Interceptors
Custom Axios Instances
Wrap Up
Useful Resources & Links

Bonus: Authentication in Vue Apps

About this Section
Module Introduction
How Authentication Works in SPAs
Project Setup
Adding User Signup
Adding User Sign-in (Login)
Using Vuex to send Auth Requests
Storing Auth Data in Vuex
More about the Token (JWT)
Accessing other Resources from Vuex
Sending the Token to the Backend
Protecting Routes (Auth Guard)
Updating the UI State (based on Authentication State)
Adding User Logout
Adding Auto Logout
Adding Auto Login
Wrap Up
Useful Resources & Links

Popular Searches

Vue - The Complete Guide (incl. Router & Composition API)

Online

₹ 4099

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

certificate providing authority

Who it is for

What you will learn

The syllabus

Getting Started

Basic & Core Concepts - DOM Interaction with Vue

Rendering Conditional Content & Lists

Course Project: The Monster Slayer Game

Vue: Behind the Scenes

Introduction Components

Moving to a Better Development Setup & Workflow with the Vue CLI

Component Communication

Diving Deeper Into Components

Course Project: The Learning Resources App

Forms

Sending Http Requests

Routing: Building "Multi-Page" Single Page Applications

Animations & Transitions

Vuex

main Project: "Find a Coach" Web App

Vue & Authentication

Optimizing & Deploying Vue Apps

The Composition API - Replacing the Options API

Reusing Functionality: Mixins & Custom Composition Functions

Round & Next Steps

Vue 2 to Vue 3 Migration

Getting Started [VUE2]

Using VueJS to Interact with the DOM [VUE2]

Using Conditionals and Rendering Lists [VUE2]

First Course Project - The Monster Slayer [VUE2]

Understanding the VueJS Instance [VUE2]

Moving to a"Real" Development Workflow with Webpack and Vue CLI [VUE2]

An Introduction to components [VUE2]

Communicating between Components [VUE2]

Advance Component Usage [VUE2]

Second Course Project - Wonderful Quotes [VUE2]

Handling User Input with Forms [VUE2]

Usng and Creating Directives [VUE2]

Improving your App with Filters and Mixins [VUE2]

Adding Animations and Transitions [VUE2]

Connecting to Servers via Http - Using vue-resource [VUE2]

Routing in a VueJS Application [VUE2]

Better State Management with Vuex [VUE2}

Final Project - The Stock Trader [VUE2]

Deploying a VueJS Application [VUE2]

Bonus: Using Axios insted of vue-resource [VUE2]

Bonus: Authentication in Vue Apps

More Content

Instructors

Articles

Popular Articles

Latest Articles

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Thank You!

Download the Careers360 App on your Android phone