Intro to Alpine.js in Just 7 Minutes

There's this small JavaScript framework called Alpine.js that will help you with small dynamic interactions on your pages.
Link to Alpine: github.com/alpinejs/alpine
Livewire with Alpine: laravel-livewire.com/docs/2.x...
- - - - -
Try our Laravel QuickAdminPanel: bit.ly/quickadminpanel
Enroll in my Laravel courses: laraveldaily.teachable.com

[@thatsenam9183]

Nice to see that you are sponsoring that project.

[@gadgetkh9408]

Can you please make more videos on Laravel + Livewire + TailwindCSS + AlpineJS together? Thank you!

[@enkiimuto1041]

Thank you for this tutorial, it was a very clear explanation.

[@tanzimibthesam5861]

Alpine Js is awesome.I am so happy Povilas is covering every bit n Alpine to me is a direct replacement of Jquery

[@stygis]

All of them start small...

[@turdakhov]

Thank you for this video! And thank you for your work! You are awesome!

[@AlfredoElizondoLife]

Caleb tweeted a roadmap for Alpine, and it seems that it’s getting bigger and more potent in order to provide more functionality to livewire. Haven’t taken a deep dive into it, but maybe it has to do with the inertia’s vue combo. Nevertheless the future of php look’s very promising, I wonder how it will compete with next.js the following years.

[@AlfredoElizondoLife]

On another note, the last thing you mention about vue for more complex stuff, you can also run more complex and bigger scripts on the bottom of your component and init them from the x-data directive, the difficult thing there is entangling them with live wire. Maybe there’s a nice niche for another course.

[@LucianoTonet]

Very like Vue. Thanks Povilas for illuminate my days :D

[@AsjadJawed]

nice intro to alpine.js

[@SergeyNeskhodovskiy]

4:19 I've left the life of tangling together backend and frontend code so far behind, and screens like these remind me I had all sorts of good reasons to do so.

[@marccawood]

4:19 is all frontend code

[@MayankSinghParmar]

Helpfull video. Thanks!

[@kupapopol1980]

Sir Can QGIS map can embed on laravel because our project is Web Based GIS and I plan to use laravel to create a website. Thank you

[@vaidenait]

can i to read dom objects with x-for ? .. o just arrays ?

[@andy.robinson]

Is separation of concerns just for dinosaurs these days?

[@PovilasKorop]

Yup, pretty much. For the record, I'm sad about it, too, and I miss good old MVC.

[@andy.robinson]

@@PovilasKorop Ahh good, I'm not the only one then! Cheers 🦖

[@Rundik]

With alpine and tailwind you can never leave your html file. Imagine someone loves this bloody mess. It's xml attribute hell from 2000s all over again.

[@mohammadmohammadi2724]

thanks for video. I have a question is this a good stack? Livewire, Tailwind and Alpine? for small projects and large ones? and I'm going to replace bootstrap with Tailwind and Jquery with Alpine and use livewire what is your opinion?

[@LaravelDaily]

Sure it's a good stack but it should be your choice, what you're comfortable with

[@shahin2014]

How to implement alpine mask plugin in larVel node npm

[@An_Najib]

Lumen Rest API using Dusterio, Dingo, CORS. And integrate it with WEB-Base using Ajax or vue straight request please

[@PunyFlash]

Well it's cool if you making some landing layout as freelance job for few hours, but this is dead for commercial projects - deffinitly adds more problems then benefits.

[@dmdk8301]

In 5 years will be back to notepad++) Alpine seems useful for clent-pages for small utility cases, but writing all in html is really back to 00 or even earlier

[@ShabbeyRoadMusic]

That was exactly my thought. But I can also appreciate Povilas' points/examples that use it for small, simple things. I could definitely use it rather than **some** of the heftier jquery stuff in my code. Thanks Povilas!

[@J90JAM]

“Sooner or later, everything old is new again.” Although things like Alpine & Tailwind do things very differently to back then, it's just the inline style that's the same.

[@toitespasmoi]

Yeeeeet

[@seyidtakele8158]

I am very comfortable with vuejs inertia and i will never switch to livewire or blade. Do still i need this ?

[@aashiqhasnat2]

This simple example can be done with vanilla js...no need to learn another framework, or you can use Vue From CDN

[@PovilasKorop]

If you're comfortable with something, don't follow the hype, use whatever works for you.

[@ivanradojevic8887]

Maybe you need for SEO.

[@dmdk8301]

If you dont need safe ssr why not

[@dominiks5318]

IMO framework not worth the time. Vanilla JS is just enough for small things

[@michaellevi6743]

Hi having an issue getting a button to work. I have this is my section => x-data="{showCards: 'all', activeClasses: 'bg-primary text-white',inactiveClasses: 'text-body-color hover:bg-primary hover:text-white',}" class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8"> but th button isnt opening: => All Projects Any feedback on what I am not doing correctly, VsCose keeps saying there is an error which is the following: Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /Volumes/staging/portfolio/src/components/Projects/Projects.jsx: Unexpected token (29:22) 27 | 28 | > 29 |

[@MagnusAnand]

Have you tried HTMX.org?