Home
ENG - US Dollar (USD)
Site Language
English
Site Currency
US Dollar (USD)
Search Login Register
Vue - The Complete Guide (incl. Router & Composition API)
  • Home
  • Courses
  • Vue - The Complete Guide (incl. Router & Composition API)
Software Development / Web Development

Vue - The Complete Guide (incl. Router & Composition API)

Vue.js is an awesome JavaScript Framework for building Frontend Applications

REVIEW

5.00 (1 Rating)

ENROLLMENT

0 Students

LEVEL

Beginner 

LANGUAGE

English

TEACHER

Naomi Sipes
Naomi Sipes
Originally From: Vanuatu
Originally From: Vanuatu
Vanuatu
Location: Vanuatu
Vue - The Complete Guide (incl. Router & Composition API)
This Course Includes:
  • 29h 32m
  • 345 Lectures
  • 380 Downloadable Assets
  • Full Lifetime Access
  • Access on Mobile and TV
  • Certificate on Completion
Price of Just:

$693

Enroll Now
Add to Favorite List

Overview

What will learners learn in this course?
  • 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
What are the requirements or prerequisites for taking your course?
Who is the course for?
Description
Course Tags
Development Web Development Vue JS

Course Content

  • 29 Sections
  • 345 Lectures
  • 29h 32m Total Length
Getting Started
45m
12 Lectures

Getting Started

