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

Naomi Sipes

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

This Course Includes:

37h 11m
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
37h 11m Total Length

Section 1

Getting Started

Time 1h 22m

Lectures 12

See All

Welcome to the Course!

Preview 0:03:41

What is "Vue.js"?

Preview 0:03:41

Different Ways of Using Vue

Preview 0:03:41

Exploring Vue Alternatives

Preview 0:03:41

Building A First App With Just JavaScript

0:09:13

Join our Online Learning Community

0:07:30

Re-building the App with Vue

0:09:13

Vue vs "Vanilla JavaScript" (just JavaScript)

0:09:13

Setting Up the Course Development Environment

0:09:13

Course Outline & What's In The Course

0:07:30

How To Get The Most Out Of This Course

0:06:12

Module Resources

0:09:13

Section 2

Basics & Core Concepts - DOM Interaction with Vue

Time 3h 24m

Lectures 30

See All

Module Introduction

0:06:54

Creating and Connecting Vue App Instances

0:07:30

Interpolation and Data Binding

0:03:41

Binding Attributes with the "v-bind" Directive

0:06:12

Understanding "methods" in Vue Apps

0:03:41

Working with Data inside of a Vue App

0:06:12

Outputting Raw HTML Content with v-html

0:06:54

A First Summary

0:09:13

Time to Practice: Data Binding

0:06:54

Understanding Event Binding

0:06:12

Events & Methods

0:06:12

Working with Event Arguments

0:07:30

Using the Native Event Object

0:09:13

Exploring Event Modifiers

0:03:41

Locking Content with v-once

0:06:54

Time to Practice: Event Binding

0:07:30

Data Binding + Event Binding = Two-Way Binding

0:09:13

Methods used for Data Binding: How It Works

0:09:13

Introducing Computed Properties

0:06:12

Working with Watchers

0:03:41

Methods vs Computed Properties vs Watchers

0:07:30

v-bind and v-on Shorthands

0:07:30

Time to Practice: Reactivity

0:07:30

Dynamic Styling with Inline Styles

0:06:12

Adding CSS Classes Dynamically

0:09:13

Classes & Computed Properties

0:07:30

Dynamic Classes: Array Syntax

0:06:54

Time to Practice: Dynamic Styling

0:03:41

Module Summary

0:09:13

Module Resources

0:06:54

Section 3

Rendering Conditional Content & Lists

Time 1h 23m

Lectures 12

See All

Module Introduction

0:06:12

Understanding the Problem

0:06:54

Rendering Content Conditionally

0:03:41

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

0:06:54

Using v-show Instead Of v-if

0:09:13

Rendering Lists of Data

0:09:13

Diving Deeper Into v-for

0:07:30

Removing List Items

0:06:12

Lists & Keys

0:07:30

Time to Practice: Conditional Content & Lists

0:03:41

Module Summary

0:07:30

Module Resources

0:09:13

Section 4

Course Project: The Monster Slayer Game

Time 58m

Lectures 9

See All

Module Introduction

0:07:30

Project Setup & First Methods

0:06:54

Updating the Health Bars

0:09:13

Adding a "Special Attack"

0:09:13

Adding a "Heal" Functionality

0:06:54

Adding a "Game Over" Screen

0:03:41

Finishing the Core Functionality

0:03:41

Adding a Battle Log

0:07:30

Module Resources

0:03:41

Section 5

Vue: Behind the Scenes

Time 1h 04m

Lectures 10

See All

Module Introduction

0:03:41

An Introduction to Vue's Reactivity

0:09:13

Vue Reactivity: A Deep Dive

0:06:54

One App vs Multiple Apps

0:03:41

Understanding Templates

0:07:30

Working with Refs

0:09:13

How Vue Updates the DOM

0:06:54

Vue App Lifecycle - Theory

0:03:41

Vue App Lifecycle - Practice

0:06:54

Module Resources

0:06:54

Section 6

Introducing Components

Time 36m

Lectures 6

See All

Module Introduction

0:07:30

Understanding the Problem

0:09:13

Introducing Components

0:06:12

The Why: Building Complex User Interfaces With Components

0:03:41

Multiple Vue Apps vs Multiple Components

0:06:12

Module Resources

0:03:41

Section 7

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

Time 1h 28m

Lectures 16

See All

Module Introduction

0:06:12

