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

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

Farming, Ranching, and Forestry / 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

Entertainment Providers: Musicians

Naomi Sipes

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

This Course Includes:

38h 19m
345 Lectures x
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 x

Course Tags x

Course Content x

29 Sections x
345 Lectures x
38h 19m Total Length

Section 1

Getting Started

Time 1h 14m

Lectures x 12

See All

Welcome to the Course!

Preview x 0:07:30

What is "Vue.js"?

Preview x 0:07:30

Different Ways of Using Vue

Preview x 0:06:54

Exploring Vue Alternatives

Preview x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 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 x 1

See All

Section 24

Getting Started [VUE2]

Time 03m

Lectures x 1

See All

Section 25

Using VueJS to Interact with the DOM [VUE2]

Time 22m

Lectures x 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 x 1

See All

Section 27

An Introduction to Components [VUE2]

Time 03m

Lectures x 1

See All

Section 28

Communicating between Components [VUE2]

Time 06m

Lectures x 1

See All

Section 29

About Tutor

Naomi Sipes

4.20 (10 Reviews x)

Courses x 1

View Profile

Biography x

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 German, Hebrew, Finnish. 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 x

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 x

Course Tags x

Course Content x

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 x

Ratings & Reviews