Vue Masterclass (Covers Vue 2 and 3)

Use Create Vue to Initialize Vue Project

Configuring the App: VSCode

Configuring the App: ESLint

Hot Reloading

Project Structure

Mounting the Vue App

The @ Symbol for src Directory

The Parts of a Vue File

Cleanup, Cleanup

More on Components

Install Dev Tools

Section Review [SLIDES]

Code at End of Section 2

Targeting by HTML Element or CSS Class

The scoped Attribute

A Little Housekeeping

Section Review [SLIDES]

Code at End of Section 3

Introduction to Tailwind CSS

Add Tailwind CSS to Project

BONUS: ES6 Spread Syntax for Arrays

Add Open Sans Font to Project

Try Out Tailwind Styles in App.vue

Install Tailwind CSS IntelliSense Extension

Install Prettier Plugin for Tailwind

Section Review [SLIDES]

Code at End of Section 4

User Story

Creating the MainNav Component

Rendering Child Component with the components Property

Different Ways to Render a Component

Update Tailwind Styles

CSS: Styling the MainNav Component

BONUS: JavaScript Objects, Properties, and Methods

Rendering Data to View I

Rendering Data to View II: Multiple Data Properties

Section Review [SLIDES]

Code at End of Section 5

Intro to Testing

Quick Fix for Testing Issues

The Basics of Vitest Syntax

Multiple Describe Blocks

Intro to Test-Driven Development (TDD)

Test-Driven Development In Action

Adding the —coverage Flag

Setup Vitest Globals

Quick Cleanup

Section Review [SLIDES]

Code at End of Section 6

Cleaning up App.vue

Fixes for Next Lesson

Setup Vue Testing Library

The render Function and screen Object

Our First Component Assertion

The Second Argument to render Function

Section Review [SLIDES]

Code at End of Section 7

The v-bind Directive I

The v-bind Directive II: Shortcut

CSS: Styling Navigation Items

The v-for Directive

The :key Attribute

Using Tailwind's First Child Utility Class

Review: The ES6 map Method on an Array

ARIA Roles [SLIDES]

Testing the v-for Directive

Install Testing Playground Extension

Section Review [SLIDES]

Code at End of Section 8

User Story

Create ActionButton Component

CSS: Styling ActionButton

Add Custom Box Shadow to ActionButton

Create ProfileImage Component

Conditional Rendering with the v-if Directive

The v-else Directive

Adding Methods to Vue Component

The v-on Directive I: HTML Element

The v-on Directive II: Shortcut

The Event Object

Overwriting Component Data in a Method

The queryBy Methods from Vue Testing Library

The userEvent Library

Section Review [SLIDES]

Code at End of Section 9

User Story: Multiple Buttons

Independent Components

Intro to Props

The Tailwind @apply Directive

Adding v-bind to class Attribute

Adding Slice of Data for Dynamic Class

Intro to Computed Properties

Computed Properties for Class Object

Adding New Blue Color to Tailwind Config

Adding Secondary Button Style

Passing in Props for Style

Adding a type Prop

BONUS: ES6 Review: Dynamic Object Keys

Refactoring the type Prop

Testing CSS Classes

Updating Prop Validation in ActionButton

Custom Prop Validation with the validator Function

Section Review [SLIDES]

Code at End of Section 10

User Story: Subnav

Create TheSubnav Component

Styling TheSubnav Component

Install FontAwesome

Register Global Components

Use FontAwesome Icon in TheSubnav

Conditionally Render TheSubnav

Using TDD for v-if Directive for Jobs Page

Fixing Test Warnings in TheSubnav and MainNav

Using Helper Function in MainNav Test

Section Review [SLIDES]

Code at End of Section 11

User Story

Create TheHero.vue Component

Dynamically Adjust Height of Header

CSS: Style TheHero Component

Introducing CSS Grid

Apply CSS Grid to TheHero

Introduction to Vue Lifecycle Hooks - Lifecycle Methods

REVIEW: The setTimeout, setInterval and clearInterval Functions

Using the created Lifecycle Hook

Changing the Action Verb in TheHeadline

CSS: Style Action Verb

CSS: Fix Styles of Primary Header

