W3docs
ru
Войти

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!

Start 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!

Course content

Section 1Getting Started

  • Welcome to the Course!
    1:39
  • What is "Vue.js"?
    7:51
  • Different Ways of Using Vue
    2:35
  • Exploring Vue Alternatives
    3:11
  • Building A First App With Just JavaScript
    7:26
  • Re-building the App with Vue
    10:51
  • Vue vs "Vanilla JavaScript" (just JavaScript)
    1:10
  • Setting Up the Course Development Environment
    2:04
  • Course Outline & What's In The Course
    2:58
  • How To Get The Most Out Of This Course
    3:23
  • Module ResourcesPremium
    1:00

Section 2Basics & Core Concepts - DOM Interaction with Vue

  • Module IntroductionPremium
    0:48
  • Creating and Connecting Vue App InstancesPremium
    8:40
  • Interpolation and Data BindingPremium
    3:35
  • Binding Attributes with the "v-bind" DirectivePremium
    5:37
  • Understanding "methods" in Vue AppsPremium
    5:47
  • Working with Data inside of a Vue AppPremium
    3:23
  • Outputting Raw HTML Content with v-htmlPremium
    3:31
  • A First SummaryPremium
    4:12
  • Time to Practice: Data Binding - ProblemPremium
    2:55
  • Time to Practice: Data Binding - SolutionPremium
    11:34
  • Understanding Event BindingPremium
    7:17
  • Events & MethodsPremium
    6:12
  • Working with Event ArgumentsPremium
    2:59
  • Using the Native Event ObjectPremium
    8:59
  • Exploring Event ModifiersPremium
    9:53
  • Locking Content with v-oncePremium
    2:07
  • Time to Practice: Event Binding - ProblemPremium
    1:47
  • Time to Practice: Event Binding - SolutionPremium
    8:54
  • Data Binding + Event Binding = Two-Way BindingPremium
    6:32
  • Methods used for Data Binding: How It WorksPremium
    6:46
  • Introducing Computed PropertiesPremium
    5:58
  • Working with WatchersPremium
    10:49
  • Methods vs Computed Properties vs WatchersPremium
    2:27
  • v-bind and v-on ShorthandsPremium
    1:53
  • Time to Practice: Reactivity - ProblemPremium
    1:57
  • Time to Practice: Reactivity - SolutionPremium
    9:00
  • Dynamic Styling with Inline StylesPremium
    7:19
  • Adding CSS Classes DynamicallyPremium
    6:31
  • Classes & Computed PropertiesPremium
    1:57
  • Dynamic Classes: Array SyntaxPremium
    1:22
  • Time to Practice: Dynamic Styling - ProblemPremium
    2:32
  • Time to Practice: Dynamic Styling - SolutionPremium
    8:24
  • Module SummaryPremium
    4:14
  • Module ResourcesPremium
    1:00

Section 3Rendering Conditional Content & Lists

  • Module IntroductionPremium
    1:35
  • Understanding the ProblemPremium
    3:16
  • Rendering Content ConditionallyPremium
    5:09
  • v-if, v-else and v-else-ifPremium
    4:18
  • Using v-show Instead Of v-ifPremium
    2:25
  • Rendering Lists of DataPremium
    6:20
  • Diving Deeper Into v-forPremium
    5:12
  • Removing List ItemsPremium
    3:59
  • Lists & KeysPremium
    8:26
  • Time to Practice: Conditional Content & Lists - ProblemPremium
    1:09
  • Time to Practice: Conditional Content & Lists - SolutionPremium
    8:48
  • Module SummaryPremium
    2:15
  • Module ResourcesPremium
    1:00

Section 4Course Project: The Monster Slayer Game

  • Module IntroductionPremium
    1:18
  • Project Setup & First MethodsPremium
    12:27
  • Updating the Health BarsPremium
    7:07
  • Adding a "Special Attack"Premium
    6:23
  • Adding a "Heal" FunctionalityPremium
    4:46
  • Adding a "Game Over" ScreenPremium
    9:37
  • Finishing the Core FunctionalityPremium
    6:08
  • Adding a Battle LogPremium
    14:11
  • Module ResourcesPremium
    1:00

