Alpine.js Crash Course

We will learn about all of the Alpine.js directives, properties as well as stores.
Code:
codepen.io/bradtraversy/pen/N...
👇 Website & Courses:
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Me On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
0:00 - Intro
2:02 - File Setup
3:41 - x-data & Components
4:15 - x-show
5:00 - x-cloak
5:52 - x-on & Events
7:26 - x-text
9:18 - x-transition
9:45 - x-effect
10:57 - x-bind
12:21 - x-model
14:22 - x-if
15:29 - x-for & Loops
17:03 - Manipulating State
18:36 - x-ref & $refs
21:04 - x-html
23:02 - $el
24:16 - $watch
25:59 - $dispatch
27:49 - $data
31:46 - Alpine Stores
37:59 - Mask Plugin

[@WebMentorDev]

Finally. I can complete my TALL Stack (Tailwindcss, AlpineJs, Laravel, Livewire). Thank you so much. Appreciate it as always :)

[@TheVertical92]

Now lets get to the SHORT Stack 😁

[@brhh]

@@TheVertical92 Svelte H.. Oracle R.. Typescript yeah we will need to work on that lol

[@gradientO]

@@brhh Hydrogen and React. Just mix 'em all

[@WebMentorDev]

@@TheVertical92 hopefully SHORT Stack will give me 7 digit salary 😂

[@EntyFu]

Have you tried bootstrap instead of tailwind? always wanted to try BALL stack

[@janzenfaidiban]

Your tutorial is always amazing. Easy to learn for everyone. Thank you Brad. Can't wait for another tutorial

[@th3ja]

Brad thanks for everything! First time trying out Alpine and I must say It's amazing!

[@chelseabing]

Absolutely enjoyed this video! This channel just never misses!

[@seanszukhent3313]

Brad is at it again! Was happy to see this after your Laravel course. Great work!

[@shaineelnayak3465]

Plain, Simple and Elegant this is awesome

[@kaderlakhdar5735]

Thank you brad , another video to add to my Brad playlist ❤️

[@younesmahmoud8543]

Thanks brad!!. Your tutorial is always amazing.

[@travholt]

This is very helpful! My brain likes to learn _that_ something can be done. I might not remember exactly _how_ later, but then I can look it up.

[@JoeEnos]

Great video. I love this pace, getting to see a ton of material in a short time, so I can be better prepared for a deeper dive.

[@nausiac]

I follow you since 6 years back from Mexico

[@CHRISCANHAMC4NH4M]

This is a refreshing tutorial and I was kept engage which is sometimes a problem of mine but this great. Very helpful for getting my head around Alpine for a TALL Stack. :D

[@YasinNabi]

this is one of the best videos I have just watched today... thanks for sharing ...

[@bobhafemeister9652]

Thanks Brad, loving alpine and htmx

[@bobbyiliev_]

Thank you Brad! You ar an absolute legend!

[@aramkeusgerian9618]

My prayers were answered :D Thanks a lot Brad!

[@viner1000]

Fantastic. Thanks as always, Brad!

[@JEsterCW]

Alpine is like jquery vue version, but more lightweight, but as powerful as vue. *My the most powerful stack combination is:* *- Alpine* *- HTMX* *- Lit* *- Tailwind* *- Express* I swear this is like the most hardest in the good way stack for building pretty powerful web apps without the whole boilerplate in react etc. I highly recommending this mix ;D

[@MarkVolkmann]

I would replace Node and express with Bun and Elysia.

[@deidyomega]

Replacing lit + express with Python + Django. I'm glad I can finally effectively write Python full stack.

[@maximumcockage6503]

On the off chance you read this comment, I'd suggest swapping Express and Node out with Hono and Bun.js. Hono and Bun are way faster than express. Elyisa is even faster than Hono and on par with Rust's Axum, but Hono's syntax is very similar to Express's so it's super easy to pick up.

[@Sium0239]

Absolutely amazing! Thank you a lot!

[@kaypakaipa8559]

The land of Javascript never stops giving! Tht said, I like this one, its like VueJs

[@dot6086]

I'm turning 20 today. I just want to say thank you so much brad for all your videos. I've been watching these videos since I was 18 and even though I had some prior knowledge into programming, your channel really helped me shape up into the developer I am today.

[@TraversyMedia]

Happy Birthday my friend. Thanks for sticking around. I really appreciate it and wish you the best. I am double your age and I would have loved to get started earlier.

[@ajaysdigitalart3320]

Very well explained ... Worth watching.. Good job👍👍👍

[@paulthomas1052]

Thanks. Another great introduction.

[@MotionInMotion1975]

