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"

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Vue - The Complete Guide (incl. Router & Composition API) with these activities:

Review Vue.js Documentation

Show steps

Strengthen your understanding of Vue.js by revisiting the official documentation.

Browse courses on Vue.js

Show steps

Identify areas in Vue.js where you need to refresh your knowledge
Read the relevant sections of the Vue.js documentation
Use the documentation examples to practice and reinforce your understanding

Learn Vue.js with the Official Tutorial

Show steps

Follow the official Vue.js tutorial to build a solid foundation in the framework.

Browse courses on Vue.js

Show steps

Follow the step-by-step guide to set up a Vue.js project
Build interactive components using Vue.js instance methods and properties
Explore Vue.js's built-in directives for data binding, conditional rendering, and event handling

Create a Vue.js Resource Collection

Show steps

Organize and expand your Vue.js resources for future reference.

Browse courses on Vue.js

Show steps

Gather and curate a list of helpful Vue.js resources, including tutorials, articles, and videos
Organize the resources into categories or topics
Share the resource collection with other Vue.js learners

Six other activities

Expand to see all activities and additional details

Show all nine activities

Join a Vue.js Study Group

Show steps

Collaborate with peers to deepen your understanding of Vue.js.

Browse courses on Vue.js

Show steps

Find or create a study group with other Vue.js learners
Meet regularly to discuss Vue.js concepts, work on projects, and share knowledge
Provide support and feedback to other group members

Vue.js Reactivity Exercises

Show steps

Practice exercises to reinforce understanding of Vue.js reactivity concepts.

Browse courses on Vue.js

Show steps

Inspect how data changes affect the DOM using Vue.js DevTools
Create computed properties and watch functions to observe and react to data changes
Work with dynamic styling and conditional rendering using v-bind and v-if directives

Vue.js Monster Slayer Game

Show steps

Develop a simple game as a project to practice using Vue.js.

Browse courses on Vue.js

Show steps

Plan the game's mechanics and design
Create the Vue.js project and set up the basic structure
Implement the game logic using Vue.js components and state management
Style the game using CSS or a CSS framework
Test and debug the game

Write a Vue.js Blog Post

Show steps

Consolidate your Vue.js knowledge by writing a blog post.

Browse courses on Vue.js

Show steps

Choose a specific Vue.js topic that you're familiar with
Research and gather information from reliable sources
Write the blog post, explaining the topic clearly and engagingly
Publish your blog post on a suitable platform and share it with others

Attend a Vue.js Workshop

Show steps

Participate in a hands-on workshop to accelerate your Vue.js development skills.

Browse courses on Vue.js

Show steps

Find and register for a Vue.js workshop that aligns with your learning goals
Attend the workshop and actively participate in hands-on exercises and discussions
Connect with other Vue.js developers and learn from their experiences

Contribute to Open-Source Vue.js Projects

Show steps

Enhance your understanding of Vue.js by contributing to the open-source community.

Browse courses on Vue.js

Show steps

Identify and select an open-source Vue.js project that aligns with your interests
Review the project's codebase, documentation, and issue tracker
Contribute bug fixes, feature enhancements, or documentation improvements
Engage with the project maintainers and other contributors

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

Kindle Edition

The Majesty of Vue.js 2

Kindle Edition

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