Vue Masterclass | Discount Coupon for Udemy Course

Welcome to Vue Masterclass! In this lesson, we introduce the Vue.js library and the problems it helps us to solve. We also walk through the technical prerequisites (HTML, CSS, JavaScript, Terminal), the concepts we'll learn throughout the lessons, and the benefits of taking the course.

In this course, we'll be building out a job search app strongly inspired by the Google Careers website. This is a real-world Vue project that Google developers had to build. We'll discover that there's a lot of hidden complexity hiding in this application; it offers us a perfect opportunity to learn all about Vue.

In this lesson, we'll explain the differences between versions 2 and 3 of Vue. Version 3 introduces the Composition API, a new way to build components. The Composition API is complementary to the existing Options API that Vue 2 uses. We will be learning both APIs throughout the course.

In this lesson, we'll learn the differences between the Vue, React, and Angular front-end libraries/frameworks. Vue exists midway between the unopinionated React library and the opinionated Angular framework. Vue only cares about the view layer but its core team develops supplemental libraries to assist with other problems in front-end development.

In this lesson, you'll discover through the technical tools you'll need to install to proceed through the course.

In this lesson, we download the Google Chrome web browser that we'll be using to view our Vue application

In this lesson, we download Git for source control. You can use Git to make commits during your project development. I recommended adding a commit at the end of every lesson.

If you're a macOS user, you'll need to install some Xcode development tools before you can install Node on your computer. This lesson shows you how to install these software prerequisites.

In this lesson, we'll walk through the installation of the Node runtime environment for your computer. Node and NPM are required to work with VueJS.

In this lesson, we'll setup the free VSCode (Visual Studio Code) text editor. We'll be using it to write our code throughout the course.

In this lesson, we install 3 helpful extensions for working with our project: Vetur, ESLint, and Prettier.

In this lesson, we deliver some insights for how to ask good questions in the Q&A section.

In this lesson, we use the Create Vue NPM utility to scaffold a Vue 3 application powered by Vite. We configure the app to include Vitest, ESLint, and Prettier. Finally, we learn how to start the development server and load the Vue app in our browser.

In this lesson, we configure the settings.json file in VSCode that holds our project settings. The complete file is available in the previous lesson. Double-check that its content matches your file's content.

In this lesson, we upgrade our project's ESLint configuration file to enable the stricter recommended settings.

In this lesson, we make changes in our code editor to observe hot reloading, a feature in which Vite detects our file changes and updates the browser content immediately.

In this lesson, we review the files, folders, and project structure generated by Create Vue CLI.

In this lesson, we discuss how to bootstrap the Vue application in the main.js file. The app identifies an HTML element on the page to "hook into" and launch itself from.

In this lesson, we learn about the @ shortcut for the src directory in our project. We also practice using it in main.js.

In this lesson, we introduce the 3 sections of a Vue component file:the template section for HTML, the script section for JavaScript, and the style section for CSS.

In this lesson, we delete several starter files that Create Vue generated in order to prep for the next section of the course.

In this lesson, we render multiple instances of the same HelloWorld component to understand the benefits of component reusability in Vue.

In this lesson, we install the Vue Dev Tools, a Chrome extension for debugging Vue applications. We then test out the extension with our job search application.

In this lesson, we review everything we've learned in this course section.

Download the project code as it stands at the end of section 2. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we discuss how CSS in a component's style section can "leak out" and affect other components.

In this lesson, we limit the scope of a component's styles to its own <template> elements by adding the scoped attribute in the <style> tag.

In this lesson, we clean up our job search codebase and delete some files in preparation for next course section.

In this lesson, we review everything we've learned in this course section.

Download the project code as it stands at the end of section 3. This can be helpful if you'd like to pick up the course at a specific section.

Learn about the Tailwind CSS library which includes thousands of CSS utility classes. Each class adds a single CSS attribute/property declaration. We combine multiple classes together to form the complete user interface.

In this lesson, we add TailwindCSS to our Vite/Vue project. We configure the tailwind.config.js file and configure our index.css file to incorporate Tailwind directives.

Review the ES6 spread syntax for arrays, which copies all elements from an original array into a new one.

In this lesson, we add the Open Sans font to our project from Google Fonts. We also configure Tailwind to preserve its default styles in case our new font fails to load.

In this lesson, we practice using Tailwind in a Vue component by applying styles for margin, font size, and text alignment.

In this lesson, we install a helpful VSCode extension to enable Tailwind CSS Intellisense, which shows helpful pop-up suggestions as we type our classes.

In this lesson, we install a Prettier plugin to sort our Tailwind classes in a consistent order.

Review everything we learned in this section about TailwindCSS, utility classes, setup and more.

