Laravel Modal Using Alpine JS + Livewire 3

Welcome to our livewire 3 course, in this course we will cover all the basis needed to build dynamic front end components using livewire. Today we cover how to build a reusable modal component using alpine js and use it in your livewire components as well.
Time Stamps:
-----------------------------
00:00 - Demo
01:11 - Html and CSS
05:53 - Open and Close Modal
16:32 - Allow for multiple modals per page
20:40 - Transition animation
22:00 - Livewire Example
Modal code Github Gist:
gist.github.com/MatinMN/06f3a...
Livewire 3Course Playlist :
• Laravel Livewire 3 Cou...
Tailwind CDN :
tailwindcss.com/docs/installa...
Alpine JS :
alpinejs.dev/essentials/insta...
FlowBite header template file:
flowbite.com/blocks/marketing...
Through out the course we will cover:
- how to make components
- Actions
- Properties
- Form Submission and Validation
- Flash Messages
- Tables and Pagination
- File Uploads
- Inline Components
- Full page Components and Layouts
- Events
- Offline States
- URL Query Parameters
- Nesting Components
- Navigate
- Loading states, Lazy loading and placeholders
- Modals
- Alpine JS
And more
Livewire 3 website :
livewire.laravel.com/
Boostrap Documentation:
getbootstrap.com/docs/5.3/get...
If you would like me to make more livewire videos, please let me know by liking the video and commenting what you like to learn next.
What is livewire:
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel. (Taken from Livewire Documentation)

[@mori181186]

Next Level!! Amazing Alpine and Livewire content :D

[@yelocode]

Thanks Mori for the kind words. Glad the video was helpful.

[@__Cypher]

It's the perfect tutorial series for those who want to learn Livewire 3. This series is simple and straight-focused on the topic. not a single second is wasted here.
Thank You @yelo Code
#NOTES
for those who are starting this now, you do not need to include Alpine CDN anymore It is included out of the box and you can create a livewire component for the modal instead of a regular blade component. the choice is yours.

[@WallSpot]

Thanks a lot...There was no tutorial on modal calling in latest version of laravel. Your videos helped me a lot.

[@helderlimaletsgo]

This was so helpful mate, thank so much for this video

[@yelocode]

Glad it was helpful. Thanks for watching Helder.

[@kadirertan8664]

Great content as always.

[@GiorgiBekurashvili]

One of the most useful tutorials at the time!!!

[@yelocode]

Thanks for watching

[@kreaweb-be]

Very well explaned and very practical.

[@yelocode]

Thank you

[@shaneenriquez7369]

thankyou soo muchhh , this is really what I need , since using modal from flowbite that uses its own javascript removes initialization once it renders

[@akashlmp]

Really awesome explanation ❤

[@yelocode]

Glad you liked it

[@lokendrajargha9969]

Great content and amazing video, thank you I am searching this type of video and got it ..

[@yelocode]

Thanks for watching. glad to hear that.

[@EmersonCabrera]

Amazing explanation, thank you!

[@yelocode]

Thanks for watching.

[@francescolettera9954]

helpful! Thank you

[@yelocode]

Thanks for watching. Glad it was helpful!

[@user-bq9we2pl8r]

you are the best,

[@yelocode]

Thank you

[@Stoney_Eagle]

Nice tutorial, you should use the dialog element with the dialog api.
This adds accessibility by forcing the modal to he in the very top layer of the dom handled by the browser and constraints the tab key to the modal, preventing scroll and adds an automatic backdrop that you can style with a pseudo class 😉

[@yelocode]

Thank you for watching.
Great point I don't think I have seen it used in Laravel Community before. Adding a dialog element would be very nice specially with the accessibility point you mentioned.
Thank you for sharing bro will start using it myself.

[@Sh1nitsu]

what is dialog element with dialog api?

[@Stoney_Eagle]

@@Sh1nitsu a quick mdn search will tell you everything you need to know😊

[@brunogabriel3786]

Thanks!!!!!!!!😁

[@yelocode]

Thanks for watching

[@HamadAbdulla_7]

Thanks

[@yelocode]

Thank you for watching

[@wlakovic]

Thanks mate, amazing tutorial!
I have a question, is it possible to render livewire component inside a modal? I was able to pass the selectedUser to it's mount method, and after I reached the render too, but after simply it doesn't render it into the modal.
Edit: on second button click it loads the view properly, but I don't understand why does it work like that?
Thanks in advance

[@meraikwd1179]

I have been watching your livewire videos for a while now and learning a lot. Do you think I can build something like language reactor Chrome extension? Basically it adds subtitels and some interactivity to the video like adding vocab to study them later. Can this be achieved with livewire or will i need something like react or vue?

