Web Development


Vue - The Complete Guide (w/ Router, Vuex, Composition API)

Vue.js is an awesome JavaScript Framework for building Frontend Applications! VueJS mixes the Best of Angular + React!

4.71 (44303 reviews)



49 hours


Dec 2020

Last Update
Regular Price

What you will 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


No matter at which metric you look at (Google Trends, Github Stars, Tweets ...) - VueJS is the shooting star in the world of JavaScript frameworks - it simply is amazing!

This bestselling course teaches the latest version of Vue (Vue.js 3) from the ground up and in great detail. We'll cover all the core basics but we'll not stop thereafter - this course also dives into advanced concepts like the Composition API introduced with Vue 3.

Frontend frameworks like Vue JS are extremely popular because they give us this reactive, great user experience we know from mobile apps - but now in the browser! No wonder that jobs requiring frontend framework skills like VueJS are amongst the best paid ones in the industry!

You may know Angular 2+ and ReactJS, well, VueJS combines the best of both frameworks and makes building anything from small widgets to big, enterprise-level apps a breeze and a whole lot of fun!

And if you don't know the two mentioned frameworks: That's fine, too, this course does not expect any knowledge of any other frontend framework - you will learn it all throughout this Course!

This course covers it all!

We'll start at the very basics, what Vue.js is and how it works before we move on to more complex and advanced topics but I'll be honest: It's too much to fit it all into one sentence, so here's what you'll learn in this Course:

  • What is VueJS and Why would you use it?

  • The Basics (including the basic Syntax, Understanding Templates and much more!)

  • How to Output Reactive Data & Listen to Events

  • Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements ...)

  • Setting up a Development Environment and Workflow

  • Using Components (and what Components are to begin with)

  • A Deep Dive Look Behind the Scenes of Vue

  • Binding to Form Inputs

  • Sending Http Requests to Backend APIs

  • Authentication & Vue

  • How to make your App more Beautiful with Animations and Transitions

  • How to create an awesome Single-Page-Application (SPA) with Routing

  • How to improve State Management by using Vuex

  • How to Deploy the App

  • And much more ...

All these topics are taught with real examples and demo projects. This course is full of exercises, challenges and bigger courser projects that allow you to practice what you learned.

Along with many other smaller projects, we will build a couple of bigger main projects:

  • The "Monster Slayer" Game - a game running in the browser, 100% powered by Vue

  • The "Learning Resource Manager" - a web app that allows you to manage (add, delete, list) your favorite learning resources

  • The "Find a Coach" app - a web app that allows you to sign up / login, register as a coach, list and filter available coaches and send messages to coaches

At the moment, this course includes both my brand-new Vue 3 course as well as my old Vue 2 course (the section marked as "VUE2"). The Vue 2 course will removed later this year.

Is this course for you?

Now that you know what this course is about, let's see if this course is for you!

Here are three types of students who will love this course:

Student #1:

Has some JavaScript experience and is interested in what this language can do. You heard and read that JavaScript allows you to create nice web applications and enhance existing web pages. VueJS is your choice!

Student #2:

You already have some experience with other frontend frameworks like Angular (2+) or ReactJS. But either due to interest or disappointment of the existing frameworks, you seek some alternatives - VueJS might be what you were looking for!

Student #3:

Has experience with backend frameworks/ languages but now also wants to enter the frontend world. VueJS is an awesome choice here, it's fun, it uses native JS and it's extremely powerful!

Bonus: Student #4

Is disappointed by Angular 2+. Does a good framework need 2 hours of setup? No, certainly not - as VueJS will prove to this student!

Let's dive into VueJS right now!


Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)


Getting Started

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

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

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

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

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

Module Wrap Up

Module Resources & Useful Links

Using Conditionals and Rendering Lists

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

Module Wrap Up

Module Resources & Useful Links

First Course Project - The Monster Slayer

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 a "Attack" Method

Write better Code - Time for Refactoring!

Implementing a "Special Attack"

Implementing a "Heal" Method

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

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

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

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 (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

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 (Code)

Wrap Up

Module Resources & Useful Links

Advanced Component Usage

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 (Code)

Wrap Up

Module Resources & Helpful Links

Second Course Project - Wonderful Quotes

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 a Info Box

Allowing for Quote Deletion

Controlling Quotes with a Progress Bar

Finishing Touches and State Management

Module Resources

Handling User Input with Forms

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 (Code)

Wrap Up

Module Resources & Useful Links

Using and Creating Directives

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

Custom Directives - A Summary

Registering Directives Locally

Using Multiple Modifiers

Passing more Complex Values to Directives

Time to Practice - Directives (Code)

Wrap Up

Module Resources & Useful Links

Improving your App with Filters and Mixins

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 and Mixins (Code)

Wrap Up

Module Resources & Useful Links

Adding Animations and Transitions

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

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

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)


Setting Up "Catch All" Routes / Wildcards

Animating Route Transitions

Passing the Hash Fragment

Controlling the Scroll Behavior

Protecting Routes with Guards

Using the "beforeEnter" Guard

Using the "beforeLeave" Guard

Loading Routes Lazily

Wrap Up

Module Resources & Useful Links

Better State Management with Vuex

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

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

Module Introduction

Preparing for Deployment

AWS S3 & Bucket Policies

Deploying the App (Example: AWS S3)

Course Roundup

Course Roundup

All Course Exercises ("Time to Practice")

About this Section (Please Read!)

Time to Practice (1) - Outputting Data to Templates (Problem)

