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

0.00 0 Review(s)

0 Students enrolled

Intermediate

English

Jacklyn Reichel

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

This course includes:

38h 19m
345 Lectures
380 Downloadable assets
Full lifetime access
Access on Mobile and TV
Certificate on completion

At just price of $693.00

Enroll now

Favorite

Overview

What will students learn in your 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

Course content

29 Sections
345 Lectures
38h 19m Total length

Section 1

Getting Started

Time 1h 14m

Lectures 12

See all

Welcome to the Course!

Preview 0:07:30

What is "Vue.js"?

Preview 0:07:30

Different Ways of Using Vue

Preview 0:06:54

Exploring Vue Alternatives

Preview 0:06:12

Building A First App With Just JavaScript

0:03:41

Join our Online Learning Community

0:06:12

Re-building the App with Vue

0:06:12

Vue vs "Vanilla JavaScript" (just JavaScript)

0:03:41

Setting Up the Course Development Environment

0:03:41

Course Outline & What's In The Course

0:09:13

How To Get The Most Out Of This Course

0:06:54

Module Resources

0:06:54

Section 2

Basics & Core Concepts - DOM Interaction with Vue

Time 3h 17m

Lectures 30

See all

Module Introduction

0:07:30

Creating and Connecting Vue App Instances

0:07:30

Interpolation and Data Binding

0:03:41

Binding Attributes with the "v-bind" Directive

0:07:30

Understanding "methods" in Vue Apps

0:06:54

Working with Data inside of a Vue App

0:06:12

Outputting Raw HTML Content with v-html

0:07:30

A First Summary

0:03:41

Time to Practice: Data Binding

0:09:13

Understanding Event Binding

0:03:41

Events & Methods

0:06:12

Working with Event Arguments

0:03:41

Using the Native Event Object

0:06:54

Exploring Event Modifiers

0:07:30

Locking Content with v-once

0:06:12

Time to Practice: Event Binding

0:06:12

Data Binding + Event Binding = Two-Way Binding

0:06:54

Methods used for Data Binding: How It Works

0:09:13

Introducing Computed Properties

0:06:12

Working with Watchers

0:06:12

Methods vs Computed Properties vs Watchers

0:07:30

v-bind and v-on Shorthands

0:09:13

Time to Practice: Reactivity

0:07:30

Dynamic Styling with Inline Styles

0:07:30

Adding CSS Classes Dynamically

0:03:41

Classes & Computed Properties

0:06:54

Dynamic Classes: Array Syntax

0:06:12

Time to Practice: Dynamic Styling

0:09:13

Module Summary

0:07:30

Module Resources

0:03:41

Section 3

Rendering Conditional Content & Lists

Time 1h 23m

Lectures 12

See all

Module Introduction

0:07:30

Understanding the Problem

0:09:13

Rendering Content Conditionally

0:07:30

v-if, v-else and v-else-if

0:06:12

Using v-show Instead Of v-if

0:06:12

Rendering Lists of Data

0:06:12

Diving Deeper Into v-for

0:07:30

Removing List Items

0:06:54

Lists & Keys

0:06:54

Time to Practice: Conditional Content & Lists

0:09:13

Module Summary

0:03:41

Module Resources

0:06:12

Section 4

Course Project: The Monster Slayer Game

Time 1h 05m

Lectures 9

See all

Module Introduction

0:09:13

Project Setup & First Methods

0:06:54

Updating the Health Bars

0:03:41

Adding a "Special Attack"

0:07:30

Adding a "Heal" Functionality

0:06:54

Adding a "Game Over" Screen

0:09:13

Finishing the Core Functionality

0:06:12

Adding a Battle Log

0:09:13

Module Resources

0:06:54

Section 5

Vue: Behind the Scenes

Time 1h 02m

Lectures 10

See all

Module Introduction

0:07:30

An Introduction to Vue's Reactivity

0:09:13

