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

Join this bestselling Vue course to learn how to use the latest version of VueJS to build amazing, modern web apps.

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

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.

What's inside

Learning objectives

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

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

Syllabus

What exactly is Vue.js? Why would you use it? How would it work? How do alternatives like Angular and React compare? You'll get answers to these questions and build your first Vue app!

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

Important: Changed Vue Script Import Path

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

Learn how to interact with the DOM and manipulate web pages with Vue.js. Learn all about data binding, interpolation, event binding, computed properties and more!

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

Learn how to render content when certain conditions are met and explore how Vue helps you output lists of content with directives like v-for and v-if.

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

Apply your newly gained Vue knowledge and build a complete project (a game) from A to Z, using features like data binding, event binding and more!

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

Every good Vue developer needs to have a basic understanding of how Vue works behind the scenes. That's exactly what this module is about. Learn about the Virtual DOM, reactivity and more Vue concepts

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

"Components" are one of the most important Vue concepts - in this section, you'll learn why that is the case and what components are about.

Introducing Components

The Why: Building Complex User Interfaces With Components

Multiple Vue Apps vs Multiple Components

Learn about the limitations of our current project setup and how the Vue CLI helps you overcome those. We'll set up a new, more powerful project and build our first Vue app with it.

Why We Need A Development Server

Why We Want A Better Developer Experience

Fixing npm run serve (Vue CLI)

Installing & Using the Vue CLI

Inspecting the Created Project

Inspecting the Vue Code & ".vue" Files

Adding the "Vetur" Extension to VS Code

Well-received course: vue fundamentals

Learners say this course has clear and engaging instruction. The course provides beginners with the basics of Vue and router including the composition API.

This course is good for learners new to Vue.

This course has clear instruction.

"The instructor is clear"

Career center

Learners who complete Vue - The Complete Guide (incl. Router & Composition API) will develop knowledge and skills that may be useful to these careers:

Project Manager

A Project Manager is a professional who is responsible for the planning, execution, and completion of a project. Project Managers work on a wide range of projects, from small personal applications to large enterprise systems. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help Project Managers create more interactive and engaging user interfaces for their projects.

See salaries and explore the career path for Project Manager

Business Analyst

A Business Analyst is a professional who is responsible for the analysis of business processes and systems. Business Analysts work on a wide range of projects, from small personal applications to large enterprise systems. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help Business Analysts create more interactive and engaging user interfaces for their business applications.

See salaries and explore the career path for Business Analyst

Software Engineer

A Software Engineer is a professional who designs, develops, and maintains software applications. Software Engineers work on a wide range of projects, from small personal applications to large enterprise systems. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help Software Engineers create more interactive and engaging web applications.

See salaries and explore the career path for Software Engineer

Data Analyst

A Data Analyst is a professional who is responsible for the analysis and interpretation of data. Data Analysts work on a wide range of projects, from small personal applications to large enterprise systems. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help Data Analysts create more interactive and engaging user interfaces for their data analysis applications.

See salaries and explore the career path for Data Analyst

Web Developer

A Web Developer is a software engineer who specializes in the development of websites and web applications. Web Developers are responsible for the design, implementation, and maintenance of websites and web applications. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help Web Developers create more interactive and engaging web applications.

See salaries and explore the career path for Web Developer

Full-Stack Developer

A Full Stack Developer is a software engineer who works on both the front-end and back-end of a website or application. Full Stack Developers are responsible for the entire software development process, from design and implementation to testing and deployment. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help Full Stack Developers create more interactive and engaging web applications.

See salaries and explore the career path for Full-Stack Developer

Product Manager

A Product Manager is a professional who is responsible for the development and management of a product. Product Managers work on a wide range of products, from small personal applications to large enterprise systems. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help Product Managers create more interactive and engaging user experiences for their products.

See salaries and explore the career path for Product Manager

Systems Analyst