CSS: Fix Styles of Secondary Header

Refactor Font Color Class Selection

Microphone Update

Moving Interval Function Logic Out of Component

Adding Function to Headline Component

Intro to vi.fn() Function

Tests for TheHeadline Component

More Tests for TheHeadline Component

Fixing Error in Next Lesson

Even More Tests for TheHeadline Component

The beforeEach and afterEach Functions

Section Review [SLIDES]

Code at End of Section 12

User Story

Add New Colors to tailwind.config.js

Create JobSearchForm Component

Add Bottom Margin to TheHeadline

CSS: Styling JobSearchForm I

CSS: Styling JobSearchForm II

Binding Component Data to Form Input

Binding Form Input to Component Data

Two-Way Data Binding with v-model Directive

Image Link for Next Lesson

Add Vue Image in Grid

Refactor I: Isolating Navigation Components

Refactor II: Isolating JobSearch Components

Refactor III: Isolating Shared Components

Section Review [SLIDES]

Code at End of Section 13

Creating Reusable TextInput Component

Using TextInput in JobSearchForm

Emitting an Event from a Component

Listing to Emitted Messages

Overwriting Parent Data from Emits

Inline Overwriting

Improving Our Design

The v-model Directive on Component

The emits Key

Testing Event Emission

Section Review [SLIDES]

Code at End of Section 14

User Story

Install Vue Router

Writing the Router File

The router-view Component

The router-link Component

Keep MainNav Constant, Dynamically Render Component

Adding Content to Home Page

Accessing this.$route

Accessing this.$router

Navigating with router.push Method

Adding a <router-link> Item to MainNav

Fixing Warnings with the RouterLinkStub Component

Section Review

Code at End of Section 15

User Story

Adding <router-link> to Main Menu

The mocks Property for render Function Config

Fixing MainNav Tests

Using Factory Functions for TheSubnav Tests

Creating Page for Individual Job

Display the Route ID Dynamically

BONUS: Review: Query Params

Navigating to Job Results Page when Submitting Form

Testing JobSearchForm Form Submission

Section Review [SLIDES]

Code at End of Section 16

User Story

Create JobFiltersSidebar Component

Create JobListings Component

CSS: Styling JobFiltersSidebar and JobListings Components

Extend Tailwind with New Boxshadow Option

CSS: Adding Job Title and Location to a Job Listing

CSS: Adding Job Qualifications to Job Listing

Extracting JobListing to Separate Component

Section Review [SLIDES]

Code at End of Section 17

Install JSON Server

Create Our Jobs Data

Making Jobs Request in Browser

Install Axios NPM Package

Making Axios Request for Jobs in JobListings Component

REVIEW: async/await Syntax

Use async/await Syntax to Fetch Jobs

Render JobListing in JobResults

Compute Dynamic Job Page

Update Job Listing to Render Job’s Data

Testing the JobListing Component

Refactoring JobListings Test

More Tests for JobListing Component

Mocking a Module with Vitest

Create First Tests for JobListings Component

Section Review [SLIDES]

Code at End of Section 18

User Story

REVIEW: The slice Method

Display only the First 10 Jobs

Dynamic Pagination

Fixing Failing JobListings Component Tests

Refactor JobListings Component Tests

Displaying Page Number at Bottom of Job Listings

Wiring Up Computed Properties for Next and Previous Page

Rendering the Previous and Next Page

Scrolling to Top on Params Change

Adding Tests for Page Number

More Tests for JobListings Component

Fixing the Bug

Adding More Tests for JobListings Component

Environment Variables in Vite

Section Review [SLIDES]

Code at End of Section 19

What is Pinia?

Install Pinia Dependency

Register Pinia Store

Creating a Pinia Store

Add First Store Action

Adding Tests for Pinia State and Actions

Reading from Pinia Store in Component with mapStores Function

Writing to Pinia Store in Component

Interacting with Pinia Store in Dev Tools

Install Pinia Testing Library

Fixing our Failing MainNav Tests

A Second Testing Option

The mapState and mapActions Functions

Section Review [SLIDES]

Code at End of Section 20

Intro to the Section

Review of vi.mock and Building out API Call

TDD: Adding Test for Jobs API Call I