Vue Reactivity: A Deep Dive

0:06:54

One App vs Multiple Apps

0:07:30

Understanding Templates

0:07:30

Working with Refs

0:06:12

How Vue Updates the DOM

0:03:41

Vue App Lifecycle - Theory

0:06:12

Vue App Lifecycle - Practice

0:03:41

Module Resources

0:03:41

Section 6

Introducing Components

Time 38m

Lectures 6

See all

Module Introduction

0:09:13

Understanding the Problem

0:03:41

Introducing Components

0:06:12

The Why: Building Complex User Interfaces With Components

0:06:54

Multiple Vue Apps vs Multiple Components

0:03:41

Module Resources

0:09:13

Section 7

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

Time 1h 34m

Lectures 16

See all

Module Introduction

0:06:12

Why We Need A Development Server

0:03:41

Why We Want A Better Developer Experience

0:09:13

Fixing npm run serve (Vue CLI)

0:06:54

Installing & Using the Vue CLI

0:07:30

Inspecting the Created Project

0:09:13

Inspecting the Vue Code & ".vue" Files

0:06:12

Adding the "Vetur" Extension to VS Code

0:03:41

Component Communication

Time 1h 58m

Lectures 18

See all

Module Introduction

0:09:13

Introducing "Props" (Parent => Child Communication)

0:03:41

Prop Behavior & Changing Props

0:09:13

Validating Props

0:03:41

Supported Prop Values

0:06:54

Working with Dynamic Prop Values

0:07:30

Emitting Custom Events (Child => Parent Communication)

0:03:41

Defining & Validating Custom Events

0:07:30

Prop / Event Fallthrough & Binding All Props

0:06:12

Demo: Adding Components & Connecting Them

0:07:30

Demo: Adding More Component Communication

0:03:41

Time to Practice: Props & Custom Events

0:07:30

A Potential Problem

0:06:12

Provide + Inject To The Rescue

0:07:30

Provide + Inject for Functions / Methods

0:09:13

Provide + Inject vs Props & Custom Events

0:03:41

Module Summary

0:06:54

Module Resources

0:09:13

Section 9

Diving Deeper Into Components

Time 2h 07m

Lectures 18

See all

Module Introduction

0:06:12

Project Setup

0:07:30

Global vs Local Components

0:09:13

Scoped Styles

0:06:54

Introducing Slots

0:06:12

Named Slots

0:09:13

Slot Styles & Compilation

0:07:30

Course Project: The Learning Resources App

Time 1h 40m

Lectures 14

See all

Module Introduction

0:06:54

Setup & First Steps

0:09:13

First Components & Props

0:07:30

Styling and More Components

0:09:13

Header & BaseCard Components

0:03:41

Adding a Base Button

0:06:54

Dynamic Components & Attribute Fallthrough

0:03:41

Adding & Styling Tabs

0:07:30

Adding a Form

0:09:13

Fetching User Input

0:06:12

Adding a Modal Dialog

0:06:54

Deleting Items

0:07:30

Adding "Teleport"

0:06:54

Module Resources

0:09:13

Section 11

Forms

Time 1h 12m

Lectures 10

See all

Module Introduction

0:07:30

v-model & Inputs

0:07:30

Working with v-model Modifiers and Numbers

0:07:30

v-model and Dropdowns

0:07:30

Using v-model with Checkboxes & Radiobuttons

0:03:41

Adding Basic Form Validation

0:09:13

Building a Custom Control Component

0:07:30

Using v-model on Custom Components

0:09:13

Module Summary

0:03:41

Module Resources

0:09:13

Section 12

Sending Http Requests

Time 1h 40m

Lectures 15

See all

Module Introduction

0:09:13

Starting App & Why we need a Backend

0:06:54

Adding a Backend

0:06:54

How To (Not) Send Http Requests

0:06:12

Sending a POST Request to Store Data

0:03:41