Section 5Vue: Behind the Scenes

  • Module IntroductionPremium
    1:31
  • An Introduction to Vue's ReactivityPremium
    4:26
  • Vue Reactivity: A Deep DivePremium
    8:10
  • One App vs Multiple AppsPremium
    3:53
  • Understanding TemplatesPremium
    3:56
  • Working with RefsPremium
    5:21
  • How Vue Updates the DOMPremium
    6:26
  • Vue App Lifecycle - TheoryPremium
    4:46
  • Vue App Lifecycle - PracticePremium
    9:48
  • Module ResourcesPremium
    1:00

Section 6Introducing Components

  • Module IntroductionPremium
    1:30
  • Understanding the ProblemPremium
    8:39
  • Introducing ComponentsPremium
    10:54
  • The Why: Building Complex User Interfaces With ComponentsPremium
    1:00
  • Multiple Vue Apps vs Multiple ComponentsPremium
    1:00
  • Module ResourcesPremium
    1:00

Section 7Moving to a Better Development Setup & Workflow with the Vue CLI

  • Module IntroductionPremium
    1:35
  • Why We Need A Development ServerPremium
    3:29
  • Why We Want A Better Developer ExperiencePremium
    5:50
  • Installing & Using the Vue CLIPremium
    8:26
  • Inspecting the Created ProjectPremium
    5:58
  • Inspecting the Vue Code & ".vue" FilesPremium
    6:04
  • Adding the "Vetur" Extension to VS CodePremium
    1:15
  • More on ".vue" FilesPremium
    1:40
  • A New Vue ProjectPremium
    5:05
  • Creating a Basic Vue AppPremium
    9:32
  • Adding a ComponentPremium
    8:14
  • Adding StylingPremium
    2:16
  • A Small AdditionPremium
    1:00
  • Module ResourcesPremium
    1:00

Section 8Component Communication

  • Module IntroductionPremium
    1:41
  • Introducing "Props" (Parent => Child Communication)Premium
    10:03
  • Prop Behavior & Changing PropsPremium
    6:30
  • Validating PropsPremium
    7:14
  • Supported Prop ValuesPremium
    1:00
  • Working with Dynamic Prop ValuesPremium
    5:37
  • Emitting Custom Events (Child => Parent Communication)Premium
    11:15
  • Defining & Validating Custom EventsPremium
    4:05
  • Prop / Event Fallthrough & Binding All PropsPremium
    1:00
  • Demo: Adding Components & Connecting ThemPremium
    13:15
  • Demo: Adding More Component CommunicationPremium
    6:24
  • Time to Practice: Props & Custom Events - ProblemPremium
    3:13
  • Time to Practice: Props & Custom Events - SolutionPremium
    21:38
  • A Potential ProblemPremium
    6:26
  • Provide + Inject To The RescuePremium
    8:16
  • Provide + Inject for Functions / MethodsPremium
    3:59
  • Provide + Inject for Functions / MethodsPremium
    2:06
  • Module SummaryPremium
    4:44
  • Module ResourcesPremium
    1:00

Section 9Diving Deeper Into Components

  • Module IntroductionPremium
    1:38
  • Project SetupPremium
    2:38
  • Global vs Local ComponentsPremium
    9:21
  • Scoped StylesPremium
    5:15
  • Introducing SlotsPremium
    6:23
  • Named SlotsPremium
    5:35
  • Slot Styles & CompilationPremium
    2:26
  • More on SlotsPremium
    7:19
  • Scoped SlotsPremium
    9:34
  • Dynamic ComponentsPremium
    7:06
  • Keeping Dynamic Components AlivePremium
    2:44
  • Applying What We Know & A ProblemPremium
    9:24
  • Teleporting ElementsPremium
    3:50
  • Working with FragmentsPremium
    1:23
  • The Vue Style GuidePremium
    3:02
  • Moving to a Different Folder StructurePremium
    2:56
  • Module SummaryPremium
    3:38
  • Module ResourcesPremium
    1:00