Why We Need A Development Server

0:06:12

Why We Want A Better Developer Experience

0:07:30

Fixing npm run serve (Vue CLI)

0:06:12

Installing & Using the Vue CLI

0:07:30

Inspecting the Created Project

0:06:12

Inspecting the Vue Code & ".vue" Files

0:06:12

Adding the "Vetur" Extension to VS Code

0:03:41

Component Communication

Time 2h 06m

Lectures 18

See All

Module Introduction

0:06:54

Introducing "Props" (Parent => Child Communication)

0:07:30

Prop Behavior & Changing Props

0:07:30

Validating Props

0:06:12

Supported Prop Values

0:07:30

Working with Dynamic Prop Values

0:06:54

Emitting Custom Events (Child => Parent Communication)

0:06:54

Defining & Validating Custom Events

0:09:13

Prop / Event Fallthrough & Binding All Props

0:03:41

Demo: Adding Components & Connecting Them

0:06:54

Demo: Adding More Component Communication

0:06:54

Time to Practice: Props & Custom Events

0:06:54

A Potential Problem

0:07:30

Provide + Inject To The Rescue

0:03:41

Provide + Inject for Functions / Methods

0:09:13

Provide + Inject vs Props & Custom Events

0:06:12

Module Summary

0:07:30

Module Resources

0:09:13

Section 9

Diving Deeper Into Components

Time 1h 45m

Lectures 18

See All

Module Introduction

0:09:13

Project Setup

0:09:13

Global vs Local Components

0:03:41

Scoped Styles

0:09:13

Introducing Slots

0:03:41

Named Slots

0:06:12

Slot Styles & Compilation

0:03:41

Course Project: The Learning Resources App

Time 1h 28m

Lectures 14

See All

Module Introduction

0:09:13

Setup & First Steps

0:07:30

First Components & Props

0:06:12

Styling and More Components

0:06:54

Header & BaseCard Components

0:07:30

Adding a Base Button

0:09:13

Dynamic Components & Attribute Fallthrough

0:03:41

Adding & Styling Tabs

0:06:12

Adding a Form

0:03:41

Fetching User Input

0:03:41

Adding a Modal Dialog

0:06:54

Deleting Items

0:03:41

Adding "Teleport"

0:07:30

Module Resources

0:06:54

Section 11

Forms

Time 1h 04m

Lectures 10

See All

Module Introduction

0:07:30

v-model & Inputs

0:09:13

Working with v-model Modifiers and Numbers

0:03:41

v-model and Dropdowns

0:07:30

Using v-model with Checkboxes & Radiobuttons

0:06:12

Adding Basic Form Validation

0:07:30

Building a Custom Control Component

0:06:12

Using v-model on Custom Components

0:06:12

Module Summary

0:03:41

Module Resources

0:06:54

Section 12

Sending Http Requests

Time 1h 36m

Lectures 15

See All

Module Introduction

0:06:54

Starting App & Why we need a Backend

0:03:41

Adding a Backend

0:07:30

How To (Not) Send Http Requests

0:03:41

Sending a POST Request to Store Data

0:03:41

Http Requests & Http Methods (Verbs)

0:06:54

Using Axios Instead Of "fetch()"

0:07:30

Getting Data (GET Request) & Transforming Response Data

0:09:13

Loading Data When a Component Mounts

0:07:30

Showing a "Loading..." Message

0:07:30

Handling the "No Data" State

0:06:12

Handling Technical / Browser-side Errors

0:09:13

Handling Error Responses

0:06:12

Module Summary

0:03:41

Module Resources

0:06:54

Section 13

Routing: Building "Multi-Page" Single Page Applications

Time 2h 30m

Lectures 26

See All

Module Introduction

0:07:30

What & Why?

0:09:13

Routing Setup

0:06:12

Registering & Rendering Routes

0:03:41

Navigating with router-link

0:03:41

Styling Active Links

0:03:41

Programmatic Navigation

0:09:13

Passing Data with Route Params (Dynamic Segments)

0:06:12

Navigation & Dynamic Paths

0:06:12

A Vue Bug

0:03:41

Updating Params Data with Watchers

0:03:41

Passing Params as Props

0:07:30

Redirecting & "Catch All" Routes

0:03:41

Using Nested Routes

0:06:54

More Fun with Named Routes & Location Objects

0:03:41