[@yelocode]

Looking at the language reactor website and their extension, the video playback with live spoken word and translation highlighting, I don't think it's possible with livewire.
You will have to write javascript to get that functionality. Maybe with livewire and some js you can get it done.
But I personally would use Vue or React to build a website like they have. It will be easier to maintain in the long run.

[@heshamalmeraikhi6081]

@@yelocode Thank you for your valuable input

[@meraikwd1179]

@@yelocode I like how easy it is to work with livewire, but I had this concern it might be messy to replicate this functionality with livewire. I am working on another project which I think livewire will be a perfect fit for. Thank you for your replay and keep up the good work :)

[@carlosluistorres]

Hi, thanks for the tutorial, I'm really thankfull, but I woulld like to make you a question, I've followed all the steps but I cannot make the buttom works right after I've search somethin' on the input, I mean it seems like the livewire stopped

[@hasithudayanga6160]

Like this video. Can you do a video about Select field with livewire. Async search that can search records from database. Not loading all data like 10 items per time. Select fields use in many places. ❤ Really appreciate

[@yelocode]

Sure Thing, I have had multiple requests on this, I will try to make a video on it this week. Thanks for watching.

[@lexxkrt]

в случае передачи модели в коде html в функцию viewUser вы передаете json параметр, а не просто идентификатор (1,2,3...), т.е. лишние сведения в коде, что всегда приравнено к проблеме с безопасностью

[@user-bq9we2pl8r]

I think you are iranian, so: خیلی عشقی داداش.

[@yelocode]

Yes bro, Thanks for watching.

[@BhavyaJain-t5d]

i want to show this data in wire:model but i have to put the if condition to show the data in form when event is dispatched without if condittion geeting emptiy feed for name adress..

[@ReuelTeodoro]

Can you make a modal who’s state is available in the url. Like ?modal=true&path=pathview

[@yelocode]

You could add something like code below to your modal component so it can be toggled on and off using url hash. With URL params it's also possible just a bit more code.
x-on:hashchange.window="show = (location.hash === '#'+name)"
above code will show your modal if the url hash changes to the modal name. You can then use links to open and close the modal, also if the page reloaded, the modal will automatically open.
I put the full version of a modal with url support here : gist.githubusercontent.com/MatinMN/06f3a488dc6619e3efb8db743cfc73c4/raw/d7c265999f0b56aea2b29a87254a88ad21cf173f/modal-with-urlhash-support.blade.php
Hope it's helpful for your use case

[@hancestephen4586]

@slot('body')
@endslot
That code above does not render the value passed to the blade component.
The error undefined variable is returned. Even if you check if value is set, still it does not work.
What is the problem, any idea?

[@mugerwaobadiah1621]

thankx, kindly make a modal using $dispatch only with livwire without alpine js , like a conditional rendering @if($isOpen) display the modal @endif

[@yelocode]

Will create a livewire only modal video soon Mugerwa. Thank you for watching.

[@Sh1nitsu]

I have a question. I clicked the create button inside a modal, then validation comes, then closed the modal. How to reset the validation so that after opening the modal it looks new again without the error message.

[@mh5854]

Create a function and put $this->resetErrorBag(); in it inside the livewire component, use wire click to call the funcion on the close modal button

[@mh5854]

Don't forget to use wire.ignore.self on the html tag where u have the modal id thst way the modal will not be closed on validation fails

[@rondevPH]

I'm having trouble with closing the modal, i'm using vite and livewirestyle

[@yelocode]

I have the full code link in the description, maybe you can try compare and see if there are any differences. I don't think using vite would cause any issues. As long as you don't import alpine js multiple times

[@rondevPH]

@@yelocode when using tailwind cdn, modal is working. It has error regarding module.esm

[@abdulkarimomer6290]

make TALL Stack course 🙏

[@yelocode]

Will have more videos in the coming week. Thank you for the support.

[@devilwarrior3108]

why doesn't bootstrap modal work?

[@user-zz3qf7ew4y]

$this->dispatch('open-modal',name:'user-view-modal'); not working

[@sforshoaib]

Have you created modal with name or not? If not than this will not work.

[@isaachatilima]

I need mentorship but your email address is not working 😞

[@Sh1nitsu]

Heloooo, Can you make a modal livewire with crud? Pleaseeeeeeeeeeeeeeee

[@md.mominulhaque2157]

please create child modal

[@yelocode]

Thanks for watching, I will put that in list of videos to make.

[@onnewf9288]

thank you sir, this is very crystal clear tutorial 🙌
i used to be confused by modal things, but after watching this tutorial i think i can understand the concept very well
ua-cam.com/users/sgaming/emoji/7ff574f2/emoji_u1f64c.png