Section 10Course Project: The Learning Resources App

  • Module IntroductionPremium
    1:37
  • Setup & First StepsPremium
    5:24
  • First Components & PropsPremium
    10:46
  • Styling and More ComponentsPremium
    7:19
  • Header & BaseCard ComponentsPremium
    7:00
  • Adding a Base ButtonPremium
    5:19
  • Dynamic Components & Attribute FallthroughPremium
    8:37
  • Adding & Styling TabsPremium
    4:58
  • Adding a FormPremium
    4:12
  • Fetching User InputPremium
    8:27
  • Adding a Modal DialogPremium
    12:19
  • Deleting ItemsPremium
    6:42
  • Adding "Teleport"Premium
    1:28
  • Module ResourcesPremium
    1:00

Section 11Forms

  • Module IntroductionPremium
    0:33
  • v-model & InputsPremium
    6:03
  • Working with v-model Modifiers and NumbersPremium
    6:54
  • v-model and DropdownsPremium
    2:25
  • Using v-model with Checkboxes & RadiobuttonsPremium
    7:13
  • Adding Basic Form ValidationPremium
    5:13
  • Building a Custom Control ComponentPremium
    6:27
  • Using v-model on Custom ComponentsPremium
    6:48
  • Module SummaryPremium
    1:14
  • Module ResourcesPremium
    1:00

Section 12Sending Http Requests

  • Module IntroductionPremium
    1:08
  • Starting App & Why we need a BackendPremium
    5:04
  • Adding a BackendPremium
    3:21
  • How To (Not) Send Http RequestsPremium
    5:23
  • Sending a POST Request to Store DataPremium
    5:45
  • Http Requests & Http Methods (Verbs)Premium
    1:00
  • Getting Data (GET Request) & Transforming Response DataPremium
    9:51
  • Loading Data When a Component MountsPremium
    2:00
  • Showing a "Loading..." MessagePremium
    2:55
  • Handling the "No Data" StatePremium
    3:00
  • Handling Technical / Browser-side ErrorsPremium
    6:41
  • Handling Error ResponsesPremium
    6:49
  • Module SummaryPremium
    1:31
  • Module ResourcesPremium
    1:00

Section 13Routing: Building "Multi-Page" Single Page Applications

  • Module IntroductionPremium
    0:41
  • What & Why?Premium
    4:39
  • Routing SetupPremium
    4:36
  • Registering & Rendering RoutesPremium
    6:25
  • Navigating with router-linkPremium
    4:55
  • Styling Active LinksPremium
    3:05
  • Programmatic NavigationPremium
    4:01
  • Passing Data with Route Params (Dynamic Segments)Premium
    10:46
  • Navigation & Dynamic PathsPremium
    3:00
  • Updating Params Data with WatchersPremium
    5:30
  • Passing Params as PropsPremium
    3:37
  • Redirecting & "Catch All" RoutesPremium
    7:50
  • Using Nested RoutesPremium
    5:34
  • More Fun with Named Routes & Location ObjectsPremium
    5:21
  • Using Query ParamsPremium
    3:59
  • Rendering Multiple Routes with Named Router ViewsPremium
    5:51
  • Controlling Scroll BehaviorPremium
    6:17
  • Introducing Navigation GuardsPremium
    7:31
  • Diving Deeper Into Navigation GuardsPremium
    6:50
  • The Global "afterEach" GuardPremium
    1:27
  • Beyond Entering: Route Leave GuardsPremium
    7:13
  • Utilizing Route MetadataPremium
    2:14
  • Organizing Route FilesPremium
    4:49
  • SummaryPremium
    2:12
  • Module ResourcesPremium
    1:00