This is incredible, you just fucked up my mind after working with Angular for 5 years....

[@nanonkay5669]

After seeing this, you have to do a tutorial on Alpine js, HTMX and templating

[@hithere5607]

Thank you, amazing tutorial!

[@BlueTeK]

Thank you for this nice crash course 🙏

[@TioJobs]

Nice video man! Thank you so much! 😍🚀

[@Fullflexno]

Will check this out! Cheers from Norway👍

[@kaderlakhdar5735]

Hilsen fra norge også 😁👍

[@Fullflexno]

@@kaderlakhdar5735 🔥

[@AbuAbdirohman]

Easy, Simple & Useful 👍

[@this.channel]

Cool, Alpine is my go to JS library.

[@DanFarfan]

Excellent. Thanks for sharing.

[@Rider0fBuffalo]

I have used knockout for years and was interested in alpine... It appears to be pretty much the same thing on the surface but instead of ko- use x-. Obviously there are some differences that alpine has that improve on ko so I am looking forward to using it on a static product pages. Good intro.

[@the6fallenangels596]

u taught me both tailwind and alpine👍

[@ferneyvilla7203]

Super!! Thank you very helpful

[@B3DFire]

Nice tutorial, watched the whole thing

[@nanobrains4982]

Thanks Mr.Brad!

[@nudecode]

As always great tutorial. Thanks Brad. Now for a full TALL Stack tutorial😜

[@mrsan385]

whats is TALL stack

[@giftjonas2447]

Thanks Brad 😃🙏🏽

[@safeerahmedfarooqi9193]

I was using livewire for the last 2 years but I was always afraid to use alpine in livewire.but after watching this tutorial I have better alpine understanding and now I am not afraid of using alpine with livewire components.great work brad. Keep it up.

[@rajeevprasad5836]

happy to see this video

[@mhmmdabrs6655]

awesome content 👌

[@dimitmoto1716]

Many thanks!!!

[@briankgarland]

Excellent!

[@aogunnaike]

Thanks Brad 😀 i knew alpine js was gonna come after the Laravel tutorial, I wanna suggest a landlord tenancy tutorial for Laravel on ur next course for Udemy. Thanks for all you do. cheers!

[@ajiteshmishra]

I throat that too

[@kr4k3n_289]

It's feel very similar to Vue and I love it.

[@hervenacitas8265]

Lately I’ve been thinking of buying cryptocurrency for retirement, I’ve set asides $350k to invest but along the line,I usually get cold feet, maybe because I have no idea what I’m doing, please I could really use some guidelines.

[@mduvens]

Yeah great tool for small/ medium projects

[@bashiruibrahim8443]

Thank you Sir

[@hyggedev2124]

Tailwind + AlpineJS = fun 😊

[@filiporkowski]

I will never use it but I will watch the entire video anyway.

[@mduvens]

Great stuff

[@anmarm.9487]

Finally..... I been waiting for this... When we will see advance AlpineJS? Things Like Building Custom reusable components, cross components communication, building something bit complex like Store Check out that communicate with server using Fetch API. Just suggestions 😅

[@dankogulsoy]

Awesome. Thanks

[@dev_jeongdaeri]

Yeah super cool! 🔥👨‍💻

[@AhmadReshadZazai]

Thank you.

[@repotranstech9614]

How about htmx.I have used it and it's pretty powerful.

[@maxwellkjr]

As someone who is currently learning Laravel, this tutorial will definitely come in handy!

[@maruf7956]

is learning laravel worth it

[@andywong2244]

@@maruf7956 yes

[@farhadbagheri5687]

really that was helpful

[@shwackthenoobsac]

This is pretty cool.

[@mustaphaab7127]

Hi Thanks a lot for that tutorial, i wished that you cover consuming api using alpine js Thanks again

[@ramigamal6637]

A grate video for a grate tool :)

[@salimedia33]

Thank you ;)

[@dot6086]

Brad three seconds into the video: *Introduces another framework Me: Another one? Brad: I can actually hear you sighing from here.

[@ITEducationPakistan]

Please make Vite Crash course for production build configuration that handles library-based syntax like JSX, Vue, and TypeScript. By using Rollup under the hood, Vite ensures performance optimization techniques like tree-shaking, lazy-loading, and common chunk splitting are implemented for your production build.

[@xrkalix]

Thanks a lot. I was trying to find something good online about Alpine but I was unable.

[@muhmmadirshad7376]

Think you sir

[@Geomaverick124]

This button feature would be good to swap between two different types of websites...like if you have a site on english and a site in french or spanish

[@ogarjosephodama1878]