A Systems Analyst is a professional who is responsible for the analysis and design of computer systems. Systems Analysts work on a wide range of projects, from small personal applications to large enterprise systems. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help Systems Analysts create more interactive and engaging user interfaces for their computer systems.

See salaries and explore the career path for Systems Analyst

Web Designer

A Web Designer is a designer who specializes in the design of websites and web applications. Web Designers work on a wide range of projects, from small personal applications to large enterprise systems. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help Web Designers create more interactive and engaging user interfaces for their websites and web applications.

See salaries and explore the career path for Web Designer

Software Architect

A Software Architect is a software engineer who is responsible for the design and architecture of a software system. Software Architects work on a wide range of projects, from small personal applications to large enterprise systems. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help Software Architects create more interactive and engaging user interfaces for their software systems.

See salaries and explore the career path for Software Architect

Front-End Developer

A Front-End Developer is a software designer who builds the graphical user interface and front-end architecture of a website or application. Front-end code creates the part of a website that users actually see and interact with. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help Front-End Developers create more interactive and engaging web applications.

See salaries and explore the career path for Front-End Developer

Information Architect

An Information Architect is a professional who is responsible for the design and organization of information systems. Information Architects work on a wide range of projects, from small personal applications to large enterprise systems. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help Information Architects create more interactive and engaging user interfaces for their information systems.

See salaries and explore the career path for Information Architect

JavaScript Developer

A JavaScript Developer is a software engineer who specializes in the development of applications using JavaScript. JavaScript Developers work on a wide range of projects, from small personal applications to large enterprise systems. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help JavaScript Developers create more interactive and engaging web applications.

See salaries and explore the career path for JavaScript Developer

UI/UX Designer

A UI/UX Designer is a designer who specializes in the design of user interfaces and user experiences. UI/UX Designers work on a wide range of projects, from small personal applications to large enterprise systems. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help UI/UX Designers create more interactive and engaging user interfaces.

See salaries and explore the career path for UI/UX Designer

Technical Lead

A Technical Lead is a software engineer who is responsible for the technical direction of a project. Technical Leads work on a wide range of projects, from small personal applications to large enterprise systems. This course may be useful for an individual in this role as it provides a comprehensive overview of Vue.js, a popular JavaScript framework for building user interfaces. Learning Vue.js can help Technical Leads create more interactive and engaging web applications.

See salaries and explore the career path for Technical Lead

Reading list

We've selected eight books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Vue - The Complete Guide (incl. Router & Composition API).

Vue.js in Action

Save

Provides a detailed and practical guide to Vue.js 3, covering all aspects of the framework, from basic concepts to advanced techniques. It is particularly useful for developers who want to build complex Vue.js applications or who want to learn more about the inner workings of Vue.js.

Vue.js in Action

Paperback

The Majesty of Vue.js

Save

The book covers the complete Vue.js ecosystem and includes detailed explanations of the Composition API introduced in Vue 3.

The Majesty of Vue.js

Paperback

Check price

The Majesty of Vue.js

Kindle Edition

Check price

VUE.JS 3 COOKBOOK

Save

Provides a concise and practical guide to Vue.js 3, covering a wide range of topics, from basic concepts to advanced techniques. It is particularly useful for developers who want to quickly learn how to use Vue.js or who want to explore more advanced features of the framework.

Vue.js 3 Cookbook: Discover actionable solutions...

Kindle Edition

Vue.js 2 Design Patterns and Best Practices

Save

Provides a collection of design patterns for building Vue.js applications. It is particularly useful for developers who want to learn how to write clean, maintainable, and scalable Vue.js code.

Vue.js 2 Design Patterns and Best Practices: Build...

Kindle Edition

Vue.js 3 Cookbook

Save

Provides a collection of recipes for solving common problems when building Vue.js applications. It is particularly useful for developers who want to learn how to solve specific problems or who want to explore different ways to implement features in Vue.js.

Vue.js 3 Cookbook: Discover actionable solutions...

Kindle Edition