Section 14Animations & Transitions

  • Module IntroductionPremium
    1:11
  • Animation Basics & CSS TransitionsPremium
    7:28
  • Understanding CSS AnimationsPremium
    4:20
  • Why Is "Just CSS" Not Enough?Premium
    4:27
  • Playing CSS Animations with Vue's HelpPremium
    4:45
  • Using the Transition ComponentPremium
    5:02
  • CSS Animations with the Transition ComponentPremium
    2:28
  • Using Custom CSS Class NamesPremium
    3:34
  • Example: Animating a ModalPremium
    8:38
  • Transitioning Between Multiple ElementsPremium
    9:15
  • Using Transition EventsPremium
    8:31
  • Building JavaScript Transitions (instead of CSS)Premium
    14:57
  • Disabling CSS TransitionsPremium
    3:05
  • Getting Started with Animated ListsPremium
    6:44
  • Animating Lists with "transition-group"Premium
    5:26
  • Animate List Item MovementPremium
    3:53
  • Animating Route ChangesPremium
    12:15
  • An Important Note on Animated Route ChangesPremium
    1:00
  • Module ResourcesPremium
    1:00

Section 15Vuex

  • Module IntroductionPremium
    0:59
  • What & Why?Premium
    7:11
  • Creating & Using a StorePremium
    4:43
  • Connecting Components to StatePremium
    2:36
  • Introducing Mutations - A Better Way of Changing DataPremium
    6:30
  • Passing Data to Mutations with PayloadsPremium
    4:07
  • Introducing Getters - A Better Way Of Getting DataPremium
    7:40
  • Running Async Code with ActionsPremium
    7:33
  • Understanding the Action "Context"Premium
    2:02
  • Using Mapper HelpersPremium
    5:57
  • Example: Adding More StatePremium
    8:09
  • Organizing your Store with ModulesPremium
    4:10
  • Understanding Local Module StatePremium
    4:27
  • Namespacing ModulesPremium
    5:03
  • Structuring Vuex Code & FilesPremium
    8:43
  • A Challenge!Premium
    1:51
  • Challenge Solution (1/3)Premium
    12:00
  • Challenge Solution (2/3)Premium
    4:57
  • Challenge Solution (3/3)Premium
    3:18
  • SummaryPremium
    1:19
  • Module ResourcesPremium
    1:00

Section 16Main Project: "Find a Coach" Web App

  • Module IntroductionPremium
    2:35
  • Planning the Project / Web AppPremium
    4:26
  • Planning the Data RequirementsPremium
    5:11
  • Planning the Layout / ComponentsPremium
    5:06
  • Registering RoutesPremium
    5:58
  • Adding Route Page ComponentsPremium
    5:27
  • Working on the Main Layout & StylingPremium
    7:42
  • Wiring Up PagesPremium
    5:22
  • Adding Vuex and Coach DataPremium
    12:15
  • Working on the Coaches List and List ItemsPremium
    11:21
  • Adding a Couple of Base Components (Base Card, Base Button, Base Badge)Premium
    12:53
  • Building the Coach Detail ComponentPremium
    8:24
  • Filtering CoachesPremium
    11:10
  • Registering as a Coach: The FormPremium
    10:13
  • Adding Coaches to VuexPremium
    13:36
  • Adding Form ValidationPremium
    12:35
  • Working on the Contact FormPremium
    8:08
  • Storing Requests (Messages) With VuexPremium
    8:31
  • Outputting Incoming Requests (Messages)Premium
    10:01
  • Filtering Requests for the Active CoachPremium
    4:44
  • Sending a PUT Http Request to Store Coach DataPremium
    11:05
  • Fetching Coach Data (GET Http Request)Premium
    7:51
  • Rendering a Loading SpinnerPremium
    6:38
  • Adding Http Error HandlingPremium
    9:17
  • Sending Coaching Requests Http RequestsPremium
    15:48
  • Caching Http Response DataPremium
    8:28
  • Adding Route TransitionsPremium
    10:19
  • The "Not Found" Page & SummaryPremium
    2:19
  • Module ResourcesPremium
    1:00