Download the project code as it stands at the end of section 4. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we'll introduce our next user story. We'll be building a main nav to enable the user to navigate between the pages of our site.

In this lesson, we create a new MainNav component in a new vue file.

In this lesson, we render our MainNav as a child component within our App component. We also discuss the components property of the configuration object, where we register imported components so we can use them in the <template> section.

In this lesson, we discuss the different syntactical options to render a child component including <kebab-case> and <PascalCase>. We also introduce self-closing component tags versus opening + closing component tags.

In this lesson, we update tailwind.config.js to add 3 custom colors to our app. Tailwind will auto-generate CSS classes (for things like font and background) using our new colors.

In this lesson, we style our MainNav component using TailwindCSS.

In this lesson, we review the basics of JavaScript objects including properties, methods, and the this keyword, which allows us to reference the current object.

In this lesson, we introduce component data. Data is state that changes over time. We can use our data in our <template> with the use of double curly braces {{ and }}.

In this lesson, we practice the interpolation syntax (curly braces) that we introduced in the previous lesson and add more properties to our MainNav component's data.

In this lesson, we review the concepts we covered in the previous section of the course including component data, Tailwind custom colors, and more.

Download the project code as it stands at the end of section 5. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we introduce the benefits of testing and the libraries we'll be using: Vitest and Vue Testing Library.

In this lesson, we'll fix a quick issue due to differences in the latest version of Create Vue.

In this lesson, we create our first Vitest file and write a basic test using the describe, it, and expect functions.

In this lesson, we practice declaring multiple describe blocks in a Vitest test file.

In this lesson, we introduce test-driven development (TDD) and the benefits it gives us. TDD means we write our tests first, before the implementation code.

In this lesson, we demonstrate TDD with a simple mathematical example.

In this lesson, we add the --coverage flag to our test:unit command to ask Vitest to run a code coverage check when it runs our tests.

In this lesson, we enable our Vitest functions (like describe and it) to be available automatically in our test files.

In this lesson, we delete our sample playground.test.js file, as it was just for example.

Review everything we learned in this course section including Vitest syntax, test-driven development, configuring Vitest global functions, and more.

Download the project code as it stands at the end of section 6. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we clean up the App.vue component to prepare for the tests we'll be writing in the upcoming lessons.

In this lesson, we install the Vue Testing Library and some complementary libraries. We also create a setup file that adds new matchers to our Vitest assertions.

In this lesson, we use the render function to render our Vue component to a virtual DOM. We also introduce the screen object and the debug method to show the HTML markup.

In this lesson, we use the toBeInTheDocument assertion to validate the presence of a piece of text in our MainNav component tests.

In this lesson, we introduce the second argument to the render function and discuss the tradeoffs of customizing the component's data in our test suite.

Review everything we learned in this section of the course including installing and setting up Vue Testing Library, rendering a component, and checking for the presence of text with the toBeInTheDocument matcher.

Download the project code as it stands at the end of section 7. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we introduce our first Vue directive, v-bind. The v-bind directive allows us to connect a piece of component data to an HTML element attribute.

In this lesson, we introduce the : shortcut syntax for the v-bind directive.

In this lesson, we style the navigation menu in our MainNav component using TailwindCSS.

In this lesson, we introduce the v-for directive, which repeats a chunk of HTML for every element in an iterable (such as an array).

In this lesson, we discuss the importance of adding a key attribute to our v-for iterations. Each value of the key attribute must be unique.

In this lesson, we introduce the first prefix in Tailwind to apply styles to only the first child in a collection.

In this lesson, we review the ES6 map method on array. The map method returns a new array by performing a consistent operation on each element from the original array.

In this lesson, we introduce accessibility and the concept of ARIA roles, which are "responsibility labels" that the browser assigns to our elements.

In this lesson, we write a test for the menu items in our MainNav component and introduce the getAllByRole method.

In this lesson, we install the Testing Playground browser extension, which helps generate and recommend queries for our component tests.

In this lesson, we review everything we learned in this section including the v-bind and v-for directives, the Testing Playground extension, ARIA roles + accessibility, and more.

Download the project code as it stands at the end of section 8. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we introduce our next user story: simulating a user logging into our job search app.

In this lesson, we create a new ActionButton component and render it within MainNav.

In this lesson, we add initial styles to our ActionButton component.

In this lesson, we modify our tailwind.config.js file to generate new CSS classes for a custom box shadow.

In this lesson, we create a new ProfileImage Vue component to store our user profile picture.

In this lesson, we introduce the v-if directive to conditionally render a chunk of HTML within our component template.

In this lesson, we introduce the complementary v-else directive, which renders a chunk of HTML when the v-if directive evaluates to false.

