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

In this video CJ gives a crash course in building front-end applications with Vue.js - he covers state management, components, scoped styles, form state, dom events, emitting events from child components, listening for events in parent components, defining / passing props, rendering lists and more!

View the code here: https://github.com/w3cj/vue-tasks-app

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!

🔥 Be the ~14,700th person to join our super tasty newsletter bit.ly/syntax_snackpack

All links available at https://syntax.fm/870
------------------------------------------------------------------------------
Hit us up on Socials!
Syntax: https://x.com/syntaxfm
Scott: https://x.com/stolinski
Wes: https://x.com/wesbos
CJ: https://x.com/CodingGarden
Randy: https://www.youtube.com/@randyrektor

http://www.syntax.fm

Brought to you by Sentry.io

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