Vue Masterclass (Covers Vue 2 and 3)
Loại khoá học: Web Development
Learn VueJS and build a complete real-world project using Vue, Pinia, TypeScript, TailwindCSS, Vitest, and more.
Mô tả
Welcome to the most comprehensive Vue course on Udemy!
The Vue Masterclass introduces you to the powerful VueJS library for building dynamic, reactive front end interfaces.
VueJS has taken the web development community by storm and is a fantastic technology to learn in 2023:
Vue has been used to built over 1,000,000 websites
Vue has over 200,000 stars on GitHub
Vue downloads on NPM have doubled year-over-year
Vue is used by leading tech companies like Netflix, Apple, GitLab, and Nintendo.
The best way to learn a technology is to create something with it. That's why the Vue Masterclass consists of a complete real-world project that we'll build together from scratch. I'll be coding alongside you from the very first line of code.
I believe this course is the closest I've come to capturing what it feels like to be a Vue developer on the job. We'll introduce and complete user stories, discuss tradeoffs of different technical approaches, summarize what we've learned at the end of each section, and more.
No prior experience with Vue (or any other front end library) is needed. Beginners are welcome!
The course starts with Vue basics and progresses to advanced Vue concepts including:
Creating Vue components
Styling Vue components
Using Vue directives to compose dynamic interfaces
Passing props between components
Emitting events
Routing our user from page to page
Testing Vue components
and more!
Throughout 50+ hours of video content, we'll cover numerous aspects of the Vue ecosystem including:
Vue (including both the Options API from Vue 2 and the new Composition API in Vue 3)
Pinia for global state management
Vue Router for navigating the user across pages in our application
Testing with Vue Testing Library and Vitest
Scaffolding Vue applications with Create Vue
Styling components with Tailwind CSS
Adding type checking with TypeScript
Linting our code with ESLint
Formatting our code with Prettier
and more!
Another aspect that makes the course special is its emphasis on testing. We'll discuss how to unit test our Vue applications using the Vitest and Vue Testing Library packages. We'll also walk through various testing methodologies, including test-driven development (TDD).
Vue Masterclass offers you an incredible, comprehensive introduction to the powerful Vue library. I'm super excited to build this project together with you and I can't wait to see you in the course!
Bạn sẽ học được gì
Build a complete, real-world Vue application using Vue, Pinia, Vue Router, and more
Master modern front end technologies like TailwindCSS, TypeScript, and Prettier
Use Vitest and Vue Testing Libary to write unit tests for all elements of the Vue ecosystem
Learn best practices for Vue component design
Covers both Vue 2's Options API and Vue 3's Composition API
Yêu cầu
- HTML
- CSS
- JavaScript (ES6 features)
- Terminal
Nội dung khoá học
37 sections
Course Overview
08:52
Introducing our Project (Careers Site)
06:49
BONUS: Vue 2 vs. Vue 3
04:48
BONUS: Vue vs. React vs. Angular
09:07
Technical Requirements
00:37
Install Google Chrome
01:07
Install Git
00:58
Node Setup for macOS Users
00:34
Install Node
01:27
Install VSCode
00:51
Install VSCode Extensions
01:06
Asking Good Questions
01:03
Use Create Vue to Initialize Vue Project
07:15
Configuring the App: VSCode
05:12
Configuring the App: ESLint
03:59
Hot Reloading
03:32
Project Structure
14:16
Mounting the Vue App
07:12
The @ Symbol for src Directory
02:10
The Parts of a Vue File
07:43
Cleanup, Cleanup
04:05
More on Components
06:29
Install Dev Tools
06:31
Section Review [SLIDES]
06:07
Code at End of Section 2
00:21
Targeting by HTML Element or CSS Class
05:09
The scoped Attribute
04:09
A Little Housekeeping
02:04
Section Review [SLIDES]
01:13
Code at End of Section 3
00:21
Introduction to Tailwind CSS
05:54
Add Tailwind CSS to Project
08:16
BONUS: ES6 Spread Syntax for Arrays
06:25
Add Open Sans Font to Project
08:42
Try Out Tailwind Styles in App.vue
03:42
Install Tailwind CSS IntelliSense Extension
03:29
Install Prettier Plugin for Tailwind
03:40
Section Review [SLIDES]
02:50
Code at End of Section 4
00:21
User Story
02:04
Creating the MainNav Component
06:02
Rendering Child Component with the components Property
06:13
Different Ways to Render a Component
05:11
Update Tailwind Styles
06:49
CSS: Styling the MainNav Component
09:03
BONUS: JavaScript Objects, Properties, and Methods
12:12
Rendering Data to View I
07:00
Rendering Data to View II: Multiple Data Properties
05:55
Section Review [SLIDES]
02:36
Code at End of Section 5
00:21
Intro to Testing
16:05
Quick Fix for Testing Issues
00:21
The Basics of Vitest Syntax
11:10
Multiple Describe Blocks
09:32
Intro to Test-Driven Development (TDD)
12:05
Test-Driven Development In Action
08:00
Adding the —coverage Flag
08:01
Setup Vitest Globals
05:43
Quick Cleanup
00:53
Section Review [SLIDES]
05:27
Code at End of Section 6
00:21
Cleaning up App.vue
01:11
Fixes for Next Lesson
00:28
Setup Vue Testing Library
10:37
The render Function and screen Object
07:30
Our First Component Assertion
07:29
The Second Argument to render Function
06:21
Section Review [SLIDES]
04:51
Code at End of Section 7
00:21
The v-bind Directive I
05:57
The v-bind Directive II: Shortcut
02:33
CSS: Styling Navigation Items
04:56
The v-for Directive
08:46
The :key Attribute
07:06
Using Tailwind's First Child Utility Class
03:59
Review: The ES6 map Method on an Array
08:01
ARIA Roles [SLIDES]
10:28
Testing the v-for Directive
09:05
Install Testing Playground Extension
04:31
Section Review [SLIDES]
05:50
Code at End of Section 8
00:21
User Story
02:11
Create ActionButton Component
04:37
CSS: Styling ActionButton
02:20
Add Custom Box Shadow to ActionButton
03:30
Create ProfileImage Component
06:33
Conditional Rendering with the v-if Directive
06:05
The v-else Directive
05:57
Adding Methods to Vue Component
02:22
The v-on Directive I: HTML Element
03:58
The v-on Directive II: Shortcut
02:14
The Event Object
04:16
Overwriting Component Data in a Method
06:27
The queryBy Methods from Vue Testing Library
13:05
The userEvent Library
09:48
Section Review [SLIDES]
09:45
Code at End of Section 9
00:21
User Story: Multiple Buttons
03:39
Independent Components
02:54
Intro to Props
07:52
The Tailwind @apply Directive
05:39
Adding v-bind to class Attribute
05:02
Adding Slice of Data for Dynamic Class
03:36
Intro to Computed Properties
11:13
Computed Properties for Class Object
05:38
Adding New Blue Color to Tailwind Config
01:19
Adding Secondary Button Style
05:01
Passing in Props for Style
09:47
Adding a type Prop
06:12
BONUS: ES6 Review: Dynamic Object Keys
04:09
Refactoring the type Prop
03:22
Testing CSS Classes
10:51
Updating Prop Validation in ActionButton
08:05
Custom Prop Validation with the validator Function
06:33
Section Review [SLIDES]
07:34
Code at End of Section 10
00:21
User Story: Subnav
02:52
Create TheSubnav Component
03:34
Styling TheSubnav Component
02:00
Install FontAwesome
03:27
Register Global Components
06:45
Use FontAwesome Icon in TheSubnav
05:01
Conditionally Render TheSubnav
01:57
Using TDD for v-if Directive for Jobs Page
11:32
Fixing Test Warnings in TheSubnav and MainNav
08:17
Using Helper Function in MainNav Test
03:30
Section Review [SLIDES]
03:19
Code at End of Section 11
00:21
User Story
02:10
Create TheHero.vue Component
05:23
Dynamically Adjust Height of Header
10:41
CSS: Style TheHero Component
02:27
Introducing CSS Grid
03:40
Apply CSS Grid to TheHero
04:42
Introduction to Vue Lifecycle Hooks - Lifecycle Methods
06:36
REVIEW: The setTimeout, setInterval and clearInterval Functions
11:48
Using the created Lifecycle Hook
04:05
Changing the Action Verb in TheHeadline
13:04
CSS: Style Action Verb
06:08
CSS: Fix Styles of Primary Header
02:04
CSS: Fix Styles of Secondary Header
00:43
Refactor Font Color Class Selection
02:28
Microphone Update
00:15
Moving Interval Function Logic Out of Component
11:57
Adding Function to Headline Component
01:42
Intro to vi.fn() Function
08:00
Tests for TheHeadline Component
10:10
More Tests for TheHeadline Component
07:39
Fixing Error in Next Lesson
00:30
Even More Tests for TheHeadline Component
04:01
The beforeEach and afterEach Functions
04:03
Section Review [SLIDES]
11:18
Code at End of Section 12
00:21
User Story
01:30
Add New Colors to tailwind.config.js
01:06
Create JobSearchForm Component
04:02
Add Bottom Margin to TheHeadline
00:53
CSS: Styling JobSearchForm I
03:50
CSS: Styling JobSearchForm II
11:05
Binding Component Data to Form Input
06:29
Binding Form Input to Component Data
08:47
Two-Way Data Binding with v-model Directive
04:35
Image Link for Next Lesson
00:09
Add Vue Image in Grid
02:49
Refactor I: Isolating Navigation Components
04:20
Refactor II: Isolating JobSearch Components
03:20
Refactor III: Isolating Shared Components
02:13
Section Review [SLIDES]
03:21
Code at End of Section 13
00:21
Creating Reusable TextInput Component
05:09
Using TextInput in JobSearchForm
05:12
Emitting an Event from a Component
05:49
Listing to Emitted Messages
04:45
Overwriting Parent Data from Emits
03:33
Inline Overwriting
03:59
Improving Our Design
09:56
The v-model Directive on Component
03:56
The emits Key
03:22
Testing Event Emission
11:33
Section Review [SLIDES]
07:13
Code at End of Section 14
00:21
User Story
02:06
Install Vue Router
02:23
Writing the Router File
11:59
The router-view Component
04:31
The router-link Component
05:56
Keep MainNav Constant, Dynamically Render Component
02:19
Adding Content to Home Page
01:17
Accessing this.$route
03:58
Accessing this.$router
02:45
Navigating with router.push Method
03:28
Adding a <router-link> Item to MainNav
05:01
Fixing Warnings with the RouterLinkStub Component
05:25
Section Review
06:05
Code at End of Section 15
00:21
User Story
01:11
Adding <router-link> to Main Menu
05:14
The mocks Property for render Function Config
13:05
Fixing MainNav Tests
03:03
Using Factory Functions for TheSubnav Tests
05:10
Creating Page for Individual Job
06:57
Display the Route ID Dynamically
03:56
BONUS: Review: Query Params
04:51
Navigating to Job Results Page when Submitting Form
08:17
Testing JobSearchForm Form Submission
19:03
Section Review [SLIDES]
05:19
Code at End of Section 16
00:21
User Story
00:57
Create JobFiltersSidebar Component
03:34
Create JobListings Component
02:00
CSS: Styling JobFiltersSidebar and JobListings Components
03:13
Extend Tailwind with New Boxshadow Option
01:19
CSS: Adding Job Title and Location to a Job Listing
06:37
CSS: Adding Job Qualifications to Job Listing
04:38
Extracting JobListing to Separate Component
03:00
Section Review [SLIDES]
02:13
Code at End of Section 17
00:21
Install JSON Server
03:12
Create Our Jobs Data
06:01
Making Jobs Request in Browser
03:11
Install Axios NPM Package
05:41
Making Axios Request for Jobs in JobListings Component
05:58
REVIEW: async/await Syntax
07:07
Use async/await Syntax to Fetch Jobs
01:36
Render JobListing in JobResults
04:35
Compute Dynamic Job Page
04:13
Update Job Listing to Render Job’s Data
05:40
Testing the JobListing Component
07:11
Refactoring JobListings Test
09:33
More Tests for JobListing Component
05:22
Mocking a Module with Vitest
08:26
Create First Tests for JobListings Component
15:50
Section Review [SLIDES]
07:50
Code at End of Section 18
00:24
User Story
02:11
REVIEW: The slice Method
05:18
Display only the First 10 Jobs
06:09
Dynamic Pagination
09:34
Fixing Failing JobListings Component Tests
04:46
Refactor JobListings Component Tests
05:06
Displaying Page Number at Bottom of Job Listings
04:45
Wiring Up Computed Properties for Next and Previous Page
04:48
Rendering the Previous and Next Page
06:56
Scrolling to Top on Params Change
03:48
Adding Tests for Page Number
05:06
More Tests for JobListings Component
08:48
Fixing the Bug
09:52
Adding More Tests for JobListings Component
05:00
Environment Variables in Vite
20:11
Section Review [SLIDES]
06:40
Code at End of Section 19
00:24
What is Pinia?
07:58
Install Pinia Dependency
00:39
Register Pinia Store
01:54
Creating a Pinia Store
05:42
Add First Store Action
02:51
Adding Tests for Pinia State and Actions
08:34
Reading from Pinia Store in Component with mapStores Function
08:36
Writing to Pinia Store in Component
02:46
Interacting with Pinia Store in Dev Tools
04:28
Install Pinia Testing Library
02:03
Fixing our Failing MainNav Tests
09:57
A Second Testing Option
08:57
The mapState and mapActions Functions
07:06
Section Review [SLIDES]
08:36
Code at End of Section 20
00:24
Intro to the Section
02:01
Review of vi.mock and Building out API Call
03:51
TDD: Adding Test for Jobs API Call I
05:50
TDD: Adding Test for Jobs API Call II
06:24
TDD: Adding Test for jobs State
07:46
TDD: FETCH_JOBS Action
14:04
Dispatching Action from Component to Fetch Jobs
10:15
Fixing Tests for JobListings Component
12:45
Section Review [SLIDES]
03:51
Code at End of Section 21
00:24
User Story
02:25
CSS: Adding Initial Styles for JobFiltersSidebar Component
05:12
Update Font Awesome Icons
02:03
Create CollapsibleAccordion Component
02:12
CSS: Styling CollapsibleAccordion Component
11:33
Introduction to Slots
07:30
Render Custom Content in Slot
05:27
Slots and Props
04:38
Writing Test for Slots
10:40
Fallback Content for Slots
03:08
Adding Tests for Fallback Slot Content
03:08
The Usual Refactor
04:23
Extracting Organizations Accordion to New Component
04:56
Section Review [SLIDES]
03:47
Code at End of Section 22
00:24
User Story: Building a Reusable Header
03:49
Named Slots I
03:39
Creating TeamsView Page
03:41
Named Slots II
04:31
Default Slot
02:11
Testing Named Slots
04:00
Named Slots Shorthand
01:47
Section Review [SLIDES]
02:44
Code at End of Section 23
00:24
User Story
04:08
JSON Content for db.json File
00:10
Adding spotlights Endpoint
02:52
Create SpotLight Component
13:00
Render SpotLight Component
12:31
Alternative Render of Data
03:10
Passing Multiple Props from Scoped Slot
02:56
Object Destructuring with Scoped Slots
01:19
Testing Scoped Slots
10:04
Refactoring Test Suite
05:05
Section Review [SLIDES]
04:32
Code at End of Section 24
00:24
User Story
00:51
Review of JavaScript Sets
05:27
Intro to Getters
07:59
Testing Pinia Getters
06:19
Wire Up UNIQUE_ORGANIZATIONS Getter in JobFiltersSidebarOrganizations
05:17
Use v-for to Render Unique Organizations in JobFiltersSidebarOrganizations
04:17
Testing Getters in JobFiltersSidebarOrganizations
12:03
Add v-model to Checkbox for Organizations
04:31
The v-on:change Handler
03:41
TDD: Add selectedOrganizations Property to Pinia Store State
02:58
TDD: Create ADD_SELECTED_ORGANIZATIONS Action
04:14
Dispatch Action to Add Organizations from JobFiltersSidebarOrganizations
06:38
BONUS: REVIEW: filter Method on an Array
07:56
TDD: Adding Getter to Filter Jobs by Organization
12:29
Rendering Filtered Organization Jobs in JobListings Component
07:09
Fixing FILTERED_JOBS_BY_ORGANIZATIONS Getter Bug
07:03
Adding Test for JobFiltersSidebarOrganizations Checkbox Interaction
07:11
Refactoring JobFiltersSidebarOrganizations Test
04:30
Displaying Accurate Number of Filtered Jobs
12:49
Section Review [SLIDES]
04:49
Code at End of Section 25
00:24
User Story
02:28
TDD: Adding State for Job Types
01:56
TDD: Adding Action for Selecting Job Types
02:31
TDD: Adding Getter for Unique Job Types
05:41
TDD: Adding Getter for Filtered Jobs by Job Types
07:14
TDD: New JobFiltersSidebarJobTypes Component
09:32
Wire up Job Type Filters in Sidebar
02:53
Filter for Job Types in Job Listings
04:13
Allow User to Apply Multiple Filters
06:26
Use New Getter in JobListings Component
01:43
Fixing New Bug
07:18
Getters with Arguments
15:42
Tests for Getters with Arguments
07:05
TDD: Updating TheSubnav Tests and Implementation
03:05
Delete Old Two Getters
01:53
Fixing Extra Bug I
12:10
Fixing Extra Bug II
03:54
Section Review [SLIDES]
02:41
Code at End of Section 26
00:24
What is reactivity?
07:46
Vue’s ref Function
08:50
Vue’s computed Function
07:32
One More Example with Another Primitive
06:22
What about Object Reactivity?
05:52
Cleaning up the Code with reactive Function
06:37
Multiple Properties on Reactive Object
03:32
Multiple Levels of Reactivity
05:20
Destructuring Problems
02:58
The toRef Function
05:02
The toRefs Function
05:38
A Clarification on toRefs
01:34
Section Review [SLIDES]
06:27
Code at End of Section 27
00:24
Introduction to the Composition API
07:58
The setup Method
04:16
The ref Function in setup Method
07:36
More Practice with ref
04:12
The computed Function
03:39
Accepting Props in Component
03:37
Checking in on Test Suite
01:42
Accepting Props in Setup Method
05:34
Using toRefs on Props
04:24
The new script setup Syntax
05:07
More Practice with the script setup Syntax
02:23
Section Review [SLIDES]
06:24
Code at End of Section 28
00:24
Composition API with Vue Router
08:55
Fixing Failing JobSearchForm Tests
04:37
Composition API with Route
03:00
Composition API with Pinia Getters
04:27
Fixing Failing Tests for TheSubnav
04:12
Fixing Failing Tests for MainNav
03:13
Refactoring JobFiltersSidebarJobTypes
06:47
Fixing JobFiltersSidebarJobTypes Tests
04:46
Refactoring JobFiltersSidebarJobOrganizations Component
04:34
Fixing Failing JobFiltersSidebarOrganizations Tests
02:52
Creating Reusable JobFiltersSidebarCheckboxGroup Component
10:14
Reuse JobFiltersSidebarCheckboxGroup
10:44
Adding Tests for JobFiltersSidebarCheckboxGroup
13:37
Section Review [SLIDES]
04:13
Code at End of Section 29
00:24
The onMounted Function
04:55
Refactoring JobListings Component to Use Composition API
09:56
Fixing Failing JobListings Tests
05:51
One More Update to JobListings Tests
08:12
Extracting Previous and Next Page Logic to Composable Function
08:43
Add Composables to Component
07:39
Adding Tests for usePreviousAndNextPages Composable
06:54
Updating JobListing Component
02:42
Section Review [SLIDES]
03:49
Code at End of Section 30
00:24
Welcome to TypeScript [SLIDES]
08:43
Primitive Types
08:16
Type Inference
04:06
The any type
02:40
The unknown Type and Type Guards
08:48
Array Type Declarations
04:45
Object Type Declarations
07:31
Type Literals
04:22
Type Literals and Objects
04:58
Optional Properties
04:43
Interfaces and Types
08:21
Declaring Types for Functions
05:36
Interfaces for Functions
06:00
Intro to Generics
11:45
Section Review [SLIDES]
07:00
Code at End of Section 31
00:24
tsconfig.json for Next Lesson
00:24
Install TypeScript for Vue
11:28
Create Job Interface
03:41
Update getJobs API Call
08:47
Updating Test File for getJobs
05:44
Define Types for User Store
03:31
Define Types for Jobs Store
06:58
Update Jobs Test File to TypeScript I
02:35
Update Jobs Test File to TypeScript II
04:48
TypeScript’s Partial Type
04:49
Create Factory Function for Jobs Test File
09:29
Update Utils Files to TypeScript
04:46
Adding Types to Composables
06:00
Section Review [SLIDES]
05:39
Code at End of Section 32
00:24
Adding Type Annotations to ProfileImage Component
06:45
Adding Type Annotations to MainNav Component
07:47
Adding Type Annotations to TheHeadline Component
07:30
Adding Type Annotations to CollapsibleAccordion Component
01:21
Adding Type Annotations to ActionButton Component
01:50
Annotating Event Handlers
07:04
Adding Type Annotations to HeaderContainer Component
00:56
Adding Type Annotations to TheSubnav Component
04:09
Annotating Axios Requests (SpotLight Component)
04:49
Adding Type Annotations to JobListing Component
09:04
Adding Type Annotations to JobListings Component
04:30
Adding Type Annotations to JobFiltersSidebar Component
00:58
Adding Type Annotations to JobFiltersSidebarCheckboxGroup Component
06:50
Adding Type Annotations to JobSearchForm Component
01:08
Adding Type Annotations to TheHero and App Components
01:03
Annotating Our Views
02:27
Updating User Store and Setup Test File
02:25
Section Review [SLIDES]
05:23
Code at End of Section 33
00:24
User Story
01:23
JSON Content for db.json File
00:12
Adding /degrees Endpoint to db.json
02:48
TDD for API Call: getDegrees API Call
05:15
An Alternative Syntax for Pinia Stores
10:11
TDD for Action: FETCH_DEGREES
09:32
TDD for Getters: UNIQUE_DEGREES
09:16
TDD for State: selectedDegrees
02:26
TDD for Getters: INCLUDE_JOB_BY_DEGREE
06:50
Updating FILTERED_JOBS Getter
01:24
TDD for Actions: ADD_SELECTED_DEGREES
02:58
Updating JobFiltersSidebar Component
05:22
Fetch Degrees when JobListings Loads
05:36
Trying Out Code in Browser
02:15
Section Review [SLIDES]
02:43
Code at End of Section 34
00:24
User Story
01:18
TDD for CLEAR_USER_JOB_FILTER_SELECTIONS Action
05:03
Refactor User Store to new Pinia Syntax
07:28
Wiring up Click Handler In JobFiltersSidebar
03:36
The Pinia $onAction Method
08:45
Refactoring CollapsibleAccordion Component
07:00
Add Tests for Action Side Effect
13:26
Breaking JobFiltersSidebar Into Smaller Components
08:45
Creating JobFiltersSidebarPrompt Component
03:25
Adding Tests for JobFiltersSidebarPrompt Component
04:39
Section Review [SLIDES]
02:47
Code at End of Section 35
00:24
User Story
03:41
Create Component to Track Skills and Qualifications
03:38
Add New Search Term to Pinia State
01:47
Add Action to Update Skills Search Term
02:51
Filtering the Jobs by Search Term
06:48
Two More Tests for INCLUDE_JOB_BY_SKILL Getter
06:42
Wiring up Search State to Pinia Store
09:51
The lazy Input Modifier
04:48
The trim Input Modifier
02:59
Adding Tests for JobFiltersSidebarSkills Component
13:35
Clearing the Search Input when Clearing Filters
03:10
Reading Search Term from Params
07:06
Section Review [SLIDES]
04:25
Code at End of Section 36
00:24
Congratulations
01:17
Complete Slide Decks
00:03
Viết Bình Luận
Khoá học liên quan
Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!
Get khoá học giá rẻ ngay trước khi bị fix.
Đánh giá của học viên
Bình luận khách hàng