Modern Vue.js Crash Course 2025 | with TypeScript + script setup + Composition API

00:00 intro
01:47 create vue app with vite
04:18 vue templates are HTML with magic
04:33 component styles can be scoped
05:16 component script / state
06:14 vue dev tools
07:34 form input state
09:15 dom events
10:26 defining components
12:00 emitting events from child components
13:08 listening for events in parent component
14:01 reactive state with arrays
15:57 form reset / validation
19:18 list rendering
20:25 passing props to components
22:48 conditional rendering
24:05 updating state in child
24:53 modifying props is an anti-pattern
25:12 emit events instead of changing props
26:53 css class binding
27:59 computed state
30:02 remove elements from an array
32:11 vue transition group
33:58 filtering array by type
41:23 thanks!

------------------------------------------------------------------------------
Hit us up on Socials!

#vue #typescript #webdevelopment #webdeveloper #javascript #syntax #syntaxfm #webdev

[syntaxfm]

01:47 create vue app with vite
04:18 vue templates are HTML
04:33 component styles can be scoped
05:16 component script / state
06:14 vue dev tools
07:34 form input state
09:15 dom events
10:26 defining components
12:00 emitting events from child components
13:08 listening for events in parent component
14:01 reactive state with arrays
15:57 form reset / validation
19:18 list rendering
20:25 passing props to components
22:48 conditional rendering
24:05 updating state in child
24:53 modifying props is an anti-pattern
25:12 emit events instead of changing props
26:53 css class binding
27:59 computed state
30:02 remove elements from an array
32:11 vue transition group
33:58 filtering array by type

[lastink]

After years writing React, Vue looks more and more appealing.

[_the_one_]

Well I have 7+ years of experience with Vue and I rarely watch YT tutorials but when it's a tutorial from CJ, I have to watch it. Btw, if CJ is reading this, I would pay hundreds of dollars for a full-stack course with Nuxt made by CJ

[TheAlexLichter]

I'm a simple man - I see CJ and Vue content, I press like! 💚🙌

[hbrd]

Vue/Nuxt is my favourite combo – so good to see it get more exposure on Syntax!

[theintjengineer]

I'm a C++ SW Engineer learning some Web Dev for some personal stuff, so bear with me.
- I tried React, and it was a mess. I hated it. How do you people do this!!
- I tried Angular and loved its structure. I did some projects with it, but it's an overkill for my use cases. That's really for enterprise teams and projects😂.

Now, I just got into Vue.js, and this seems like the perfect sweet spot.
I'll definitely invest in learning [paired with Nuxt] and building some stuff with it.

Thanks, CJ.

Greetings from Germany.

[cleisonsantos]

I watched for 25 minutes, and I’ve never seen a clearer, more didactic explanation. Thank you for reminding me how simple Vue .js is compared to the alternatives.

[kodladagelmesendeolur]

Years of Angular and React experience here — and wow, Vue just clicked thanks to this video! Super clean, well-paced, and practical. Easily one of the best crash courses I've seen. Thank you CJ

[CsabaKissColorado]

Brilliantly done, CJ. Thank you! I'll link this video for people who are interested in Vue.

[devkasunlakshitha]

Love how you explain technical stuff. One of the best Vue crash courses!

[juque]

Dear CJ: I love your style; simple, direct, with attention to detail. I think you're a great educator. Thanks for this.

[DomBarnes]

CJ makes everything look so low effort yet simple to understand. Love working with Vue, feels naturally close to html without too many abstractions.
Great tutorial. Looking forward to the next steps!

[potatobink]

To avoid the props "declared variable unused" error you get in the editor, you could simply remove the "const props =" part and leave the rest of the defineProps declaration. You don't have to assign the props to a variable if you are not using them in the <script/> section of the SFC.

[RyanSmith-onwu]

This was brilliant. I listen to the podcast all the time, but I've never tried a tutorial. I'm a (very) recent career switcher, and all I've experienced is vanilla JS and React. Went to go watch the full-stack app video after hearing you and Wes talk about it on the podcast, but in the first 5ish min, you mention it would be good if you knew a little about Vue and Nuxt (which I don't...or didn't). I wasn't sure how this would go, but you explained things so well CJ. A great way to get a taster for Vue...now on to the Nuxt crash course and then the full shebang! Thanks so much.

[dually]

Big fan of this kind of tutorial. Can't wait for the Nuxt one!

[AdamChou-muow]

This is a very helpful video !!!
As a vue learner, I learned a lot of concept from this todolist task !!
Hope for more content and next video from CJ !!

[_maurodf]

This is Awesome!!!!
Thank you very much (and also for the upcoming Nuxt video)

Is wonderfull to have more Vue/Nuxt content!

[HimalGurung]

Despite working for few years using Vue and Nuxt, I came here for revision and it felt sooo good. Your explanations are amazing. Thank you.

[beeman-dev]

Thanks a lot CJ for this great tutorial! I've never touched Vue and it's been on my list to learn for a long time. This video and the upcoming Nuxt video will be my first steps! Thanks for sharing your knowledge!

[DillionMegida]

Thank you so much for this. After spending so many years in React, I decided to try out Vue. I've done that briefly in the past, but this was a good guide to get me familiar with a couple of fundamentals, for which I can transfer my knowledge from React.

I'd have loved if the "Composition API" was explained...since that it was in the title of this video, I don't remember hearing "composition" at any point and for someone like me from a different world, I couldn't make any sense of where the api was applied.

Thanks again for the video