Http Requests & Http Methods (Verbs)

0:09:13

Using Axios Instead Of "fetch()"

0:07:30

Getting Data (GET Request) & Transforming Response Data

0:06:12

Loading Data When a Component Mounts

0:06:54

Showing a "Loading..." Message

0:07:30

Handling the "No Data" State

0:09:13

Handling Technical / Browser-side Errors

0:07:30

Handling Error Responses

0:03:41

Module Summary

0:06:12

Module Resources

0:03:41

Section 13

Routing: Building "Multi-Page" Single Page Applications

Time 2h 46m

Lectures 26

See all

Module Introduction

0:06:12

What & Why?

0:07:30

Routing Setup

0:09:13

Registering & Rendering Routes

0:03:41

Navigating with router-link

0:09:13

Styling Active Links

0:06:54

Programmatic Navigation

0:06:54

Passing Data with Route Params (Dynamic Segments)

0:07:30

Navigation & Dynamic Paths

0:03:41

A Vue Bug

0:03:41

Updating Params Data with Watchers

0:09:13

Passing Params as Props

0:09:13

Redirecting & "Catch All" Routes

0:06:12

Using Nested Routes

0:03:41

More Fun with Named Routes & Location Objects

0:07:30

Using Query Params

0:06:12

Rendering Multiple Routes with Named Router Views

0:06:54

Controlling Scroll Behavior

0:03:41

Introducing Navigation Guards

0:06:12

Diving Deeper Into Navigation Guards

0:07:30

The Global "afterEach" Guard

0:03:41

Beyond Entering: Route Leave Guards

0:07:30

Utilizing Route Metadata

0:07:30

Organizing Route Files

0:09:13

Summary

0:03:41

Module Resources

0:03:41

Section 14

Animations & Transitions

Time 2h 14m

Lectures 19

See all

Module Introduction

0:07:30

Animation Basics & CSS Transitions

0:09:13

Understanding CSS Animations

0:09:13

Why Is "Just CSS" Not Enough?

0:03:41

Playing CSS Animations with Vue's Help

0:06:54

Using the Transition Component

0:06:54

CSS Animations with the Transition Component

0:09:13

Using Custom CSS Class Names

0:03:41

Example: Animating a Modal

0:06:54

Transitioning Between Multiple Elements

0:09:13

Using Transition Events

0:07:30

Building JavaScript Transitions (instead of CSS)

0:06:12

Disabling CSS Transitions

0:07:30

Getting Started with Animated Lists

0:07:30

Animating Lists with "transition-group"

0:06:12

Animate List Item Movement

0:06:54

Animating Route Changes

0:06:12

An Important Note on Animated Route Changes

0:06:54

Module Resources

0:06:54

Section 15

Vuex

Time 2h 26m

Lectures 21

See all

Module Introduction

0:06:12

What & Why?

0:09:13

Creating & Using a Store

0:09:13

Connecting Components to State

0:06:12

Introducing Mutations - A Better Way of Changing Data

0:06:12

Passing Data to Mutations with Payloads

0:09:13

Introducing Getters - A Better Way Of Getting Data

0:06:54

Running Async Code with Actions

0:09:13

Understanding the Action "Context"

0:03:41

Using Mapper Helpers

0:07:30

Example: Adding More State

0:07:30

Organizing your Store with Modules

0:03:41

Understanding Local Module State

0:09:13

Namespacing Modules

0:09:13

Structuring Vuex Code & Files

0:03:41

A Challenge!

0:09:13

Challenge Solution (1/3)

0:03:41

Challenge Solution (2/3)

0:06:12

Challenge Solution (3/3)

0:09:13

Summary

0:07:30

Module Resources

0:03:41

Section 16

Main Project: "Find a Coach" Web App

Time 3h 16m

Lectures 29

See all

Module Introduction

0:06:54

Planning the Project / Web App

0:06:12

Planning the Data Requirements

0:03:41