Using Query Params

0:03:41

Rendering Multiple Routes with Named Router Views

0:03:41

Controlling Scroll Behavior

0:07:30

Introducing Navigation Guards

0:06:12

Diving Deeper Into Navigation Guards

0:07:30

The Global "afterEach" Guard

0:07:30

Beyond Entering: Route Leave Guards

0:06:54

Utilizing Route Metadata

0:06:12

Organizing Route Files

0:06:54

Summary

0:06:12

Module Resources

0:03:41

Section 14

Animations & Transitions

Time 2h 16m

Lectures 19

See All

Module Introduction

0:07:30

Animation Basics & CSS Transitions

0:09:13

Understanding CSS Animations

0:06:12

Why Is "Just CSS" Not Enough?

0:09:13

Playing CSS Animations with Vue's Help

0:06:12

Using the Transition Component

0:07:30

CSS Animations with the Transition Component

0:06:54

Using Custom CSS Class Names

0:06:54

Example: Animating a Modal

0:03:41

Transitioning Between Multiple Elements

0:09:13

Using Transition Events

0:06:12

Building JavaScript Transitions (instead of CSS)

0:07:30

Disabling CSS Transitions

0:06:12

Getting Started with Animated Lists

0:06:54

Animating Lists with "transition-group"

0:06:12

Animate List Item Movement

0:06:54

Animating Route Changes

0:09:13

An Important Note on Animated Route Changes

0:07:30

Module Resources

0:07:30

Section 15

Vuex

Time 2h 30m

Lectures 21

See All

Module Introduction

0:09:13

What & Why?

0:09:13

Creating & Using a Store

0:06:54

Connecting Components to State

0:06:54

Introducing Mutations - A Better Way of Changing Data

0:06:54

Passing Data to Mutations with Payloads

0:03:41

Introducing Getters - A Better Way Of Getting Data

0:07:30

Running Async Code with Actions

0:09:13

Understanding the Action "Context"

0:06:12

Using Mapper Helpers

0:06:12

Example: Adding More State

0:06:12

Organizing your Store with Modules

0:09:13

Understanding Local Module State

0:06:12

Namespacing Modules

0:06:54

Structuring Vuex Code & Files

0:07:30

A Challenge!

0:09:13

Challenge Solution (1/3)

0:03:41

Challenge Solution (2/3)

0:09:13

Challenge Solution (3/3)

0:06:12

Summary

0:06:54

Module Resources

0:07:30

Section 16

Main Project: "Find a Coach" Web App

Time 3h 26m

Lectures 29

See All

Module Introduction

0:06:12

Planning the Project / Web App

0:06:12

Planning the Data Requirements

0:06:12

Planning the Layout / Components

0:03:41

Registering Routes

0:09:13

Adding Route Page Components

0:03:41

Working on the Main Layout & Styling

0:06:12

Wiring Up Pages

0:09:13

Adding Vuex and Coach Data

0:09:13

Working on the Coaches List and List Items

0:07:30

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

0:07:30

Building the Coach Detail Component

0:09:13

Filtering Coaches

0:07:30

Registering as a Coach: The Form

0:06:54

Adding Coaches to Vuex

0:07:30

Adding Form Validation

0:06:54

Working on the Contact Form

0:07:30

Storing Requests (Messages) With Vuex

0:07:30

Outputting Incoming Requests (Messages)

0:09:13

Filtering Requests for the Active Coach

0:06:54

Sending a PUT Http Request to Store Coach Data

0:06:54

Fetching Coach Data (GET Http Request)

0:06:54

Rendering a Loading Spinner

0:03:41

Adding Http Error Handling

0:07:30

Sending Coaching Requests Http Requests

0:07:30

Caching Http Response Data

0:07:30

Adding Route Transitions

0:06:54

The "Not Found" Page & Summary

0:09:13

Module Resources

0:06:12

Section 17

Vue & Authentication

Time 1h 33m

Lectures 16

See All

Module Introduction

0:06:12

How Authentication Works in Vue Apps (or any SPA)

0:06:54

Locking / Protecting Backend Resources

0:03:41

Adding an Authentication Page (Login & Signup)

0:06:54

Preparing Vuex

0:06:54

Adding a "Signup" Action & Flow

0:06:54

Better UX: Loading Spinner & Error Handling

0:06:12

Adding a "Login" Action & Flow

