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:

Livewire 3Course Playlist :

Tailwind CDN :

Alpine JS :

FlowBite header template file:

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 :

Boostrap Documentation:

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)

[mori]

Next Level!! Amazing Alpine and Livewire content :D

[lokendrajargha]

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

[hancestephen]

@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?

[meraikwd]

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?

[isaachatilima]

I need mentorship but your email address is not working 😞

[Naderabdou]

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

[__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.

[BhavyaJain-td]

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..

[Shnitsu]

Heloooo, Can you make a modal livewire with crud?

[devilwarrior]

why doesn't bootstrap modal work?

[mohammadhoseinkamari]

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

[onnewf]

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

[mugerwaobadiah]

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

[ReuelTeodoro]

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

[maddynewera]

Awesome tutorial for live wire beginners. Developer from Theni,
Tamilnadu, India

[hasithudayanga]

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

[helderlimaletsgo]

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

[kreaweb-be]

Very well explaned and very practical.

[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

[eduardodudu]

Great i spent half day trying to make work some other packages and i did with this you are the man