Vue – The Complete Guide (incl. Router & Composition API)
About Course
Learn Vue.js, a popular JavaScript framework, and build amazing web applications. This comprehensive course covers everything from the basics to advanced concepts like the Composition API. You’ll get hands-on experience through real examples, demo projects, and challenging exercises.
This course is completely free and is available on Theetay, a platform offering free access to bestsellers and top-rated courses from platforms like Udemy, Udacity, Coursera, MasterClass, and NearPeer.
This course is perfect for:
* Beginners with some JavaScript experience who want to build modern web applications.
* Developers who are already familiar with Angular or React and want to explore a new framework.
* Backend developers who are new to frontend development.
* Developers who are frustrated with the complexity of other frameworks and want a faster, more intuitive alternative.
Join this course and master Vue.js today!
What Will You Learn?
- 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
Course Content
Getting Started
-
Welcome to the Course!
01:39 -
A Message from the Professor
-
What is Vue.js
07:51 -
Different Ways of Using Vue
02:35 -
Exploring Vue Alternatives
03:11 -
Building A First App With Just JavaScript
07:26 -
Re-building the App with Vue
11:39 -
Vue vs Vanilla JavaScript (just JavaScript)
01:10 -
Setting Up the Course Development Environment
02:04 -
Course Outline & What’s In The Course
02:58 -
How To Get The Most Out Of This Course
03:23
Basics & Core Concepts – DOM Interaction with Vue
-
Module Introduction
00:48 -
Creating and Connecting Vue App Instances
08:40 -
Interpolation and Data Binding
03:35 -
Binding Attributes with the v-bind Directive
05:37 -
Understanding methods in Vue Apps
05:47 -
Working with Data inside of a Vue App
03:23 -
Outputting Raw HTML Content with v-html
03:31 -
A First Summary
04:12 -
Understanding Event Binding
07:17 -
Events & Methods
06:12 -
Working with Event Arguments
02:59 -
Using the Native Event Object
08:59 -
Exploring Event Modifiers
09:54 -
Locking Content with v-once
02:08 -
Data Binding + Event Binding = Two-Way Binding
06:32 -
Methods used for Data Binding How It Works
06:46 -
Introducing Computed Properties
05:58 -
Working with Watchers
10:49 -
Methods vs Computed Properties vs Watchers
02:27 -
v-bind and v-on Shorthands
01:53 -
Dynamic Styling with Inline Styles
07:19 -
Adding CSS Classes Dynamically
06:31 -
Classes & Computed Properties
01:57 -
Dynamic Classes Array Syntax
01:22 -
Module Summary
04:27
Rendering Conditional Content & Lists
-
Module Introduction
01:35 -
Understanding the Problem
03:16 -
Rendering Content Conditionally
05:09 -
v-if
04:18 -
Using v-show Instead Of v-if
02:25 -
Rendering Lists of Data
06:20 -
Diving Deeper Into v-for
05:12 -
Removing List Items
03:59 -
Lists & Keys
08:26 -
Module Summary
02:15
Course Project The Monster Slayer Game
-
Module Introduction
01:18 -
Project Setup & First Methods
12:27 -
Updating the Health Bars
07:07 -
Adding a Special Attack
06:23 -
Adding a Heal Functionality
04:47 -
Adding a Game Over Screen
09:38 -
Finishing the Core Functionality
06:08 -
Adding a Battle Log
14:11
Vue Behind the Scenes
-
Module Introduction
01:31 -
An Introduction to Vue’s Reactivity
04:26 -
Vue Reactivity A Deep Dive
08:10 -
One App vs Multiple Apps
03:53 -
Understanding Templates
03:56 -
Working with Refs
05:22 -
How Vue Updates the DOM
06:26 -
Vue App Lifecycle – Theory
04:46 -
Vue App Lifecycle – Practice
09:48
Introducing Components
-
Module Introduction
01:30 -
Understanding the Problem
08:39 -
Introducing Components
10:54 -
The Why Building Complex User Interfaces With Components
01:00
Moving to a Better Development Setup & Workflow with the Vue CLI
-
Module Introduction
01:35 -
Why We Need A Development Server
03:29 -
Why We Want A Better Developer Experience
05:50 -
Installing & Using the Vue CLI
08:27 -
Inspecting the Created Project
05:59 -
Inspecting the Vue Code & .vue Files
06:04 -
Adding the Vetur Extension to VS Code
01:15 -
More on .vue Files
01:40 -
A New Vue Project
05:05 -
Creating a Basic Vue App
09:32 -
Adding a Component
08:14 -
Adding Styling
02:16
Component Communication
-
Module Introduction
01:41 -
Introducing Props (Parent = Child Communication)
10:03 -
Prop Behavior & Changing Props
06:30 -
Validating Props
07:14 -
Working with Dynamic Prop Values
05:37 -
Emitting Custom Events (Child = Parent Communication)
11:15 -
Defining & Validating Custom Events
04:05 -
Demo Adding Components & Connecting Them
13:15 -
Demo Adding More Component Communication
06:24 -
A Potential Problem
06:26 -
Provide + Inject To The Rescue
08:16 -
Provide + Inject for Functions Methods
03:59 -
Provide + Inject vs Props & Custom Events
02:06 -
Module Summary
04:44
Diving Deeper Into Components
-
Module Introduction
01:38 -
Project Setup
02:38 -
Global vs Local Components
09:22 -
Scoped Styles
05:15 -
Introducing Slots
06:24 -
Named Slots
05:35 -
Slot Styles & Compilation
02:26 -
More on Slots
07:19 -
Scoped Slots
09:34 -
Dynamic Components
07:07 -
Keeping Dynamic Components Alive
02:44 -
Applying What We Know & A Problem
09:24 -
Teleporting Elements
03:50 -
Working with Fragments
01:23 -
The Vue Style Guide
03:02 -
Moving to a Different Folder Structure
02:56 -
Module Summary
03:38
Course Project The Learning Resources App
-
Module Introduction
01:37 -
Setup & First Steps
05:24 -
First Components & Props
10:46 -
Styling and More Components
07:19 -
Header & BaseCard Components
07:00 -
Adding a Base Button
05:19 -
Dynamic Components & Attribute Fallthrough
08:38 -
Adding & Styling Tabs
04:58 -
Adding a Form
04:12 -
Fetching User Input
08:27 -
Adding a Modal Dialog
12:19 -
Deleting Items
06:42 -
Adding Teleport
01:29
Forms
-
Module Introduction
00:33 -
v-model & Inputs
06:03 -
Working with v-model Modifiers and Numbers
06:54 -
v-model and Dropdowns
02:26 -
Using v-model with Checkboxes & Radiobuttons
07:13 -
Adding Basic Form Validation
05:13 -
Building a Custom Control Component
06:27 -
Using v-model on Custom Components
06:48 -
Module Summary
01:14
Sending Http Requests
-
Module Introduction
01:09 -
Starting App & Why we need a Backend
05:04 -
Adding a Backend
03:21 -
How To (Not) Send Http Requests
05:24 -
Sending a POST Request to Store Data
05:45 -
Getting Data (GET Request) & Transforming Response Data
09:51 -
Loading Data When a Component Mounts
02:00 -
Showing a Loading… Message
02:55 -
Handling the No Data State
03:00 -
Handling Technical Browser-side Errors
06:42 -
Handling Error Responses
06:49 -
Module Summary
01:32
Routing Building Multi-Page Single Page Applications
-
Module Introduction
00:41 -
What & Why
04:39 -
Routing Setup
04:36 -
Registering & Rendering Routes
06:25 -
Navigating with router-link
04:55 -
Styling Active Links
03:05 -
Programmatic Navigation
04:01 -
Passing Data with Route Params (Dynamic Segments)
10:46 -
Navigation & Dynamic Paths
03:00 -
Updating Params Data with Watchers
05:31 -
Passing Params as Props
03:37 -
Redirecting & Catch All Routes
07:50 -
Using Nested Routes
05:34 -
More Fun with Named Routes & Location Objects
05:21 -
Using Query Params
03:59 -
Rendering Multiple Routes with Named Router Views
05:52 -
Controlling Scroll Behavior
06:17 -
Introducing Navigation Guards
07:31 -
Diving Deeper Into Navigation Guards
06:50 -
The Global afterEach Guard
01:27 -
Beyond Entering Route Leave Guards
07:13 -
Utilizing Route Metadata
02:14 -
Organizing Route Files
04:49 -
Summary
02:12
Animations & Transitions
-
Module Introduction
01:11 -
Animation Basics & CSS Transitions
07:28 -
Understanding CSS Animations
04:20 -
Why Is Just CSS Not Enough
04:27 -
Playing CSS Animations with Vue’s Help
04:46 -
Using the Transition Component
05:02 -
CSS Animations with the Transition Component
02:28 -
Using Custom CSS Class Names
03:34 -
Example Animating a Modal
08:38 -
Transitioning Between Multiple Elements
09:15 -
Using Transition Events
08:31 -
Building JavaScript Transitions (instead of CSS)
14:57 -
Disabling CSS Transitions
03:05 -
Getting Started with Animated Lists
06:44 -
Animating Lists with transition-group
05:26 -
Animate List Item Movement
03:53 -
Animating Route Changes
12:15
Vuex
-
Module Introduction
00:59 -
What & Why
07:12 -
Creating & Using a Store
04:43 -
Connecting Components to State
02:36 -
Introducing Mutations – A Better Way of Changing Data
06:30 -
Passing Data to Mutations with Payloads
04:07 -
Introducing Getters – A Better Way Of Getting Data
07:41 -
Running Async Code with Actions
07:33 -
Understanding the Action Context
02:02 -
Using Mapper Helpers
05:57 -
Example Adding More State
08:09 -
Organizing your Store with Modules
04:10 -
Understanding Local Module State
04:27 -
Namespacing Modules
05:03 -
Structuring Vuex Code & Files
08:44 -
A Challenge!
01:51 -
Challenge Solution (13)
12:00 -
Challenge Solution (23)
11:27 -
Challenge Solution (33)
03:18 -
Summary
01:19
Main Project Find a Coach Web App
-
Module Introduction
02:35 -
Planning the Project Web App
04:26 -
Planning the Data Requirements
05:11 -
Planning the Layout Components
05:06 -
Registering Routes
05:58 -
Adding Route Page Components
05:27 -
Working on the Main Layout & Styling
07:42 -
Wiring Up Pages
05:22 -
Adding Vuex and Coach Data
12:15 -
Working on the Coaches List and List Items
11:21 -
Adding a Couple of Base Components (Base Card
12:54 -
Building the Coach Detail Component
08:24 -
Filtering Coaches
11:10 -
Registering as a Coach The Form
10:13 -
Adding Coaches to Vuex
13:37 -
Adding Form Validation
12:35 -
Working on the Contact Form
08:09 -
Storing Requests (Messages) With Vuex
08:31 -
Outputting Incoming Requests (Messages)
10:01 -
Filtering Requests for the Active Coach
04:45 -
Sending a PUT Http Request to Store Coach Data
11:05 -
Fetching Coach Data (GET Http Request)
07:51 -
Rendering a Loading Spinner
06:38 -
Adding Http Error Handling
09:18 -
Sending Coaching Requests Http Requests
15:48 -
Caching Http Response Data
08:29 -
Adding Route Transitions
10:20 -
The Not Found Page & Summary
02:19
Vue & Authentication
-
Module Introduction
01:00 -
How Authentication Works in Vue Apps (or any SPA)
06:09 -
Locking Protecting Backend Resources
05:56 -
Adding an Authentication Page (Login & Signup)
00:54 -
Preparing Vuex
04:22 -
Adding a Signup Action & Flow
09:05 -
Better UX Loading Spinner & Error Handling
05:31 -
Adding a Login Action & Flow
03:15 -
Attaching the Token to Outgoing Requests
04:20 -
Updating the UI Based on Auth State
04:04 -
Adding a Logout Action & Flow
03:34 -
Authentication & Routing (incl. Navigation Guards)
11:41 -
Adding Auto Login
08:52 -
Adding Auto Logout
13:34 -
Summary
01:19
Optimizing & Deploying Vue Apps
-
Module Introduction
01:10 -
What To Deploy
02:50 -
Optimization Using Asynchronous Components
12:16 -
Building the Project For Production
03:54 -
Deploying a Vue App
08:55
The Composition API – Replacing the Options API
-
Module Introduction
02:00 -
Which Problem Does The Composition API Solve
06:51 -
Replacing data with refs
11:30 -
Building reactive Objects
10:57 -
Reactivity A Deep Dive
08:23 -
Replacing methods with Regular Functions
07:02 -
Replacing Computed Properties with the computed Function
07:52 -
Two-Way-Binding and the Composition API
02:58 -
Working with Watchers
05:42 -
A First Summary
01:37 -
How To Use Template Refs
04:49 -
Components
07:58 -
Emitting Custom Events
02:33 -
Working with Provide Inject
03:42 -
Lifecycle Hooks in the Composition API
05:14 -
Migrating from Options API to Composition API – An Example Project
01:56 -
Migrating a First Component
06:40 -
Migrating a Big Component
12:38 -
Migrating the Remaining Components
11:56 -
Routing
07:27 -
The Route & Router Objects and the Composition API
05:08 -
Using Vuex with the Composition API
04:33 -
Summary
03:10
Reusing Functionality Mixins & Custom Composition Functions
-
Module Introduction
01:16 -
Reusability Concepts
04:54 -
Using Mixins
04:48 -
Understanding Mixin Merging
03:11 -
Global Mixins
02:52 -
Disadvantages of Mixins
03:28 -
Custom Hooks Composables & The Composition API
08:40 -
More Custom Composition Functions
03:48 -
Why Hooks Composables Beat Mixins
01:27 -
Example Creating a Search Hook
11:29 -
Custom Hooks Gotchas
08:43 -
More Thoughts on Custom Hooks Composables
02:54 -
Example A Custom Sort Hook
05:29
Roundup & Next Steps
-
Course Roundup & Next Steps
03:08
Vue 2 to Vue 3 Migration
-
Vue 3 – Overview
06:30 -
Important Changes & Migration Steps
17:51 -
Vue 3 New Features
05:27 -
The New Composition API (Optional!)
23:45
Earn a certificate
Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.
Student Ratings & Reviews
No Review Yet