TDD: Adding Test for Jobs API Call II

TDD: Adding Test for jobs State

TDD: FETCH_JOBS Action

Dispatching Action from Component to Fetch Jobs

Fixing Tests for JobListings Component

Section Review [SLIDES]

Code at End of Section 21

User Story

CSS: Adding Initial Styles for JobFiltersSidebar Component

Update Font Awesome Icons

Create CollapsibleAccordion Component

CSS: Styling CollapsibleAccordion Component

Introduction to Slots

Render Custom Content in Slot

Slots and Props

Writing Test for Slots

Fallback Content for Slots

Adding Tests for Fallback Slot Content

The Usual Refactor

Extracting Organizations Accordion to New Component

Section Review [SLIDES]

Code at End of Section 22

User Story: Building a Reusable Header

Named Slots I

Creating TeamsView Page

Named Slots II

Default Slot

Testing Named Slots

Named Slots Shorthand

Section Review [SLIDES]

Code at End of Section 23

User Story

JSON Content for db.json File

Adding spotlights Endpoint

Create SpotLight Component

Render SpotLight Component

Alternative Render of Data

Passing Multiple Props from Scoped Slot

Object Destructuring with Scoped Slots

Testing Scoped Slots

Refactoring Test Suite

Section Review [SLIDES]

Code at End of Section 24

User Story

Review of JavaScript Sets

Intro to Getters

Testing Pinia Getters

Wire Up UNIQUE_ORGANIZATIONS Getter in JobFiltersSidebarOrganizations

Use v-for to Render Unique Organizations in JobFiltersSidebarOrganizations

Testing Getters in JobFiltersSidebarOrganizations

Add v-model to Checkbox for Organizations

The v-on:change Handler

TDD: Add selectedOrganizations Property to Pinia Store State

TDD: Create ADD_SELECTED_ORGANIZATIONS Action

Dispatch Action to Add Organizations from JobFiltersSidebarOrganizations

BONUS: REVIEW: filter Method on an Array

TDD: Adding Getter to Filter Jobs by Organization

Rendering Filtered Organization Jobs in JobListings Component

Fixing FILTERED_JOBS_BY_ORGANIZATIONS Getter Bug

Adding Test for JobFiltersSidebarOrganizations Checkbox Interaction

Refactoring JobFiltersSidebarOrganizations Test

Displaying Accurate Number of Filtered Jobs

Section Review [SLIDES]

Code at End of Section 25

User Story

TDD: Adding State for Job Types

TDD: Adding Action for Selecting Job Types

TDD: Adding Getter for Unique Job Types

TDD: Adding Getter for Filtered Jobs by Job Types

TDD: New JobFiltersSidebarJobTypes Component

Wire up Job Type Filters in Sidebar

Filter for Job Types in Job Listings

Allow User to Apply Multiple Filters

Use New Getter in JobListings Component

Fixing New Bug

Getters with Arguments

Tests for Getters with Arguments

TDD: Updating TheSubnav Tests and Implementation

Delete Old Two Getters

Fixing Extra Bug I

Fixing Extra Bug II

Section Review [SLIDES]

Code at End of Section 26

What is reactivity?

Vue’s ref Function

Vue’s computed Function

One More Example with Another Primitive

What about Object Reactivity?

Cleaning up the Code with reactive Function

Multiple Properties on Reactive Object

Multiple Levels of Reactivity

Destructuring Problems

The toRef Function

The toRefs Function

A Clarification on toRefs

Section Review [SLIDES]

Code at End of Section 27

Introduction to the Composition API

The setup Method

The ref Function in setup Method

More Practice with ref

The computed Function

Accepting Props in Component

Checking in on Test Suite

Accepting Props in Setup Method

Using toRefs on Props

The new script setup Syntax

More Practice with the script setup Syntax

Section Review [SLIDES]

Code at End of Section 28

Composition API with Vue Router

Fixing Failing JobSearchForm Tests

Composition API with Route

Composition API with Pinia Getters

Fixing Failing Tests for TheSubnav

Fixing Failing Tests for MainNav

Refactoring JobFiltersSidebarJobTypes

Fixing JobFiltersSidebarJobTypes Tests

