Vue.js Crash Course 2024

Full Project Code:

Blog Post:

Check Out My Courses:

Timestamps:
0:00 - Intro
4:45 - Prerequisites
6:17 - Role of Frontend Frameworks
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

[SIDDIK-iwyk]

literally brad! i was thinking to start Vue this Year and firstly checked your channel and found Vue courses but these were old courses and noww!! thanks to you!

[moonradio-ca]

I was watching your old vue course. Good timing!

I have a site up and running, I let chatgpt do most of the setup and create a pretty decent initial template.

I had to fix some stuff using learning from this course but ai does pretty good!

[guptaaniketag]

This year is great.,
React Js, NodeJs, Express Js and now Vue Js .🎉
Thank You Brad
❤

[DanMlayah]

Just when i was checking your previous Vuejs crash courses, you came out with this. Thanks Traversy

[misterthirtyone]

It’s been a minute since I watched your other vue course! Ready to get refreshed!

[SniffleSneeze]

I'm so happy you're doing a Vue video ! love your way of teaching and your approach. Thanks so much for your contente !

[kennyfully]

I'm no longer a beginner, but I will say that you're one of the few tech channels that teaches quality skills while avoiding random drama. Thank you!

[TannerBarcelos]

I’ve been a full stack engineer professionally for 4 years, and excelled in web technology in my CS undergrad. All through React.

I don’t know where I’ve been all this time, but I was sucked into the React black hole and was too stubborn to ever branch out. Vue is so elegant, wow.

I am really intrigued by Svelte, but Vue seems to click even more

[ALI-llti]

I've been looking forward to this course so much, thank you for uploading it.

[lauralong]

nice timing. sadly I missed the Vue free weekend so this just made my day!! thanks for the update

[monoq_]

Hello Brad. I just bought your PHP course yesterday as a suppport on your channel. You are amazing man and after I completed it I will definitely watch this.

[shadullahsad]

Was searching new content for vue.js.. Just got from you.. Thanks a bunch❤🎉

[abhinavadarsh]

Thanks for the video!

Would love to see full videos on both Nuxt and unjs/nitro.

[irlWIKKO]

Thank you for taking the time to make this. There is a little update to your code: You won't need an import statement for defineProps anymore. VSCode says its part of a compiler macro now. Happy coding.

[kluzz]

This was a perfect refresher for someone who used to work with Vue, but haven't touched it in over five years. Well done! And the new composition API looks so much cleaner than the old options variety.

[Tunerini]

Thumbs up immediately I found this. I have been struggling with VueJs and I have no doubts in my mind that this, with a lot of practice, is going to get me there. Thank you Brad.

[BRBS]

2:24:10 haha, I can feel your pain. This was an excellent tutorial, although I thought maybe you could have squeezed in some Component Events and how emitting events work. But seeing how long this free course is already (and how short people's attention span are) I really can fault you. Excited for the Angular video. Thank you for all your content, really appreciate it!

[nimira]

It always feels like Christmas when you make these courses on YouTube or announce new courses on your website. Hope you've well and good.

[markwaters]

Thanks Brad. Very informative and easy to understand for someone like me, a newb to Vue!

[YTShortsRater]

Thanks for the great video, I just got a job/internship for a developer position. Was a little scared but your crash courses on Vue and React are super helpful