In this lesson, we learn how to add methods to our Vue component by using the configuration object in the Options API.

In this lesson, we introduce the v-on directive, which allows us to react to an event like a user click or user type.

In this lesson, we show the @ shortcut for the v-on directive.  This is the preference of our ESLint configuration.

In this lesson, we discuss the Event object that the browser generates for us when an event occurs. The object contains metadata about the event that transpired.

In this lesson, we learn how to use the this keyword to access and overwrite component data within a method.

In this lesson, we learn about the queryBy family of methods in Vue Testing Library, which return null when they are unable to find the given query.

In this lesson, we introduce the @testing-library/user-event library, which we use to simulate user interactions with our components.

In this lesson, review everything we learned in this course section including the v-if and v-else directives, querying with the queryBy family of method, using userEvent to interact with components in tests, and more!

Download the project code as it stands at the end of section 9. This can be helpful if you'd like to pick up the course at a specific section.

Welcome to the next section of the course! In this lesson, we introduce our next user story: multiple buttons to communicate primary and secondary actions on our view.

Download the project code as it stands at the end of section 10. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 11. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 12. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 13. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 14. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 15. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 16. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 17. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 18. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 19. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 20. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 21. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 22. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 23. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 24. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 25. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 26. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 27. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 28. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 29. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 30. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 31. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 32. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 33. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 34. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 35. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of section 36. This can be helpful if you'd like to pick up the course at a specific section.

This lecture includes some supplementary material for the next video lesson, where we configure the settings.json file that holds our VSCode project settings.

This lesson features the code you'll need to add the jest.config.js file to support test files with a test.js extension. We'll configure this test setting in the next lesson.

This video includes all videos from the Intro to CSS in Vue section of the course (V1 - Deprecated):

• Install Vue CLI

• The vue create Command

• Starting the Vue App

• Hot Reloading

• Configuring the App: VSCode

• Configuring the App: Jest

• Configuring the App: ESLint

• Project Structure

• Mounting the Vue App

• The @ Symbol for Top of Directory

• The Parts of a Vue File

• More on Components

• Install Vue Dev Tools

• Section Review

This video includes all videos from the Intro to CSS in Vue section of the course (V1 - Deprecated):

• Targeting by HTML Element or CSS Class

• The scoped Attribute

• A Little Housekeeping

• Section Review

Download the project code as it stands at the end of section 3 [DEPRECATED]. This can be helpful if you'd like to pick up the course at a specific section.

This video includes all videos from the Intro to Tailwind CSS section of the course (V1 - Deprecated):

• Introduction to Tailwind CSS

• Add Tailwind CSS to Job Search Project

• BONUS: ES6 Array Spreading

• Add Open Sans Font from Google Fonts

• Try out Tailwind Styles

• Install Tailwind CSS Intellisense Extension

• Section Review

Download the project code as it stands at the end of section 4 [DEPRECATED]. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we modify our .eslintrc.js file to avoid a Prettier issue in the next lesson.

This video includes all videos from the Rendering Data to View section of the course (V1 - Deprecated):

• User Story

• Creating the MainNav Component

• Rendering Child Component with the components Property

• Different Ways to Render a Vue Component

• Update Tailwind Styles

• CSS: Styling the MainNav Component

• CSS: Styling Our Company Name

• BONUS: JavaScript Objects, Properties, and Methods

• Rendering Data to View I

• Rendering Data to View II

• Section Review

Download the project code as it stands at the end of section 5 [DEPRECATED]. This can be helpful if you'd like to pick up the course at a specific section.

This video includes all videos from the Intro to Jest section of the course (V1 - Deprecated):

• Why do we test?

• The Basics of Jest Syntax

• Multiple Describe Blocks

• Intro to Test-Driven Development (TDD)

• Test-Driven Development in Action

• Adding the --watch and --coverage Flags

• CSS: Styling Our Company Name

• Quick Cleanup

• Section Review

Download the project code as it stands at the end of section 6 [DEPRECATED]. This can be helpful if you'd like to pick up the course at a specific section.

This video includes all videos from the First Vue Tests section of the course (V1 - Deprecated):

• Cleaning up App.vue

• Intro to Vue Test Utils

• Our First Vue Test

• The Second Argument to mount Function

• The setData Method

• Section Review

Download the project code as it stands at the end of section 7 [DEPRECATED]. This can be helpful if you'd like to pick up the course at a specific section.

This video includes all videos from the Directives I section of the course (V1 - Deprecated):

• 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

• BONUS: Review: The map Method on an Array

• Testing the v-for Directive

• Using data-test to Identify Elements

• Section Review

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

This video includes all videos from the Directives II section of the course (V1 - Deprecated):

• User Story

• Create ActionButton Component