Sir Brad millions of thanks for what you have done for us here. Please, can you do a complete project on real estate ór property listing with agent registering, blóg section all the good stuff either a paid cost or fréé here . Thanks Using PHP and MySQL or Laravel or you decide

[@ahoivik]

Something I've been struggling with is identifying a best practice dealing with where and how to store data from external apis using fetch. At the Element x-data? as an external script function call?

[@virenkhokhar6305]

Money sign 🙌

[@LouisDuran]

23:46 Money sign. LOL

[@viallymboma9874]

really interesting...

[@edmotler2115]

As I write this it's only Thursday. So plenty of time then for at least another 3 JS frameworks to be released before the end of the week.

[@EduardKhiaev]

can you also create an HTMX Crash course?

[@sky333suraj]

Better to use Alpine as compared React or Vue as they make projects heavier to pack as standalone apps when using with vite of npm add.

[@AstuceFx]

can we use it within react project?

[@samuelwaller4924]

can, yes. Should, probably not.

[@PlotTwists]

I made an app using TALL stack where the A is Alpine back in 2021 ... it was good mostly, just some minor compatibility issue to fix

[@mrsan385]

what is TALL stack

[@notkylo1881]

@@mrsan385 Tailwind, Alpine, Livewire, Laravel

[@birsingh5388]

Please create your own JS framework as well, the name could be Traverse.js 😎😃😆

[@alannetherclift678]

Any chance you can show how to use Alpine JS with a strict Content Security Policy? I've been told it's possible but a bit involved.

[@jlambert12013]

Is there any videos on using HTML, CSS and Vanillla JS, but that discusses maybe a Folder Structure or Standard to go by?

[@ayushsrivastava8698]

Hey Jim you can check this out kzbin.info/www/bejne/j3jbq6uLe9F7kKs

[@alexdin1565]

Please can you make a video about Fabric js?

[@badcatdesign]

Tailwind is super cool, but I wish it wasn't being used in videos like this when it's not the focus of the vid. It feels like one of the "classless" or "no-class" frameworks would be perfect to use here and allow for really clean HTML.

[@muhammadidrees6650]

❤❤❤

[@displayblock]

Can you do a crash course on Petite-vue?

[@followthesalaf5657]

Need a tutorial on FARM stack

[@laughingvampire7555]

this is just like htmx, reinventing angularjs

[@tacituskilgore2258]

Which vscode theme does Brad use?

[@kudamasangomai]

Hey Brad, how do you learn something new and go from 0 to competency? And how long does it take you..do you mind sharing the process or tips

[@giftjonas2447]

The more you work on it the more you gain experience you should work on it make mistakes fix them, than you gain experience

[@kudamasangomai]

@@giftjonas2447 will have to work more i guess

[@thecodingchef9292]

@@giftjonas2447 that's true I think his question comes from the fact that programming is vast and changing daily, new things are being released daily, do how does one get to learn things at such high speed when something new to learn comes up,,,,, I think I would also love to Know

[@user-xz8mo9nr9c]

Hello, please, make video about Solid (mini framework like React).

[@henrikrinne3639]

So it offers the same thing as vuejs but you get to learn a new syntax?

[@ultimus579]

what theme are you using?

[@ahmedhabeeb2499]

Brad what is the next course udmey ? when ?

[@umeyama4]

Alpine + Livewire + Laravel tutorial please

[@maulvieyazidaprilian5679]

Tailwind is great, but I don't think it's suitable for fullstack / backend developers because in the end, everyone will create components from it, which Bootstrap has already done and to beat Tailwind, Bootstrap just need to add more utilities

[@figuredout6383]

am I the only Nigerian following Brad videos???

[@aogunnaike]

Lol you can't be

[@JM-st1le]

Nah bro

[@favouritecomics2177]

I am following Brad from Abuja 😂

[@figuredout6383]

@@favouritecomics2177 I’ve got a project idea, if you’re interested let me know, so we have a talk about it.

[@fcnealvillangca7943]

I don't have a big application to maintain I think alphine is enough with htmx

[@mehrdad1068]

Please make tutorial for post views 👁️ on social media 🔥🌸

[@daviidon]

Do an imba crash course

[@m.younusmorty4713]

Hi, Where I can get $el other properties like parent or child?

[@abdo.magdy.]

this is for sure has XSS vulnerability it renders the HTML with the alpine attribute if we are on a blog website someone can create HTML with alpine attrs and redirect users etc u have to filter a lot to prevent this

[@samuelwaller4924]

it has an escape mechanism to prevent this, and ideally you shouldnt be rendering user provided html anyways.

[@muhammadabir64]

its almost like vue