Planning the Layout / Components

0:07:30

Registering Routes

0:07:30

Adding Route Page Components

0:06:54

Working on the Main Layout & Styling

0:07:30

Wiring Up Pages

0:06:12

Adding Vuex and Coach Data

0:07:30

Working on the Coaches List and List Items

0:06:54

Adding a Couple of Base Components (Base Card, Base Button, Base Badge)

0:07:30

Building the Coach Detail Component

0:06:12

Filtering Coaches

0:07:30

Registering as a Coach: The Form

0:06:12

Adding Coaches to Vuex

0:06:12

Adding Form Validation

0:07:30

Working on the Contact Form

0:06:54

Storing Requests (Messages) With Vuex

0:03:41

Outputting Incoming Requests (Messages)

0:06:54

Filtering Requests for the Active Coach

0:07:30

Sending a PUT Http Request to Store Coach Data

0:07:30

Fetching Coach Data (GET Http Request)

0:06:12

Rendering a Loading Spinner

0:03:41

Adding Http Error Handling

0:06:12

Sending Coaching Requests Http Requests

0:09:13

Caching Http Response Data

0:09:13

Adding Route Transitions

0:07:30

The "Not Found" Page & Summary

0:07:30

Module Resources

0:06:12

Section 17

Vue & Authentication

Time 1h 53m

Lectures 16

See all

Module Introduction

0:09:13

How Authentication Works in Vue Apps (or any SPA)

0:06:54

Locking / Protecting Backend Resources

0:06:54

Adding an Authentication Page (Login & Signup)

0:06:54

Preparing Vuex

0:06:12

Adding a "Signup" Action & Flow

0:07:30

Better UX: Loading Spinner & Error Handling

0:03:41

Adding a "Login" Action & Flow

0:06:54

Attaching the Token to Outgoing Requests

0:06:54

Updating the UI Based on Auth State

0:07:30

Adding a "Logout" Action & Flow

0:09:13

Authentication & Routing (incl. Navigation Guards)

0:09:13

Adding "Auto Login"

0:06:12

Adding "Auto Logout"

0:06:54

Summary

0:09:13

Module Resources

0:03:41

Section 18

Optimizing & Deploying Vue Apps

Time 40m

Lectures 7

See all

Module Introduction

0:03:41

What To Deploy?

0:06:54

Optimization: Using Asynchronous Components

0:07:30

Note: Async Components & Routing

0:03:41

Building the Project For Production

0:07:30

Deploying a Vue App

0:03:41

Module Resources

0:07:30

Section 19

The Composition API - Replacing the Options API

Time 3h 03m

Lectures 27

See all

Module Introduction

0:06:12

Which Problem Does The Composition API Solve?

0:06:12

Replacing "data" with "refs"

0:06:12

Replacing the setup() Method

0:06:54

Building "reactive" Objects

0:09:13

Reactivity: A Deep Dive

0:03:41

Replacing "methods" with Regular Functions

0:06:54

Time to Practice: Data & Functions

0:06:12

Replacing "Computed Properties" with the "computed" Function

0:07:30

Two-Way-Binding and the Composition API

0:03:41

Working with Watchers

0:09:13

Time to Practice: Composition API Core Building Blocks

0:06:54

A First Summary

0:06:54

How To Use Template Refs

0:09:13

Components, Props & The Composition API

0:03:41

Emitting Custom Events

0:06:12

Working with Provide/ Inject

0:09:13

Lifecycle Hooks in the Composition API

0:07:30

Migrating from Options API to Composition API - An Example Project

0:09:13

Migrating a First Component

0:07:30

Migrating a Big Component

0:07:30

Migrating the Remaining Components

0:06:12

Routing, Params & The Composition API

0:03:41

The Route & Router Objects and the Composition API

0:06:12

Using Vuex with the Composition API

0:06:12

Summary

0:09:13

Module Resources

0:06:12