• CSS: Styling Action Button

• Add Custom Box Shadow to ActionButton

• Create ProfileImage Component

• Conditional Rendering with the v-if Directive

• The v-else Directive

• Testing the v-else Directive I

• Testing the v-else Directive II

• Adding Methods to Vue Object

• The v-on Directive I: HTML Element

• v-on Shortcut

• The Event Object

• Overwriting Data in a Method

• Update Former MainNav Tests

• Section Review

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

This video includes all videos from the Passing Props section of the course (V1 - Deprecated):

• User Story: Multiple Buttons

• Independent Components

• Intro to Props

• The Tailwind @apply Directive

• Fixing CSS Violations

• Adding v-bind to Class Attribute

• Adding Slice of Data for Dynamic Class

• Intro to Computed Properties

• Computed Properties for Class Object

• Add New Blue Color to Tailwind Config

• Adding Secondary Button Style

• Passing in Props for Style

• Dynamically Using Props

• BONUS: ES6 Review: Dynamic Object Properties

• Refactoring the type Prop

• Testing CSS Classes

• Updating PropValidation in ActionButton

• Fixing Test Warnings

• Custom Prop Validation with the validator Method

• Section Review

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we address a compilation error that will arise in the next video due to an ESLint violation. We turn the rule off in our .eslintrc configuration file for ESLint.

This video includes all videos from the Creating Subnav section of the course (V1 - Deprecated):

• User Story: Subnav

• Create Subnav Component

• CSS: Styling Subnav Component

• Install FontAwesome

• Register Global Components

• Use FontAwesome Icon in Subnav

• Conditionally Render Subnav

• Using TDD for v-if Directive for Jobs Page

• Updating Subnav Implementation to Pass Tests

• Fixing Test Warnings in Subnav

• Fixing Test Warnings in MainNav

• Adding Tests for ProfileImage

• Adding Tests for Subnav in MainNav

• Section Review

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we walk through a fix you'll need to apply to the Jest code in the next lesson.

This video includes all videos from the Creating Headline section of the course (V1 - Deprecated):

• User Story

• Create Hero.vue Component

• Dynamically Adjust Height of Header

• CSS: Style Hero Component

• Introducing CSS Grid

• CSS: Apply CSS Grid to Hero

• Introduction to Vue Lifecycle Hooks

• BONUS: ES6 REVIEW: The setTimeout, setInterval and clearInterval Functions

• Using the created Lifecycle Hook

• Changing the Action Verb in Headline

• CSS: Style Action Verb

• CSS: Fix Styles of Primary Header

• CSS: Fix Styles of Secondary Header

• Refactor Font Color Class Selection

• Moving Interval Function Logic Out of Component

• Adding Function to Headline Component

• Intro to jest.fn() Function

• Tests for Headline Component

• More Tests for Headline Component

• Even More Tests for Headline Component

• beforeEach and afterEach

• Section Review

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

This lesson provides the URL for the image we'll be adding to the app.

This video includes all videos from the Creating Job Search Form section of the course (V1 - Deprecated):

• User Story

• Add New Colors to tailwind.config.js

• Create JobSearchForm Component

• Add Bottom Margin to Headline

• 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

• Add Vue Image in Grid

• Refactor I: Isolating Navigation Components

• Refactor II: Isolating JobSearch Components

• Refactor III: Isolating Shared Components

• Section Review

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

In this article, we advise how to fix an ESLint warning dealing with hyphenated event names.

This video includes all videos from the Emitting Events section of the course (V1 - Deprecated):

• 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

• Pass in the value prop in JobSearchForm

• The v-model Directive on Component

• The emits Key

• Testing Event Emission

• Section Review

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

This video includes all videos from the Vue Router I section of the course (V1 - Deprecated):

• User Story

• Install Vue Router

• Vue Router in Action

• Rewriting the Router File from Scratch

• 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

• Adding a <router-link> Item to MainNav

• Fixing Failing Tests with the RouterLinkStub Component

• Refactoring Test Suite: beforeEach()

• Refactoring Test Suite with Factory Function

• Section Review

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

This video includes all videos from the Vue Router II section of the course (V1 - Deprecated):

• User Story

• Adding <router-link> to Main Menu

• The mocks Property for Vue Test Utils Mount Config

• Using Factory Functions in Subnav Test

• Creating Page for Individual Jobs

• Display the Route ID Dynamically

• Lazy Loading File Imports

• Grouping Lazy Loaded Components in the Same Chunk

• BONUS: Review: Query Params

• Navigating to Job Results Page when Submitting Form

• Testing JobSearchForm Form Submission I

• Testing JobSearchForm Form Submission II

• Section Review

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