Time to Practice (1) - Outputting Data to Templates (Solution)

Time to Practice (1) - Outputting Data to Templates (Code)

Time to Practice (2) - Events (Problem)

Time to Practice (2) - Events (Solution)

Time to Practice (2) - Events (Code)

Time to Practice (3) - Reactive Properties (Problem)

Time to Practice (3) - Reactive Properties (Solution)

Time to Practice (3) - Reactive Properties (Code)

Time to Practice (4) - Styling (Problem)

Time to Practice (4) - Styling (Solution)

Time to Practice (4) - Styling (Code)

Time to Practice (5) - Conditionals and Lists (Problem)

Time to Practice (5) - Conditionals and Lists (Solution)

Time to Practice (6) - Components (Problem)

Time to Practice (6) - Components (Solution)

Time to Practice (7) - Component Communication (Problem)

Time to Practice (7) - Component Communication (Solution)

Time to Practice (8) - Slots and Dynamic Components (Problem)

Time to Practice (8) - Slots and Dynamic Components (Solution)

Time to Practice (9) - Forms (Problem)

Time to Practice (9) - Forms (Solution)

Time to Practice (10) - Directives (Problem)

Time to Practice (10) - Directives (Solution)

Time to Practice (11) - Filters and Mixins (Problem)

Time to Practice (11) - Filters and Mixins (Solution)

Bonus: Using Axios instead of vue-resource

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 Signin (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

Bonus: Form Input Validation

About this Section

Module Introduction

Add a Firebase Project!

Installing Vuelidate

Adding a Validator

Adding Validation UI Feedback

Controlling Styles for Invalid Entries

More Validators

Validating Passwords For Equality

Using the Required-Unless Validator

Validating Arrays

Controlling the Form Submit Button

Creating Custom Validators

Async Validators

Wrap Up

Useful Resources & Links

Bonus: Vue CLI 3

Vue CLI 3 Summary

Module Introduction

Creating a Project

Analyzing the Created Project

Using Plugins

CSS Pre-Processors

Environment Variables

Building the Project

Instant Prototyping

Different Build Targets

Using the "Old" CLI Templates (vue init)

Using the Graphical User Interface (GUI)

Alternative Lazy Loading Syntax

More Content

Bonus: More Content!


Aldis9 October 2020

Very good course. Realy helpfull and everything is explained step by step. Also I like how he introduces every course module and explains what are use cases and why we learn that. Thanks.

Thomas9 October 2020

Lecturer's explanations are very clear and precise. I also like that all the videos are short and to the point. I recommend this course to everyone who'd like to learn Vue.

Laurent7 October 2020

Je ne peux que recommander ce cours : tant sur le fond que sur la forme. Maximilian est très compréhensible et son cours est très complet : au niveau théorique c'est parfait, mais les occasions de mettre les connaissances en pratique ne manquent pas.

Gregg7 October 2020

Really appreciated the update and especially redoing the whole course. Went way up and over my expectations.

Yuval3 October 2020

So far i've finished 6 sections and I must say that this course is amazing and so far have exceeded my expectations! before starting the udemy course, i've checked other course online, some of them are referenced in the Vue official websites. they were good course, but in comparison, this one is really really awesome and so far i feel like i'm making the most of it. I hope my impression of this course won't change when I finish it completely... (:

Navid25 February 2020

Comprehensive and very well-structured course! well done Max! Just, if you provide a GitHub with all completed assignments and section codes, and maybe a summary (cheat sheet), it would be much better and easier to review such huge concepts and lectures. It takes time to organize this bunch of codes and assignments in one place! This course has so many points to review, and definitely, reviewing the videos are so frustrating and time-consuming! Again, Thank you!

Stephen24 February 2020

Very good match. Max explains things comprehensively where many instructors let the student fill in where there are doubts. I really like the short modules also.

Arnold24 February 2020

Ich hatte mir gar nicht all zu viel erwartet - aber super gemacht, verständlich, gute Beispiele - echt klasse!

Osama21 February 2020

Yes, it was an excellent course with a lot of information about vue js including basics and advanced topics with a simplified and sequential explanation for lessons. Thanks. :)

Salvo8321 February 2020

Sono arrivato alla lezione 25. Devo dire che il corso è davvero completo. L'insegnante approfindisce i dettegli di VueJs. I sottotitoli, assolutamente migliorabili, consentono di comprendere il corso in maniera adeguata.

Huy19 February 2020

It's a good course but there are still many things to improve. Some sections use some features that will be soon deprecated like vue-resource or name slot. Btw, the course is still good enough for anyone who just start learning Vue.

Matt17 February 2020

Max is great! His style really works well for me. I took the TypeScript course and am very much looking forward to Max's delivery of the Vue content.

Mehdi17 February 2020

Good Tutorial but very bad example description and dirty codes. I wanted to change something about my opinion actually section 1 to 8 war not so Good about Example but another Section war really clear and excellent but

David17 February 2020

Superb course, everything was well explained for someone pretty new to front end development. I had taken another VueJS course before, but it was not really newbie friendly, lots copy paste and unexplained stuff, which made me feel intimidated to VueJS, now it actually feels like I will be able to learn it properly

Jamey13 February 2020

Max is clear and gives good examples as always. I like that he covers the topics completely without making it feel too slow.


Expired9/23/202095% OFF
Expired12/17/202095% OFF


Udemy ID


Course created date


Course Indexed date
Course Submitted by

Android PlayStore
Apple Appstore