JavaScript learners
You’ve written some JavaScript and want to turn it into real web applications instead of isolated scripts. This course gives you a structured way to start building reactive apps that run in the browser.
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!
Course Overview
About This Course
You can write JavaScript, but building a modern UI still feels like juggling templates, events, and state until everything gets messy. You want that smooth, reactive app experience in the browser—without turning every change into a refactor.
In this course, you’ll get a clear, step-by-step path into Vue 3 that doesn’t just show you what to type—it explains why it works. You’ll move from the essentials to the patterns that make bigger apps stay maintainable, using real examples, exercises, and challenges to lock things in.
By the end, you’ll be able to plan, build, and ship Vue applications that scale from small widgets to larger, enterprise-style projects. You’ll know how to structure your UI, connect it to backend APIs, handle login flows, and confidently take an app from development setup to deployment.
What You'll Learn
You’ll cover Vue 3’s core building blocks and then connect them into real-world app architecture—components, routing, Vuex state, API communication, and the Composition API.
Build reactive UIs
Create interfaces that update automatically when data changes, and wire up user interactions by listening to events. You’ll be able to keep UI and data in sync without manual DOM manipulation.
Control rendering logic
Render lists, show and hide elements conditionally, and structure templates so they stay readable as features grow. You’ll be able to build dynamic screens that respond to both data and user actions.
Component-driven architecture
Split your UI into reusable components and understand what happens behind the scenes when Vue updates the page. You’ll be able to design apps that stay maintainable instead of becoming one giant file.
Forms and HTTP APIs
Bind form inputs to your data model and send HTTP requests to backend APIs. You’ll be able to load, create, and update data from a server and reflect results in the UI.
SPA routing flows
Build a Single-Page Application with routing so users can navigate between views without full page reloads. You’ll be able to design multi-page-like experiences inside one Vue app.
State, auth, deployment
Manage shared state with Vuex, implement authentication flows in Vue, and deploy your finished application. You’ll be able to take an app from local development to a live, usable product.
Ready to get started?
See enrollment optionsPrerequisites
Basic JavaScript knowledge is required.
Basic HTML and CSS knowledge is assumed.
ES6 knowledge is helpful but not required.
Who Is This Course For?
Framework switchers
You’ve used Angular (2+) or React and you’re looking for an alternative that feels more straightforward to start with. You’ll get a Vue-focused workflow that helps you build quickly without heavy setup.
Backend developers
You’re comfortable on the server side but want to step into frontend development without learning a completely different language. Vue’s native JavaScript approach makes it a practical next move for building modern UIs.
Curriculum Overview
Start NowPreview the structure and pacing of this course before you begin.
Getting Started43m
- 01Welcome to the Course!1:39 min
- 02What is "Vue.js"?7:51 min
- 03Different Ways of Using Vue2:35 min
- 04Exploring Vue Alternatives3:11 min
- 05Building A First App With Just JavaScript7:26 min
- 06Re-building the App with Vue11:39 min
- 07Vue vs "Vanilla JavaScript" (just JavaScript)1:10 min
- 08Setting Up the Course Development Environment2:04 min
- 09Course Outline & What's In The Course2:58 min
- 10How To Get The Most Out Of This Course3:23 min
- 11Module Resources0:00 min
- 12The Academind Pro Referral Program0:00 min
Basics & Core Concepts - DOM Interaction with Vue2h 55m
- 01Module Introduction0:48 min
- 02Creating and Connecting Vue App Instances8:40 min
- 03Interpolation and Data Binding3:35 min
- 04Binding Attributes with the "v-bind" Directive5:37 min
- 05Understanding "methods" in Vue Apps5:47 min
- 06Working with Data inside of a Vue App3:23 min
- 07Outputting Raw HTML Content with v-html3:31 min
- 08A First Summary4:12 min
- 09Time to Practice: Data Binding - Problem2:55 min
- 10Time to Practice: Data Binding - Solution11:34 min
- 11Understanding Event Binding7:17 min
- 12Events & Methods6:12 min
- 13Working with Event Arguments2:59 min
- 14Using the Native Event Object8:59 min
- 15Exploring Event Modifiers9:53 min
- 16Locking Content with v-once2:07 min
- 17Time to Practice: Event Binding - Problem1:47 min
- 18Time to Practice: Event Binding - Solution8:54 min
- 19Data Binding + Event Binding = Two-Way Binding6:32 min
- 20Methods used for Data Binding: How It Works6:46 min
- 21Introducing Computed Properties5:58 min
- 22Working with Watchers10:49 min
- 23Methods vs Computed Properties vs Watchers2:27 min
- 24v-bind and v-on Shorthands1:53 min
- 25Time to Practice: Reactivity - Problem1:57 min
- 26Time to Practice: Reactivity - Solution9:00 min
- 27Dynamic Styling with Inline Styles7:19 min
- 28Adding CSS Classes Dynamically6:31 min
- 29Classes & Computed Properties1:57 min
- 30Dynamic Classes: Array Syntax1:22 min
- 31Time to Practice: Dynamic Styling - Problem2:32 min
- 32Time to Practice: Dynamic Styling - Solution8:24 min
- 33Module Summary4:14 min
- 34Module Resources0:00 min
Rendering Conditional Content & Lists52m
- 01Module Introduction1:35 min
- 02Understanding the Problem3:16 min
- 03Rendering Content Conditionally5:09 min
- 04v-if, v-else and v-else-if4:18 min
- 05Using v-show Instead Of v-if2:25 min
- 06Rendering Lists of Data6:20 min
- 07Diving Deeper Into v-for5:12 min
- 08Removing List Items3:59 min
- 09Lists & Keys8:26 min
- 10Time to Practice: Conditional Content & Lists - Problem1:09 min
- 11Time to Practice: Conditional Content & Lists - Solution8:48 min
- 12Module Summary2:15 min
- 13Module Resources0:00 min
Course Project: The Monster Slayer Game1h 1m
- 01Module Introduction1:18 min
- 02Project Setup & First Methods12:27 min
- 03Updating the Health Bars7:07 min
- 04Adding a "Special Attack"6:23 min
- 05Adding a "Heal" Functionality4:46 min
- 06Adding a "Game Over" Screen9:37 min
- 07Finishing the Core Functionality6:08 min
- 08Adding a Battle Log14:11 min
- 09Module Resources0:00 min
Vue: Behind the Scenes48m
- 01Module Introduction1:31 min
- 02An Introduction to Vue's Reactivity4:26 min
- 03Vue Reactivity: A Deep Dive8:10 min
- 04One App vs Multiple Apps3:53 min
- 05Understanding Templates3:56 min
- 06Working with Refs5:21 min
- 07How Vue Updates the DOM6:26 min
- 08Vue App Lifecycle - Theory4:46 min
- 09Vue App Lifecycle - Practice9:48 min
- 10Module Resources0:00 min
Introducing Components22m
- 01Module Introduction1:30 min
- 02Understanding the Problem8:39 min
- 03Introducing Components10:54 min
- 04The Why: Building Complex User Interfaces With Components1:00 min
- 05Multiple Vue Apps vs Multiple Components0:00 min
- 06Module Resources0:00 min
Moving to a Better Development Setup & Workflow with the Vue CLI59m
- 01Module Introduction1:35 min
- 02Why We Need A Development Server3:29 min
- 03Why We Want A Better Developer Experience5:50 min
- 04Installing & Using the Vue CLI8:26 min
- 05Inspecting the Created Project5:58 min
- 06Inspecting the Vue Code & ".vue" Files6:04 min
- 07Adding the "Vetur" Extension to VS Code1:15 min
- 08More on ".vue" Files1:40 min
- 09A New Vue Project5:05 min
- 10Creating a Basic Vue App9:32 min
- 11Adding a Component8:14 min
- 12Adding Styling2:16 min
- 13A Small Addition0:00 min
- 14Module Resources0:00 min
Component Communication1h 56m
- 01Module Introduction1:41 min
- 02Introducing "Props" (Parent => Child Communication)10:03 min
- 03Prop Behavior & Changing Props6:30 min
- 04Validating Props7:14 min
- 05Supported Prop Values0:00 min
- 06Working with Dynamic Prop Values5:37 min
- 07Emitting Custom Events (Child => Parent Communication)11:15 min
- 08Defining & Validating Custom Events4:05 min
- 09Prop / Event Fallthrough & Binding All Props0:00 min
- 10Demo: Adding Components & Connecting Them13:15 min
- 11Demo: Adding More Component Communication6:24 min
- 12Time to Practice: Props & Custom Events - Problem3:13 min
- 13Time to Practice: Props & Custom Events - Solution21:38 min
- 14A Potential Problem6:26 min
- 15Provide + Inject To The Rescue8:16 min
- 16Provide + Inject for Functions / Methods3:59 min
- 17Provide + Inject for Functions / Methods2:06 min
- 18Module Summary4:44 min
- 19Module Resources0:00 min
And 14 more sections in the full course.
Ready to Get Started?
Choose the option that works best for you.
Single Course
Vue 3 - The Complete Guide (incl. Router, Vuex, Composition API)
One Payment. Lifetime Access.
$99one-time
- One-time payment
- All future updates for this course
- Downloadable resources & code
- Certificate of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Lifetime access
Most Popular
All-Access Membership
Everything we teach. One subscription.
$25/mo
$4,729+ worth of courses
- Full access to all courses
- All future courses included
- Downloadable resources & code
- Certificates of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Cancel anytime