Refactoring JobFiltersSidebarJobOrganizations Component

Fixing Failing JobFiltersSidebarOrganizations Tests

Creating Reusable JobFiltersSidebarCheckboxGroup Component

Reuse JobFiltersSidebarCheckboxGroup

Adding Tests for JobFiltersSidebarCheckboxGroup

Section Review [SLIDES]

Code at End of Section 29

The onMounted Function

Refactoring JobListings Component to Use Composition API

Fixing Failing JobListings Tests

One More Update to JobListings Tests

Extracting Previous and Next Page Logic to Composable Function

Add Composables to Component

Adding Tests for usePreviousAndNextPages Composable

Updating JobListing Component

Section Review [SLIDES]

Code at End of Section 30

Welcome to TypeScript [SLIDES]

Primitive Types

Type Inference

The any type

The unknown Type and Type Guards

Array Type Declarations

Object Type Declarations

Type Literals

Type Literals and Objects

Optional Properties

Interfaces and Types

Declaring Types for Functions

Interfaces for Functions

Intro to Generics

Section Review [SLIDES]

Code at End of Section 31

Tsconfig.json for Next Lesson

Install TypeScript for Vue

Create Job Interface

Update getJobs API Call

Updating Test File for getJobs

Define Types for User Store

Define Types for Jobs Store

Update Jobs Test File to TypeScript I

Update Jobs Test File to TypeScript II

TypeScript’s Partial Type

Create Factory Function for Jobs Test File

Update Utils Files to TypeScript

Adding Types to Composables

Section Review [SLIDES]

Code at End of Section 32

Adding Type Annotations to ProfileImage Component

Adding Type Annotations to MainNav Component

Adding Type Annotations to TheHeadline Component

Adding Type Annotations to CollapsibleAccordion Component

Adding Type Annotations to ActionButton Component

Annotating Event Handlers

Adding Type Annotations to HeaderContainer Component

Adding Type Annotations to TheSubnav Component

Annotating Axios Requests (SpotLight Component)

Adding Type Annotations to JobListing Component

Adding Type Annotations to JobListings Component

Adding Type Annotations to JobFiltersSidebar Component

Adding Type Annotations to JobFiltersSidebarCheckboxGroup Component

Adding Type Annotations to JobSearchForm Component

Adding Type Annotations to TheHero and App Components

Annotating Our Views

Updating User Store and Setup Test File

Section Review [SLIDES]

Code at End of Section 33

User Story

JSON Content for db.json File

Adding /degrees Endpoint to db.json

TDD for API Call: getDegrees API Call

An Alternative Syntax for Pinia Stores

TDD for Action: FETCH_DEGREES

TDD for Getters: UNIQUE_DEGREES

TDD for State: selectedDegrees

TDD for Getters: INCLUDE_JOB_BY_DEGREE

Updating FILTERED_JOBS Getter

TDD for Actions: ADD_SELECTED_DEGREES

Updating JobFiltersSidebar Component

Fetch Degrees when JobListings Loads

Trying Out Code in Browser

Section Review [SLIDES]

Code at End of Section 34

User Story

TDD for CLEAR_USER_JOB_FILTER_SELECTIONS Action

Refactor User Store to new Pinia Syntax

Wiring up Click Handler In JobFiltersSidebar

The Pinia $onAction Method

Refactoring CollapsibleAccordion Component

Add Tests for Action Side Effect

Breaking JobFiltersSidebar Into Smaller Components

Creating JobFiltersSidebarPrompt Component

Adding Tests for JobFiltersSidebarPrompt Component

Section Review [SLIDES]

Code at End of Section 35

User Story

Create Component to Track Skills and Qualifications

Add New Search Term to Pinia State

Add Action to Update Skills Search Term

Filtering the Jobs by Search Term

Two More Tests for INCLUDE_JOB_BY_SKILL Getter

Wiring up Search State to Pinia Store

The lazy Input Modifier

The trim Input Modifier

Adding Tests for JobFiltersSidebarSkills Component

Clearing the Search Input when Clearing Filters

Reading Search Term from Params

Section Review [SLIDES]

Code at End of Section 36

Congratulations

Complete Slide Decks

Bonus