Vue.js Crash Course 2024

HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript

Express Crash Course

Next.js 14 Course Release With Promo

3 Hour crash course of the Vue.js framework. You will learn all the fundamentals including components, directives, lifecycle, events and much more.

Check Out Our Sponsor Daily.dev:
https://daily.dev/traversy-media

Full Project Code:
https://github.com/bradtraversy/vue-crash-2024

Blog Post:
https://www.traversymedia.com/blog/vue-crash-course

Check Out My Courses:
https://traversymedia.com

Timestamps:
0:00 - Intro
2:19 - Daily.dev Sponsor
3:11 - What is Vue.js?
4:45 - Prerequisites
6:17 - Role of Frontend Frameworks
8:40 - Why Vue.js?
11:14 - Vue Components
13:39 - Getting Setup
15:40 - Using The Vue CDN
20:54 - Create-Vue Setup
22:30 - Vue Official Extension
22:58 - Exploring Folders & Files
26:10 - Boilerplate Clean Up
26:50 - Component Structure
27:25 - Options API data() & Interpolation
28:36 - v-if, v-else & v-else-if Directives
30:43 - v-for Directive & Looping
32:17 - v-bind Directive
33:36 - v-on Directive, Events & Methods
35:55 - Composition API - Long Form
39:08 - ref() & Reactive Values
40:35 - Composition API Short Form
42:41 - Forms & v-model
46:38 - Delete task
48:36 - Lifecycle Methods
49:50 - onMounted & Fetching Data
51:58 - Vue Jobs Project Start
52:26 - Tailwind CSS Setup
56:47 - Theme Files & Images
58:16 - Navbar Component
1:01:20 - Hero Component
1:02:30 - Props
1:04:57 - HomeCards & Card Container Component
1:10:20 - JobListings Component & JSON Data
1:16:47 - JobListing Component
1:20:53 - JobListings Limit & showButton Props
1:24:26 - computed() & Truncate Description
1:30:41 - PrimeIcons
1:32:35 - Vue Router & Home View
1:39:52 - Jobs View
1:41:55 - RouterLink
1:46:07 - Navbar Active Link
1:50:42 - Not Found Page
1:56:27 - JSON Server REST API
1:59:50 - Fetch Data For JobListings
2:03:42 - reactive() Function
2:05:15 - JobListings Refactor To reactive()
2:07:26 - Vue Spinner
2:09:50 - Fetch Single Job & Display Data
2:19:06 -BackButton Component
2:21:03 - Proxying
2:23:54 - Add Job Page
2:32:20 - Save Job POST
2:37:15 - Toast Notifications
2:40:08 - Delete Job
2:44:14 - Edit Page
2:47:06 - Fetch Job To Edit
2:50:58 - Update Job
2:52:50 - Netlify Deployment