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.74 (50442 reviews)
Web Development
49 hours
Nov 2021
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) - Screenshot_01Vue - The Complete Guide (w/ Router, Vuex, Composition API) - Screenshot_02Vue - The Complete Guide (w/ Router, Vuex, Composition API) - Screenshot_03Vue - The Complete Guide (w/ Router, Vuex, Composition API) - Screenshot_04
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!
16 November 2021
Very clear explanations of concepts, handy hints on solving programmatic tasks, variety of ways on solving tasks! Great instructor and really rare occasion I write reviews, but here I learn things at its best!
12 November 2021
he would have saved me a lot of time by not doing a bunch of stuff that has nothing to do with vue that most developers know, and NOT have started off with a bad way, then a slightly better way, then a better way and so on. Maybe that's for noobs to go "ooo" but for any developer who isn't a beginner this is truly annoying. Like when it's blatantly obvious he should be using a foreach for example. Also it would have been good if he had a zip file for more steps, so I don't have to skip dumb code and then try to copy what he's done later. And ZOOM OUT! Nobody is studying this from their iphone 4, it's much more confusing to se a fraction of the code at a time! I'm disappointed
11 November 2021
The teacher explains everything very well. I am not a beginner, but if I was, I would have totally wanted a teacher like him.
9 November 2021
Max does a great job explaining things, but it can be verbose at times. In other courses, he's made a "nutshell" version. This would be a good addendum to this course for more advanced learners.
9 November 2021
The content is great, but it is very vaguely explained how to submit assignments. Do I submit the code or do I just submit comments. If the latter is the case, how do I get feedback on my code? When do I get my check on the assignment in order to get my certificate at the end...
7 November 2021
Simple yet detailed explaination of every step. Its fun to learn new stuff with materials designed this way. great work!
5 November 2021
Excellent course: complete and well explained. I would have liked a few more exercises to do alone (in Vue 3).
5 November 2021
I did not know very much about Vue as a course, but after taking this course, I feel confident in working and creating Vue.JS projects. The explanations were clear and the assignments and projects helped in solidifying the knowledge learned. Each lecture is focused on a specific topic and not too long and drawn out which makes learning more enjoyable. Thank you Max and Academind!
1 November 2021
this lecture tell small details that programmer would need later, and the weight is not that heavy to understand as it more progressing later
27 October 2021
The structure of the course is coherent, good examples and well paced. It is evident that a lot of effort and thought has gone into it. Thanks a lot.
24 October 2021
Awesome guide! Every part of this course is essential and more important - discussed! Great work Maximilian!
24 October 2021
Each lecture is well organized and explained with help of code and diffrent scenerios...Thanks for making my life easy.
17 October 2021
This is a course that literally teaches you to go from beginner to expert. If you've never learned Vue.JS, there will be times when you'll run into difficulties along the way. I think it's because of the instructor's intention to explain without omitting details rather than a drawback. One disappointment is that the slides provided are very small. This is very unfortunate because I think it is a very important part to memorize and recall using slides.
7 October 2021
I found it very useful to have these assignments, tests, and challenges during the journey of this course. In my opinion, those parts are very important to have in courses in order to make sure that all of the concepts can be reproduced by the student alone without guidance from the instructor. Thank you a lot for giving me a very nice training experience in this course.
9 August 2021
All the courses by Maximilian Schwarzmüller are Amazing! Quality Content! A Deep Dive into the courses


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


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

Enrollment distribution

Vue - The Complete Guide (w/ Router, Vuex, Composition API) - Distribution chart
9/23/202095% OFF
12/17/202095% OFF
Related Topics
udemy ID
course created date
course indexed date
course submited by
Twitter LogoFacebookInstagram LogoYoutube LogoTelegram LogoEmail