Welcome to the Course!
Preview 0:01:39
What is "Vue.js"?
Preview 0:07:51
Different Ways of Using Vue
Preview 0:02:35
Exploring Vue Alternatives
Preview 0:03:11
Building A First App With Just JavaScript
0:07:26
Join our Online Learning Community
0:01:00
Re-building the App with Vue
0:11:39
Vue vs "Vanilla JavaScript" (just JavaScript)
0:01:10
Setting Up the Course Development Environment
0:02:04
Course Outline & What's In The Course
0:02:58
How To Get The Most Out Of This Course
0:03:23
Module Resources
0:01:00
Module Introduction
0:01:00
Creating and Connecting Vue App Instances
0:08:40
Interpolation and Data Binding
0:03:35
Binding Attributes with the "v-bind" Directive
0:05:37
Understanding "methods" in Vue Apps
0:05:47
Working with Data inside of a Vue App
0:03:23
Outputting Raw HTML Content with v-html
0:03:31
A First Summary
0:04:12
Time to Practice: Data Binding
0:01:00
Understanding Event Binding
0:07:17
Events & Methods
0:06:12
Working with Event Arguments
0:02:59
Using the Native Event Object
0:08:59
Exploring Event Modifiers
0:09:53
Locking Content with v-once
0:02:08
Time to Practice: Event Binding
0:01:00
Data Binding + Event Binding = Two-Way Binding
0:06:32
Methods used for Data Binding: How It Works
0:06:46
Introducing Computed Properties
0:05:58
Working with Watchers
0:10:49
Methods vs Computed Properties vs Watchers
0:02:27
v-bind and v-on Shorthands
0:01:53
Time to Practice: Reactivity
0:01:00
Dynamic Styling with Inline Styles
0:07:19
Adding CSS Classes Dynamically
0:06:31
Classes & Computed Properties
0:01:57
Dynamic Classes: Array Syntax
0:01:22
Time to Practice: Dynamic Styling
0:01:00
Module Summary
0:04:27
Module Resources
0:01:00
Module Introduction
0:01:35
Understanding the Problem
0:03:16
Rendering Content Conditionally
0:05:09
v-if, v-else and v-else-if
0:04:18
Using v-show Instead Of v-if
0:02:25
Rendering Lists of Data
0:06:20
Diving Deeper Into v-for
0:05:12
Removing List Items
0:03:59
Lists & Keys
0:08:26
Time to Practice: Conditional Content & Lists
0:01:00
Module Summary
0:02:15
Module Resources
0:01:00
Module Introduction
0:01:18
Project Setup & First Methods
0:12:27
Updating the Health Bars
0:07:07
Adding a "Special Attack"
0:06:23
Adding a "Heal" Functionality
0:04:46
Adding a "Game Over" Screen
0:09:37
Finishing the Core Functionality
0:06:08
Adding a Battle Log
0:14:11
Module Resources
0:01:00
Module Introduction
0:01:31
An Introduction to Vue's Reactivity
0:04:26
Vue Reactivity: A Deep Dive
0:08:10
One App vs Multiple Apps
0:03:53
Understanding Templates
0:03:56
Working with Refs
0:05:21
How Vue Updates the DOM
0:06:26
Vue App Lifecycle - Theory
0:04:46
Vue App Lifecycle - Practice
0:09:48
Module Resources
0:01:00
Module Introduction
0:01:30
Understanding the Problem
0:08:39
Introducing Components
0:10:54
The Why: Building Complex User Interfaces With Components
0:01:00
Multiple Vue Apps vs Multiple Components
0:01:00
Module Resources
0:01:00
Module Introduction
0:01:35
Why We Need A Development Server
0:03:29
Why We Want A Better Developer Experience
0:05:50
Fixing npm run serve (Vue CLI)
0:01:00
Installing & Using the Vue CLI
0:08:26
Inspecting the Created Project
0:05:59
Inspecting the Vue Code & ".vue" Files
0:06:04
Adding the "Vetur" Extension to VS Code
0:01:15
More on ".vue" Files
0:01:40
A New Vue Project
0:05:05
Creating a Basic Vue App
0:09:32
Adding a Component
0:08:14
Adding Styling
0:02:16
A Small Addition
0:01:00
An Alternative Setup - using "npm init" & Volar
0:01:00
Module Resources
0:01:00
Module Introduction
0:01:41
Introducing "Props" (Parent => Child Communication)
0:10:03
Prop Behavior & Changing Props
0:06:30
Validating Props
0:07:14
Supported Prop Values
0:01:00
Working with Dynamic Prop Values
0:05:37
Emitting Custom Events (Child => Parent Communication)
0:11:15
Defining & Validating Custom Events
0:04:05
Prop / Event Fallthrough & Binding All Props
0:01:19
Demo: Adding Components & Connecting Them
0:13:15
Demo: Adding More Component Communication
0:06:24
Time to Practice: Props & Custom Events
0:01:00
A Potential Problem
0:06:26
Provide + Inject To The Rescue
0:08:16
Provide + Inject for Functions / Methods
0:03:59
Provide + Inject vs Props & Custom Events
0:02:06
Module Summary
0:04:44
Module Resources
0:01:00
Module Introduction
0:01:38
Project Setup
0:02:38
Global vs Local Components
0:09:22
Scoped Styles
0:05:15
Introducing Slots
0:06:23
Named Slots
0:05:35
Slot Styles & Compilation
0:02:26
More on Slots
0:07:19
Scoped Slots
0:09:34
Dynamic Components
0:07:06
Keeping Dynamic Components Alive
0:02:44
Applying What We Know & A Problem
0:09:24
Teleporting Elements
0:03:50
Working with Fragments
0:01:23
The Vue Style Guide
0:03:02
Moving to a Different Folder Structure
0:02:56
Module Summary
0:03:38
Module Resources
0:01:00
Module Introduction
0:01:37
Setup & First Steps
0:05:24
First Components & Props
0:10:46
Styling and More Components
0:07:19
Header & BaseCard Components
0:07:00
Adding a Base Button
0:05:19
Dynamic Components & Attribute Fallthrough
0:08:37
Adding & Styling Tabs
0:04:58
Adding a Form
0:04:12
Fetching User Input
0:08:27
Adding a Modal Dialog
0:12:19
Deleting Items
0:06:42
Adding "Teleport"
0:01:28
Module Resources
0:01:00
Module Introduction
0:01:00
v-model & Inputs
0:06:03
Working with v-model Modifiers and Numbers
0:06:54
v-model and Dropdowns
0:02:25
Using v-model with Checkboxes & Radiobuttons
0:07:13
Adding Basic Form Validation
0:05:13
Building a Custom Control Component
0:06:27
Using v-model on Custom Components
0:06:48
Module Summary
0:01:14
Module Resources
0:01:00
Module Introduction
0:01:09
Starting App & Why we need a Backend
0:05:04
Adding a Backend
0:03:21
How To (Not) Send Http Requests
0:05:23
Sending a POST Request to Store Data
0:05:45
Http Requests & Http Methods (Verbs)
0:01:00
Using Axios Instead Of "fetch()"
0:01:00
Getting Data (GET Request) & Transforming Response Data
0:09:51
Loading Data When a Component Mounts
0:02:00
Showing a "Loading..." Message
0:02:55
Handling the "No Data" State
0:03:00
Handling Technical / Browser-side Errors
0:06:41
Handling Error Responses
0:06:49
Module Summary
0:01:32
Module Resources
0:01:00
Module Introduction
0:01:00
What & Why?
0:04:39
Routing Setup
0:04:36
Registering & Rendering Routes
0:06:25
Navigating with router-link
0:04:55
Styling Active Links
0:03:05
Programmatic Navigation
0:04:01
Passing Data with Route Params (Dynamic Segments)
0:10:46
Navigation & Dynamic Paths
0:03:00
A Vue Bug
0:01:00
Updating Params Data with Watchers
0:05:30
Passing Params as Props
0:03:37
Redirecting & "Catch All" Routes
0:07:50
Using Nested Routes
0:05:34
More Fun with Named Routes & Location Objects
0:05:21
Using Query Params
0:03:59
Rendering Multiple Routes with Named Router Views
0:05:51
Controlling Scroll Behavior
0:06:17
Introducing Navigation Guards
0:07:31
Diving Deeper Into Navigation Guards
0:06:50
The Global "afterEach" Guard
0:01:27
Beyond Entering: Route Leave Guards
0:07:13
Utilizing Route Metadata
0:02:14
Organizing Route Files
0:04:49
Summary
0:02:12
Module Resources
0:01:00
Module Introduction
0:01:11
Animation Basics & CSS Transitions
0:07:28
Understanding CSS Animations
0:04:20
Why Is "Just CSS" Not Enough?
0:04:27
Playing CSS Animations with Vue's Help
0:04:45
Using the Transition Component
0:05:02
CSS Animations with the Transition Component
0:02:28
Using Custom CSS Class Names
0:03:34
Example: Animating a Modal
0:08:38
Transitioning Between Multiple Elements
0:09:15
Using Transition Events
0:08:31
Building JavaScript Transitions (instead of CSS)
0:14:57
Disabling CSS Transitions
0:03:05
Getting Started with Animated Lists
0:06:44
Animating Lists with "transition-group"
0:05:26
Animate List Item Movement
0:03:53
Animating Route Changes
0:12:15
An Important Note on Animated Route Changes
0:01:00
Module Resources
0:01:00
Module Introduction
0:01:00
What & Why?
0:07:11
Creating & Using a Store
0:04:43
Connecting Components to State
0:02:36
Introducing Mutations - A Better Way of Changing Data
0:06:30
Passing Data to Mutations with Payloads
0:04:07
Introducing Getters - A Better Way Of Getting Data
0:07:40
Running Async Code with Actions
0:07:33
Understanding the Action "Context"
0:02:02
Using Mapper Helpers
0:05:57
Example: Adding More State
0:08:09
Organizing your Store with Modules
0:04:10
Understanding Local Module State
0:04:27
Namespacing Modules
0:05:03
Structuring Vuex Code & Files
0:08:44
A Challenge!
0:01:51
Challenge Solution (1/3)
0:12:00
Challenge Solution (2/3)
0:11:27
Challenge Solution (3/3)
0:03:18
Summary
0:01:19
Module Resources
0:01:00
Module Introduction
0:02:35
Planning the Project / Web App
0:04:26
Planning the Data Requirements
0:05:11
Planning the Layout / Components
0:05:06
Registering Routes
0:05:58
Adding Route Page Components
0:05:27
Working on the Main Layout & Styling
0:07:42
Wiring Up Pages
0:05:22
Adding Vuex and Coach Data
0:12:15
Working on the Coaches List and List Items
0:11:21
Adding a Couple of Base Components (Base Card, Base Button, Base Badge)
0:12:54
Building the Coach Detail Component
0:08:24
Filtering Coaches
0:11:10
Registering as a Coach: The Form
0:10:13
Adding Coaches to Vuex
0:13:37
Adding Form Validation
0:12:35
Working on the Contact Form
0:08:09
Storing Requests (Messages) With Vuex
0:08:31
Outputting Incoming Requests (Messages)
0:10:01
Filtering Requests for the Active Coach
0:04:44
Sending a PUT Http Request to Store Coach Data
0:11:05
Fetching Coach Data (GET Http Request)
0:07:51
Rendering a Loading Spinner
0:06:38
Adding Http Error Handling
0:09:17
Sending Coaching Requests Http Requests
0:15:48
Caching Http Response Data
0:08:28
Adding Route Transitions
0:10:19
The "Not Found" Page & Summary
0:02:19
Module Resources
0:01:00
Module Introduction
0:01:00
How Authentication Works in Vue Apps (or any SPA)
0:06:09
Locking / Protecting Backend Resources
0:05:56
Adding an Authentication Page (Login & Signup)
0:09:54
Preparing Vuex
0:04:22
Adding a "Signup" Action & Flow
0:09:05
Better UX: Loading Spinner & Error Handling
0:05:30
Adding a "Login" Action & Flow
0:03:15
Attaching the Token to Outgoing Requests
0:04:19
Updating the UI Based on Auth State
0:04:04
Adding a "Logout" Action & Flow
0:03:34
Authentication & Routing (incl. Navigation Guards)
0:11:41
Adding "Auto Login"
0:08:52
Adding "Auto Logout"
0:13:34
Summary
0:01:19
Module Resources
0:01:00
Module Introduction
0:01:10
What To Deploy?
0:02:50
Optimization: Using Asynchronous Components
0:12:16
Note: Async Components & Routing
0:01:00
Building the Project For Production
0:03:54
Deploying a Vue App
0:08:55
Module Resources
0:01:00
Module Introduction
0:02:00
Which Problem Does The Composition API Solve?
0:06:51
Replacing "data" with "refs"
0:11:30
Replacing the setup() Method
0:01:00
Building "reactive" Objects
0:10:57
Reactivity: A Deep Dive
0:08:23
Replacing "methods" with Regular Functions
0:07:01
Time to Practice: Data & Functions
0:01:00
Replacing "Computed Properties" with the "computed" Function
0:07:52
Two-Way-Binding and the Composition API
0:02:58
Working with Watchers
0:05:42
Time to Practice: Composition API Core Building Blocks
0:01:00
A First Summary
0:01:37
How To Use Template Refs
0:04:49
Components, Props & The Composition API
0:07:57
Emitting Custom Events
0:02:33
Working with Provide/ Inject
0:03:42
Lifecycle Hooks in the Composition API
0:05:14
Migrating from Options API to Composition API - An Example Project
0:01:56
Migrating a First Component
0:06:40
Migrating a Big Component
0:12:38
Migrating the Remaining Components
0:11:56
Routing, Params & The Composition API
0:07:27
The Route & Router Objects and the Composition API
0:05:08
Using Vuex with the Composition API
0:04:33
Summary
0:03:10
Module Resources
0:01:00
Module Introduction
0:01:16
Reusability Concepts
0:04:54
Using Mixins
0:04:48
Understanding Mixin Merging
0:03:11
Global Mixins
0:02:52
Disadvantages of Mixins
0:03:28
Custom Hooks / Composables & The Composition API
0:08:40
More Custom Composition Functions
0:03:48
Why Hooks / Composables Beat Mixins
0:01:26
Example: Creating a "Search" Hook
0:11:29
Custom Hooks Gotchas
0:08:43
More Thoughts on Custom Hooks / Composables
0:02:54
Example: A Custom "Sort" Hook
0:05:29
Module Resources
0:01:00
Thanks for being part of the course!
0:01:00
Course Roundup & Next Steps
0:03:08
Vue 3 - Overview
0:06:30
Important Changes & Migration Steps
0:17:51
Vue 3: New Features
0:05:27
The New Composition API (Optional!)
0:23:45
Further Migration Resources
0:01:00
Vue 2 Course Content
0:01:00
Time to Practice - Outputting Data to Templates
0:01:00
Time to Practice - Events
0:01:00
Time to Practice - Reactive Properties
0:01:00
Time to Practice - Styling
0:01:00
Time to Practice - Conditionals & Lists
0:01:00
Time to Practice - Components
0:01:00
Time to Practice - Component Communication
0:01:00
Bonus: More Content!
0:01:00

About Teacher

Naomi Sipes

Naomi Sipes
Originally From: Vanuatu
Originally From: Vanuatu
Vanuatu
Location: Vanuatu

4.20 (10 Reviews)
1 Course
View Profile
Biography

Hello All! I'm Naomi Sipes and I began my work as a banker, but my strong desire to teach languages led me to change careers. I've taught multiple languages like Chinese, Swedish. I have a Cambridge University Certificate in Language Teaching. A language school, in my mind, is an enriching interaction of individuals that builds mutual love and acceptance of differences in society.

Course Ratings & Reviews

5.00
1 Review
5
(1)
4
3
2
1