This video includes all videos from the Building Job Results Page section of the course (V1 - Deprecated):

• 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

• Render Multiple Job Listings in JobListings.vue

• Section Review

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

This video includes all videos from the Creating Mock Backend section of the course (V1 - Deprecated):

• Install JSON Server

• Create Our Jobs Data

• Making Jobs Request in Browser

• Install Axios NPM Package

• Making Axios Request for Jobs in JobListings Component

• BONUS: ES6 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

• Adding Test for Router Link

• Mocking a Module with Jest

• Create First Tests for JobListings Component

• The flushPromises Function

• Section Review

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

This video includes all videos from the Dynamic Pagination section of the course (V1 - Deprecated):

• User Story

• BONUS: REVIEW: The slice Method on an Array

• Display only the First 10 Jobs

• Dynamic Pagination

• Fixing Failing JobListings Component Tests

• Refactor JobListings Component

• 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

• Fixing Router Link Test issue

• Adding Tests for Page Number

• Fixing Test Pollution

• More Tests for Job Listings

• Fixing the Bug

• Adding More Tests for JobListings Component

• Environment Variables

• Section Review

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we introduce our next user story: building a reusable header that can vary the look and feel of its text content (while keeping it centered).

In this lesson, we add 2 named slots to our HeaderContainer component. This design allows the parent component to inject content into multiple parts of the HeaderContainer template.

In this lesson, we add a new TeamsView to our app, register it with our routes, and update the MainNav menu to head to the view.

In this lesson, we provide content for both slots in our HeaderContainer. We use the design to customize the title and subtitle content. We introduce the new v-slot directive.

In this lesson, we learn that Vue assigns the name "default" to a slot without a name. We practice using this name fallback in our HeaderContainer component.

In this lesson, we test the named slots in our HeaderContaiiner component. We demonstrate how we can customize the slot content by altering the config object in our tests.

In this lesson, we learn the hashtag shortcut for rendering a named slot.

In this lesson, we review everything we've learned in this course section.

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we introduce our next user story: allowing components to customize how the spotlight content on the front page renders.

Download the new JSON content for the db.json file for JSON Server.

In this lesson, we add a spotlights endpoint to our db.json file that configures the JSON Server.

In this lesson, we create a new Spotlight component and use the v-bind syntax to create a spotlight slot prop.

In this lesson, we render our Spotlight component in the Hero. We customize the first look and feel of the boxes.

In this lesson, we still utilize the Spotlight component but completely change the CSS styles of the rendered content.

In this lesson, we practice passing multiple slot props up to the parent component from the Spotlight component.

In this lesson, we use ES6 object destructuring syntax to access slot props from the Hero parent that renders the Spotlight child component.

In this lesson, we add tests for our new Spotlight component. We mock our our Axios call with jest.mock and use the slots property of the configuration object to render our "parent".

In this lesson, we create a mockSpotlightsResponse helper function to simplify our Spotlight test suite.

In this lesson, we review everything we've learned in this course section.

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

We're back in Vuex land! In this lesson, we review our user story: letting the user filter jobs by organizations.

In this lesson, we review JavaScript's Set object. The Set enforces uniqueness for the collection of values it stores.

In this lesson, we introduce Vuex getters. Getters are to a Vuex store what computed properties are to a component. Getters derive computed information from store state.

In this lesson, we add tests for the new UNIQUE_ORGANIZATIONS getter.

In this lesson, we utilize the UNIQUE_ORGANIZATIONS getter in the JobFiltersSidebarOrganizations component. The getter creates a Set, then iterates over the jobs slice of Vuex store state, extracts each organization, and adds it to the set. The result is a unique collection of organizations.

In this lesson, we use the UNIQUE_ORGANIZATIONS getter to render a dynamic number of checkboxes in the JobFiltersSidebarOrganizations component.

In this lesson, we add a test for the UNIQUE_ORGANIZATIONS getter inside the JobFiltersSidebarOrganizations component.

In this lesson, we introduce the mapGetters helper function from Vuex. It maps Vuex getters to computed properties on the component.

In this lesson, we add a selectedOrganizations slice of data to hold the user's selected organizations.

In this lesson, we react to the user selecting a checkbox by using the v-on directive.

In this lesson, we use TDD to add a selectedOrganizations property to our Vuex store state.

In this lesson, we use TDD to wire up a ADD_SELECTED_ORGANIZATIONS mutation that updates the selectedOrganizations array.

In this lesson, we commit the ADD_SELECTED_ORGANIZATIONS mutation from the JobFiltersSiidebarOrganizations component whenever the user selects a checkbox.

In this lesson, we review the filter method on an array. It accepts a function and uses it to filter the elements from the original array into a new one.