Section 17Vue & Authentication

  • Module IntroductionPremium
    1:00
  • How Authentication Works in Vue Apps (or any SPA)Premium
    6:09
  • Locking / Protecting Backend ResourcesPremium
    5:56
  • Adding an Authentication Page (Login & Signup)Premium
    9:54
  • Preparing VuexPremium
    4:22
  • Adding a "Signup" Action & FlowPremium
    9:05
  • Better UX: Loading Spinner & Error HandlingPremium
    5:30
  • Adding a "Login" Action & FlowPremium
    3:15
  • Attaching the Token to Outgoing RequestsPremium
    4:19
  • Updating the UI Based on Auth StatePremium
    4:04
  • Adding a "Logout" Action & FlowPremium
    3:34
  • Authentication & Routing (incl. Navigation Guards)Premium
    11:41
  • Adding "Auto Login"Premium
    8:52
  • Adding "Auto Logout"Premium
    13:34
  • SummaryPremium
    1:19
  • Module ResourcesPremium
    1:00

Section 18Optimizing & Deploying Vue Apps

  • Module IntroductionPremium
    1:10
  • What To Deploy?Premium
    2:50
  • Optimization: Using Asynchronous ComponentsPremium
    12:16
  • Building the Project For ProductionPremium
    3:54
  • Deploying a Vue AppPremium
    8:55
  • Module ResourcesPremium
    1:00

Section 19The Composition API - Replacing the Options API

  • Module IntroductionPremium
    2:00
  • Which Problem Does The Composition API Solve?Premium
    6:51
  • Replacing "data" with "refs"Premium
    11:29
  • Building "reactive" ObjectsPremium
    10:57
  • Reactivity: A Deep DivePremium
    8:23
  • Replacing "methods" with Regular FunctionsPremium
    7:01
  • Time to Practice: Data & Functions - ProblemPremium
    2:39
  • Time to Practice: Data & Functions - SolutionPremium
    14:24
  • Replacing "Computed Properties" with the "computed" FunctionPremium
    7:52
  • Two-Way-Binding and the Composition APIPremium
    2:58
  • Working with WatchersPremium
    5:42
  • Time to Practice: Composition API Core Building Blocks - ProblemPremium
    1:07
  • Time to Practice: Composition API Core Building Blocks - SolutionPremium
    7:00
  • A First SummaryPremium
    1:37
  • How To Use Template RefsPremium
    4:49
  • Components, Props & The Composition APIPremium
    7:57
  • Emitting Custom EventsPremium
    2:33
  • Working with Provide/ InjectPremium
    3:42
  • Lifecycle Hooks in the Composition APIPremium
    5:13
  • Migrating from Options API to Composition API - An Example ProjectPremium
    1:55
  • Migrating a First ComponentPremium
    6:40
  • Migrating a Big ComponentPremium
    12:38
  • Migrating the Remaining ComponentsPremium
    11:56
  • Routing, Params & The Composition APIPremium
    7:27
  • The Route & Router Objects and the Composition APIPremium
    5:08
  • Using Vuex with the Composition APIPremium
    4:33
  • SummaryPremium
    3:09
  • Module ResourcesPremium
    1:00

Section 20Reusing Functionality: Mixins & Custom Composition Functions

  • Module IntroductionPremium
    1:16
  • Reusability ConceptsPremium
    4:54
  • Using MixinsPremium
    4:48
  • Understanding Mixin MergingPremium
    3:11
  • Global MixinsPremium
    2:52
  • Disadvantages of MixinsPremium
    3:28
  • Custom Hooks / Composables & The Composition APIPremium
    8:40
  • More Custom Composition FunctionsPremium
    3:48
  • Why Hooks / Composables Beat MixinsPremium
    1:26
  • Example: Creating a "Search" HookPremium
    11:28
  • Custom Hooks GotchasPremium
    8:43
  • More Thoughts on Custom Hooks / ComposablesPremium
    2:54
  • Example: A Custom "Sort" HookPremium
    5:29
  • Module ResourcesPremium
    1:00

Section 21Roundup & Next Steps

  • Course Roundup & Next StepsPremium
    3:08

Section 22Vue 2 to Vue 3 Migration

  • Vue 3 - OverviewPremium
    6:30
  • Important Changes & Migration StepsPremium
    17:51
  • Vue 3: New FeaturesPremium
    5:27
  • The New Composition API (Optional!)Premium
    23:45

Course instructor

Photo of Maximilian Schwarzmüller

Maximilian Schwarzmüller

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 1,000,000 students worldwide as well as a successful YouTube channel 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.