0:07:30

Attaching the Token to Outgoing Requests

0:03:41

Updating the UI Based on Auth State

0:09:13

Adding a "Logout" Action & Flow

0:07:30

Authentication & Routing (incl. Navigation Guards)

0:03:41

Adding "Auto Login"

0:06:54

Adding "Auto Logout"

0:03:41

Summary

0:03:41

Module Resources

0:03:41

Section 18

Optimizing & Deploying Vue Apps

Time 50m

Lectures 7

See All

Module Introduction

0:07:30

What To Deploy?

0:09:13

Optimization: Using Asynchronous Components

0:09:13

Note: Async Components & Routing

0:06:54

Building the Project For Production

0:06:54

Deploying a Vue App

0:03:41

Module Resources

0:07:30

Section 19

The Composition API - Replacing the Options API

Time 2h 45m

Lectures 27

See All

Module Introduction

0:03:41

Which Problem Does The Composition API Solve?

0:06:54

Replacing "data" with "refs"

0:03:41

Replacing the setup() Method

0:03:41

Building "reactive" Objects

0:06:12

Reactivity: A Deep Dive

0:06:54

Replacing "methods" with Regular Functions

0:07:30

Time to Practice: Data & Functions

0:06:54

Replacing "Computed Properties" with the "computed" Function

0:03:41

Two-Way-Binding and the Composition API

0:06:54

Working with Watchers

0:09:13

Time to Practice: Composition API Core Building Blocks

0:07:30

A First Summary

0:06:54

How To Use Template Refs

0:03:41

Components, Props & The Composition API

0:06:12

Emitting Custom Events

0:06:12

Working with Provide/ Inject

0:07:30

Lifecycle Hooks in the Composition API

0:07:30

Migrating from Options API to Composition API - An Example Project

0:06:54

Migrating a First Component

0:09:13

Migrating a Big Component

0:03:41

Migrating the Remaining Components

0:06:54

Routing, Params & The Composition API

0:03:41

The Route & Router Objects and the Composition API

0:07:30

Using Vuex with the Composition API

0:09:13

Summary

0:03:41

Module Resources

0:03:41

Section 20

Reusing Functionality: Mixins & Custom Composition Functions

Time 1h 25m

Lectures 14

See All

Module Introduction

0:06:54

Reusability Concepts

0:09:13

Using Mixins

0:03:41

Understanding Mixin Merging

0:06:54

Global Mixins

0:06:54

Disadvantages of Mixins

0:03:41

Custom Hooks / Composables & The Composition API

0:03:41

More Custom Composition Functions

0:06:54

Why Hooks / Composables Beat Mixins

0:03:41

Example: Creating a "Search" Hook

0:06:12

Custom Hooks Gotchas

0:09:13

More Thoughts on Custom Hooks / Composables

0:03:41

Example: A Custom "Sort" Hook

0:07:30

Module Resources

0:06:54

Section 21

Roundup & Next Steps

Time 15m

Lectures 2

See All

Thanks for being part of the course!

0:06:12

Course Roundup & Next Steps

0:09:13

Section 22

Vue 2 to Vue 3 Migration

Time 26m

Lectures 5

See All

Vue 3 - Overview

0:06:12

Important Changes & Migration Steps

0:06:12

Vue 3: New Features

0:03:41

The New Composition API (Optional!)

0:03:41

Further Migration Resources

0:06:54

Section 23

Learn Vue 2 | Old Course Content

Time 06m

Lectures 1

See All

Section 24

Getting Started [VUE2]

Time 06m

Lectures 1

See All

Section 25

Using VueJS to Interact with the DOM [VUE2]

Time 16m

Lectures 3

See All

Time to Practice - Events

0:06:54

Time to Practice - Reactive Properties

0:03:41

Time to Practice - Styling

0:06:12

Section 26

Using Conditionals and Rendering Lists [VUE2]

Time 03m

Lectures 1

See All

Section 27

An Introduction to Components [VUE2]

Time 07m

Lectures 1

See All

Section 28

Communicating between Components [VUE2]

Time 03m

Lectures 1

See All

Section 29

About Tutor

Naomi Sipes

4.20 (10 Reviews)

Courses 1

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.

Ratings & Reviews

0.00

0 Reviews

Channels

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

Naomi Sipes

Biography

Ratings & Reviews