Section 20

Reusing Functionality: Mixins & Custom Composition Functions

Time 1h 33m

Lectures 14

See all

Module Introduction

0:06:54

Reusability Concepts

0:06:12

Using Mixins

0:06:54

Understanding Mixin Merging

0:03:41

Global Mixins

0:06:54

Disadvantages of Mixins

0:06:12

Custom Hooks / Composables & The Composition API

0:03:41

More Custom Composition Functions

0:03:41

Why Hooks / Composables Beat Mixins

0:09:13

Example: Creating a "Search" Hook

0:09:13

Custom Hooks Gotchas

0:06:54

More Thoughts on Custom Hooks / Composables

0:07:30

Example: A Custom "Sort" Hook

0:06:54

Module Resources

0:09:13

Section 21

Roundup & Next Steps

Time 13m

Lectures 2

See all

Thanks for being part of the course!

0:06:12

Course Roundup & Next Steps

0:06:54

Section 22

Vue 2 to Vue 3 Migration

Time 26m

Lectures 5

See all

Vue 3 - Overview

0:03:41

Important Changes & Migration Steps

0:09:13

Vue 3: New Features

0:03:41

The New Composition API (Optional!)

0:06:12

Further Migration Resources

0:03:41

Section 23

Learn Vue 2 | Old Course Content

Time 06m

Lectures 1

See all

Section 24

Getting Started [VUE2]

Time 03m

Lectures 1

See all

Section 25

Using VueJS to Interact with the DOM [VUE2]

Time 22m

Lectures 3

See all

Time to Practice - Events

0:06:12

Time to Practice - Reactive Properties

0:09:13

Time to Practice - Styling

0:07:30

Section 26

Using Conditionals and Rendering Lists [VUE2]

Time 03m

Lectures 1

See all

Section 27

An Introduction to Components [VUE2]

Time 03m

Lectures 1

See all

Section 28

Communicating between Components [VUE2]

Time 06m

Lectures 1

See all

Section 29

About tutor

Jacklyn Reichel

0.00 (0 Reviews)

Courses 2

View profile

Biography

Hi All! I've been teaching to a diverse group of students in Seychelles since 2014. People fascinate me, especially how they interact with one another and communicate. On occasion, I also work as a translator and editor.

Ratings & reviews

0.00

0 Reviews

More courses from Jacklyn

SAP FICO (Financial Accounting & Management Accounting)

Certificate of completion

Finance & Accounting / Money Management

SAP FICO (Financial Accounting & Management Accounting)

9h 25m

84 Lectures

0 Learners

$669.00

0.00 (0 Reviews)

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

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

This course includes:

Share this course

Overview

What will students learn in your course?

What are the requirements or prerequisites for taking your course?

Who is the course for?

Description

Course tags

Course content

Getting Started

Basics & Core Concepts - DOM Interaction with Vue

Rendering Conditional Content & Lists

Course Project: The Monster Slayer Game

Vue: Behind the Scenes

Introducing Components

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

Component Communication

Diving Deeper Into Components

Course Project: The Learning Resources App

Forms

Sending Http Requests

Routing: Building "Multi-Page" Single Page Applications

Animations & Transitions

Vuex

Main Project: "Find a Coach" Web App

Vue & Authentication

Optimizing & Deploying Vue Apps

The Composition API - Replacing the Options API

Reusing Functionality: Mixins & Custom Composition Functions

Roundup & Next Steps

Vue 2 to Vue 3 Migration

Learn Vue 2 | Old Course Content

Getting Started [VUE2]

Using VueJS to Interact with the DOM [VUE2]

Using Conditionals and Rendering Lists [VUE2]

An Introduction to Components [VUE2]

Communicating between Components [VUE2]

More Content

About tutor

Jacklyn Reichel

Biography

Ratings & reviews

More courses from Jacklyn

SAP FICO (Financial Accounting & Management Accounting)

$669.00