In this lesson, we use TDD to implement a FILTERED_JOBS_BY_ORGANIZATONS getter that filters our jobs to those with organizations that match the collection of selected organizations.

In this lesson, we use the FILTERED_JOBS_BY_ORGANIZATIONS getter to render the filtered jobs. However, we run into a bug when the page loads!

In this lesson, we fix the bug from the previous lesson by accounting for an empty selectedOrganizations array in the Vuex store state.

In this lesson, we update our failing JobListings component tests to utilize mock getters. We replace our old test setup which relied on a store state.

In this lesson, we add a test to confirm that JobFiltersSidebarOrganizations commits the right mutation when the user clicks a checkbox.

In this lesson, we use factory functions to refactor our JobFiltersSidebarOrganizations tests.

In this lesson, we finally deal with an imperfection that's been in our app for a while. We render the correct number of filtered jobs in the Subnav component.

In this lesson, we begin a refactor of our Vuex store by splitting its contents (constants, state, mutations, getters, and, actions) into separate files.

In this lesson, we update the corresponding tests for the files we split in the previous lesson.

In this lesson, we complete our refactor by updating component files that reference our Vuex store constants.

In this lesson, we review everything we've learned in this course section.

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

Welcome to the next user story! We'll allow the user to filters jobs by type. We'll have to support the existing logic for filtering by organization.

In this lesson, we use TDD to add a new selectedJobTypes property to Vuex store state.

In this lesson, we use TDD to create a ADD_SELECTED_JOB_TYPES mutation. It will receive an array of job types from an eventual component and save it to the Vuex store state.

In this lesson, we use TDD to add a new UNIQUE_JOB_TYPES getter.

In this lesson, we use TDD to add a new getter for filtering jobs by job types.

In this lesson, we use TDD to create a JobFiltersSidebarJobTypes component.

In this lesson, we add the new JobFiltersSidebarJobTypes component to our JobFiltersSidebar.

In this lesson, we confirm that our new FILTERED_JOBS_BY_JOB_TYPES getter correctly filters jobs.

In this lesson, we write a new getter that allows the user to filter jobs by both organization and job types.

In this lesson, we attempt to add the FILTERED_JOBS getter to our JobFiltersSidebar component but discover that it doesn't work!

In this lesson, we address the bug we discovered in our previous lesson by modifying our FILTERED_JOBS getter logic.

In this lesson, we introduce the syntax for getters with arguments. We create two new getters to determine whether a single job should be included by its organization or job type.

In this lesson, we add tests for the 2 new getters we created in the previous lesson.

In this lesson, we utilize the two new getters in the FILTERED_JOBS getter.

In this lesson, we fix the failing tests for our JobListings component.

In this lesson, we update the tests for our Subnav component to utilize the FILTERED_JOBS getter.

In this lesson, we perform some quick cleanup by removing the FILTERED_JOBS_BY getters.

In this lesson, we write an additional test for the FILTERED_JOBS getter.

In this lesson, we solve a visual user bug when the user filters for organizations/types on a later page of job results.

In this lesson, we complete solving the bug from the previous lesson.

In this lesson, we review everything we've learned in this course section.

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we reintroduce reactivity by exploring the concept in both Google Sheets and JavaScript.

In this lesson, we introduce Vue 3's new ref function. ref accepts an argument and wraps it in a reactive object with a value property.

In this lesson, we introduce Vue 3's new computed function. computed accepts a function that it re-executes whenever a referenced reactive value updates.

In this lesson, we provide another example of reactivity to reinforce the previous lessons' concepts.

In this lesson, we try passing a JavaScript object to the ref function.

In this lesson, we introduce the reactive function, which is optimized to work with objects. JS objects support methods and properties, so the reactive function can utilize their existing plumbing. The advantage of reactive is that we do not need to use a value property.

In this lesson, we practice creating reactive objects with multiple properties.

In this lesson, we combine multiple computed function calls to see how a reactive value change cascades through multiple evaluations.

In this lesson, we discover an issue with reactivity when we destructure properties off a reactive object. The object is reactive (so it can track changes to itself) but an individual property is NOT reactive.

In this lesson, we introduce the toRef function to solve the problem of the previous lesson. toRef accepts a reactive object and the name of the property to destructure and make reactive.

In this lesson, we introduce the toRefs function, a more convenient solution than multiple toRef calls. The toRefs function accepts a reactive object and returns an object where all properties are reactive.

In this lesson, we clarify that the toRefs function can only accept a reactive object from Vue. We test what happens when we pass a plain object.

In this lesson, we review everything we've learned in this course section.

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we introduce Vue 3's Composition API and the problems with the Options API that it hopes to solve.

In this lesson, we start refactoring our Accordion component to use Vue 3's Composition API.

