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

source