Vue 3 - The Complete Guide (incl. Router, Vuex, Composition API)
Learn Vue.js - in its latest version - step by step from the ground up. Learn how to build highly reactive web apps with one of the most popular frameworks!
Watch Promo Enroll in Course
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 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 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!
30+
hours
300+
lessons
Course Curriculum
-
StartWelcome to the Course! (1:39)
-
StartWhat is "Vue.js"? (7:51)
-
StartDifferent Ways of Using Vue (2:35)
-
StartExploring Vue Alternatives (3:11)
-
StartBuilding A First App With Just JavaScript (7:26)
-
StartRe-building the App with Vue (11:39)
-
StartVue vs "Vanilla JavaScript" (just JavaScript) (1:10)
-
StartSetting Up the Course Development Environment (2:04)
-
StartCourse Outline & What's In The Course (2:58)
-
StartHow To Get The Most Out Of This Course (3:23)
-
StartModule Resources
-
StartThe Academind Pro Referral Program
-
StartModule Introduction (0:48)
-
StartCreating and Connecting Vue App Instances (8:40)
-
StartInterpolation and Data Binding (3:35)
-
StartBinding Attributes with the "v-bind" Directive (5:37)
-
StartUnderstanding "methods" in Vue Apps (5:47)
-
StartWorking with Data inside of a Vue App (3:23)
-
StartOutputting Raw HTML Content with v-html (3:31)
-
StartA First Summary (4:12)
-
StartTime to Practice: Data Binding - Problem (2:55)
-
StartTime to Practice: Data Binding - Solution (11:34)
-
StartUnderstanding Event Binding (7:17)
-
StartEvents & Methods (6:12)
-
StartWorking with Event Arguments (2:59)
-
StartUsing the Native Event Object (8:59)
-
StartExploring Event Modifiers (9:53)
-
StartLocking Content with v-once (2:07)
-
StartTime to Practice: Event Binding - Problem (1:47)
-
StartTime to Practice: Event Binding - Solution (8:54)
-
StartData Binding + Event Binding = Two-Way Binding (6:32)
-
StartMethods used for Data Binding: How It Works (6:46)
-
StartIntroducing Computed Properties (5:58)
-
StartWorking with Watchers (10:49)
-
StartMethods vs Computed Properties vs Watchers (2:27)
-
Startv-bind and v-on Shorthands (1:53)
-
StartTime to Practice: Reactivity - Problem (1:57)
-
StartTime to Practice: Reactivity - Solution (9:00)
-
StartDynamic Styling with Inline Styles (7:19)
-
StartAdding CSS Classes Dynamically (6:31)
-
StartClasses & Computed Properties (1:57)
-
StartDynamic Classes: Array Syntax (1:22)
-
StartTime to Practice: Dynamic Styling - Problem (2:32)
-
StartTime to Practice: Dynamic Styling - Solution (8:24)
-
StartModule Summary (4:14)
-
StartModule Resources
-
StartModule Introduction (1:35)
-
StartUnderstanding the Problem (3:16)
-
StartRendering Content Conditionally (5:09)
-
Startv-if, v-else and v-else-if (4:18)
-
StartUsing v-show Instead Of v-if (2:25)
-
StartRendering Lists of Data (6:20)
-
StartDiving Deeper Into v-for (5:12)
-
StartRemoving List Items (3:59)
-
StartLists & Keys (8:26)
-
StartTime to Practice: Conditional Content & Lists - Problem (1:09)
-
StartTime to Practice: Conditional Content & Lists - Solution (8:48)
-
StartModule Summary (2:15)
-
StartModule Resources
Course Prerequisites
Basic JavaScript and web development knowledge (HTML/ CSS) is required
NO prior VueJS (or any other framework) experience is required
All pre-requisites are covered by courses in our "Academind Pro" Membership.
Don't take my word for it - here's what other students are saying.
Juanjosé Tenorio Peña
The course was fantastic. As a front end developer with two years of experience in React and Angular, it was way easier to understand the concepts which made it perfect for a complete introduction to the framework.
Bilal Haidar
The course is so comprehensive and covers all aspects of vue.js. If you are planning to learn vue.js no need to go anywhere else or look at other courses, you've got everything you need here.
Nicholas Noel-Labieniec
Everything about the course is done in a systematic manner to progressively bring you to a point that you can start developing and creating Vue applications for existing projects or new ones.
30 Day Money Back Guarantee - No Questions Asked!
Our courses helped thousands of students learn something new and improve their lives.
We're so convinced by our course quality that we guarantee your success and provide a full refund within the first 30 days if you're not happy with the course.
Your Instructor
As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 2,500,000 students worldwide as well as a successful YouTube channel with 900.000 subscribers is the best proof for that.
The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content.
That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.
Frequently Asked Questions
Join 9078 happy students!
Single-Course License
Full access to "Vue 3 - The Complete Guide (incl. Router, Vuex, Composition API)
$99
Access to this course only.
This is a one-time payment that grants access to this course only, not to any other courses.
Academind Pro Membership
Unlimited access to this and all other current & future courses!
$25/month
Cancel Anytime!
This is a recurring payment, charged automatically on a monthly basis. You can cancel anytime from inside your user profile to avoid being charged again once your billing cycle ends. For more information, please contact Academind.