Vue Masterclass (Covers Vue 2 and 3)
Learn VueJS and build a complete real-world project using Vue, Pinia, TypeScript, TailwindCSS, Vitest, and more.
Learn VueJS and build a complete real-world project using Vue, Pinia, TypeScript, TailwindCSS, Vitest, and more.
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!
Khu vực Câu hỏi thường gặp trống
Course Overview
Xem trướcIntroducing our Project (Careers Site)
Xem trướcBONUS: Vue 2 vs. Vue 3
Xem trướcBONUS: Vue vs. React vs. Angular
Xem trướcTechnical Requirements
Xem trướcInstall Google Chrome
Xem trướcInstall Git
Xem trướcNode Setup for macOS Users
Install Node
Install VSCode
Install VSCode Extensions
Asking Good Questions
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
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
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
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
HTML
CSS
JavaScript (ES6 features)
Terminal
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
1.0
0 Học viên
105 Khóa học
1252 Đánh giá
Xin chào các bạn, tôi là Nguyễn Đình Cường, một lập trình viên và giảng viên đam mê công nghệ với hơn 15 năm kinh nghiệm trong ngành công nghiệp phần mềm. Tôi tốt nghiệp từ Bưu Chính Viễn Thông và đã từng làm việc cho một số công ty công nghệ hàng đầu như FPT Software và VinGroup. Với chuyên môn chính là phát triển ứng dụng web, tôi đã làm việc với nhiều công nghệ như HTML, CSS, JavaScript, React cho front-end và Node.js, Express, MongoDB cho back-end. Không chỉ dừng lại ở việc viết mã, tôi còn yêu thích tìm hiểu sâu về thiết kế hệ thống và kiến trúc phần mềm. Tôi tin rằng quá trình học lập trình không chỉ đơn thuần là lý thuyết, mà còn là sự trải nghiệm thực tế và giải quyết vấn đề. Trong các khóa học của mình, tôi cố gắng cung cấp cho học viên những bài giảng thú vị và dễ hiểu, cùng với các bài tập thực hành giúp củng cố kiến thức. Tôi hy vọng rằng qua các khóa học của mình, bạn sẽ không chỉ học được cách viết mã, mà còn phát triển tư duy lập trình và kỹ năng giải quyết vấn đề. Hãy cùng nhau khám phá thế giới lập trình và biến ý tưởng của bạn thành hiện thực! Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại liên hệ với tôi. Tôi rất vui được hỗ trợ bạn trong hành trình học tập của mình!
Xem chi tiết