In this lesson, we reintroduce the ref function from the previous lesson and use it in the setup method to create a reactive object. We also provide the object to the template.

In this lesson, we practice using the ref function to create reactive state that tracks whether the Accordion is open.

In this lesson, we use the computed function to watch the value of the isOpen reactive object and recalculate when it changes.

In this lesson, we reincorporate our commented-out props section back into the Accordion component.

In this lesson, we start updating our ActionButton component to use the Composition API. We reveal that Vue provides a reactive props object as the first argument to the setup method. We use the props to generate a computed buttonClass for the button.

In this lesson, we use the toRefs function to create an object with reactive properties from the reactive props object. We then use it to customize the CSS class object we return in the ActionButton component.

In this lesson, we review everything we've learned in this course section.

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we start refactoring our JobSearchForm component to use Composition API. We start by replacing former data with new ref values.

In this lesson, we use the useRouter function to replace this.$router in our Composition API.

In this lesson, we fix failing JobSearchForm tests by replacing the mocking of this.$router with the mocking of useRouter.

In this lesson, we start refactoring the Subnav component to use the Composition API. We utilize the useRoute composable function from vue-router to replace the former reference to this.$route.

In this lesson, we continue refactoring the Subnav component to use the Composition API. We utilize the useStore composable function from vuex to replace the former reference to this.$store.

Our Subnav tests are failing due to their reliance on this.$store and this.$route. We can now mock out the respective useStore and useRoute functions to get the tests passing.

In this lesson, we extract the logic for checking a route name to a new useConfirmRoute composable. We use familiar Vue 3 constructs like computed to enable reactivity.

In this lesson, we write a test for our useConfirmRoute composable. We mock out the useRoute function from Vuex and test the return value.

Our Subnav tests are utilizing our useRoute mock. For unit testing, this might be a step too far. In this lesson, we mock out our useConfirmRoute composable instead.

In this lesson, we write a new useFilteredJobs composable function to access the FILTERED_JOBS getter on our Vuex store.

In this lesson, we mock out the useFilteredJobs composable function in our Subnav tests.

In this lesson, we write two new composable functions to access getters on the Vuex store.

In this lesson, we utilize the useUniqueJobTypes getter composable in our JobFiltersSidebarJobTypes component.

In this lesson, we discuss how to replace our former mapMutations code in JobFiltersSidebarJobTypes. The helper function can be replaced with a call to store.commit. We can access the store via the useStore composable from Vuex.

In this lesson, we fix failing tests for our JobFiltersSidebarJobTypes component. We mock out our useUniqueJobTypes, useStore, and useRouter composable functions with whatever individual tests require.

In this lesson, we refactor our JobFiltersSidebarJobOrganizations component based on previously discussed Vue 3 principles.

In this lesson, we fix the failing tests for JobFiltersSidebarOrganizations component by taking inspiration from JobFiltersSidebarJobTypes.

The JobFiltersSidebarJobOrganizations and JobFiltersSidebarJobTypes components are very similar, which is why the refactor process was nearly identical. Let's create a reusable JobFiltersSidebarCheckboxGroup component to replace them.

In this lesson, we use the new JobFiltersSidebarCheckboxGroup to replace the former components in our JobFiltersSidebar.

In this lesson, we add a test suite for the JobFiltersSidebarCheckboxGroup component.

In this lesson, we review everything we've learned in this course section.

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we learn the Composition API's replacement for lifecycle hooks. Instead of defining methods, we import functions from vue and invoke them in the setup method.

In this lesson, we start refactoring our JobListings component to utilize the Composition API. We start by replacing the mounted logic.

In this lesson, we reuse our useFilteredJobs getter to get access to the store's filtered jobs in our JobListings component. Composable functions are valuable because of their reusability.

In this lesson, we continue replacing the old Options API implementation in the JobListings component. We use Vue'x computed function to generate the currentPage, previousPage, and nextPage values.

In this lesson, we extract the logic of figuring out the current page to a new useCurrentPage composable.

In this lesson, we move the logic of figuring out the previous and next page to a new composable. It returns an object of computed properties.

In this lesson, we add tests for the two composables we wrote in the previous lesson.

In this lesson, we add a useFetchJobsDispatch composable that dispatches an action to the Vuex store.

In this lesson, we start fixing the failing tests for the JobListings component. We import and mock out our composable functions, then fix the first test.

In this lesson, we continue fixing failing tests. We also get to remove a few tests that are no longer needed.

In this lesson, we finish fixing the failing tests for the JobListings component. We focus on the tests dealing with the Previous and Next page links.

In this lesson, we update the JobListing component to utilize the Composition API.

In this lesson, we review everything we've learned in this course section.

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

Welcome to TypeScript! In this lesson, we introduce the programming language and the benefits it offers us as developers.

In this lesson, we explore how to declare types for primitive values (strings, numbers, booleans, etc) in TypeScript.

In this lesson, we see how TypeScript auto-infers types based on initial assignments.

In this lesson, we introduce the any type, which tells TypeScript that a value can be of any type. We discuss the drawbacks of this type and the situations where we might use it.

In this lesson, we show how the unknown type is a better choice than any because it forces us to write more careful code.

In this lesson, we learn how to declare array types in TypeScript.

In this lesson, we learn how to declare object types in TypeScript. We have to communicate both the object's properties and their types. Avoid the general object type as it is too broad.

In this lesson, we introduce type literals. A type literal is a type that represents a single value and nothing else.

In this lesson, we see how objects operate differently from primitives when it comes to type literals.

In this lesson, we learn how to use the ? symbol to mark optional properties in TypeScript.

In this lesson, we introduce interfaces, which allow us to create reusable object types.

In this lesson, we learn how to add type annotations for functions in TypeScript.

In this lesson, we declare an interface to serve as the type for a function.

In this lesson, we introduce generics. A generic is a type argument. It adds flexibility to our type annotations by not locking down a specific type.

In this lesson, we review everything we've learned in this course section.

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we use the Vue CLI to add TypeScript to our job search app. We also clean up some extra code that the process creates.

In this lesson, we define a Job interface that describes the shape of a sample Job object from the API.

In this lesson, we define a GlobalState interface that describes the shape of our Vuex store state.

In this lesson, we convert our constants.js file to be a TypeScript file.

In this lesson, we update our mutations file to be in TypeScript. We utilize our GlobalState interface to describe the state flowing into every mutation method.

In this lesson, we discuss how we can solve TypeScript's demands for complete GlobalState objects in our mutations tests.

In this lesson, we discuss an alternate solution for providing GlobalState objects in our Vuex mutations tests.

In this lesson, we introduce TypeScript's Partial type. Partial accepts an interface and returns a new interface where all original properties are optional.

In this lesson, we add a createState factory function to get ideal setup in our mutations tests.

In this lesson, we add a createJob factory function to create sample job objects for our mutations tests.

Now that we've figured out great solutions to generating valid state and Job objects, we fix the remaining tests for our mutations.

In this lesson, we start converting our getters file to TypeScript.

In this lesson, we complete converting our getters file to TypeScript. We also discuss an interesting issue around adding types for our getters (second argument to a getter method).

In this lesson, we create a new utils.ts file to store our createJob and createState factory functions.

In this lesson, we update our getters test file to use our helper functions.

In this lesson, we update our Vuex actions file to use TypeScrpt.

In this lesson, we discuss how to reconcile issues between Jest and TypeScript. TS does not understand that jest.mock replaces the implementation of an object, so we have to explicitly cast our mock to jest.Mock.

In this lesson, we update our Vuex store composables to utilize TypeScript.

Now that we've updated our composables to TypeScript, we update the corresponding test file.

One more Vuex file to go! In this lesson, we update our src/store/index file to TypeScript.

In this lesson, we review everything we've learned in this course section.

Download the project code as it stands at the end of this section. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we add TypeScript to the MainNav component.

In this lesson, we add TypeScript to the Headline component.

In this lesson, we add TypeScript to the Accordion component. This is our first opportunity to use TypeScript in a Composition API component.

In this lesson, we add TypeScript to the ActionButton component.

In this lesson, we discuss how to annotate Event objects from user events with TypeScript.

In this lesson, we add TypeScript to the HeaderContainer component.

In this lesson, we add TypeScript to the Subnav component.

In this lesson, we add TypeScript to our composable functions, starting with useConfirmRoute and useCurrentPage.

In this lesson, we add TypeScript to our final composable function, usePreviousAndNextPages.

In this lesson, we add TypeScript to the Spotlight component.

In this lesson, we add TypeScript to the getJobs API call.

In this lesson, we add TypeScript to the JobListing component.

In this lesson, we add TypeScript to the JobListings component.

In this lesson, we add TypeScript to the JobFiltersSidebar component.

In this lesson, we add a new test suite for our JobFiltersSidebar component.

In this lesson, we add TypeScript to the JobFiltersSidebarCheckboxGroup component.

In this lesson, we add TypeScript support for our Vuex store inside components. The process involves defining a key that we hook up to the store. We also have to import the key and pass it to the useStore composable wherever we use it.

In this lesson, we add TypeScript to the tests for the JobSearchForm component.

In this lesson, we add TypeScript to our nextElementInList helper function.

In this lesson, we add TypeScript to the Hero and App components.