Laravel Modal Using Alpine JS + Livewire 3

Подписаться 14 тыс.

Просмотров 22 тыс.

50% 1

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)

Опубликовано:

29 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 62

@mori181186 10 месяцев назад

Next Level!! Amazing Alpine and Livewire content :D

@yelocode 10 месяцев назад

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

@__Cypher 9 месяцев назад

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.

@helderlimaletsgo 10 месяцев назад

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

@yelocode 10 месяцев назад

Glad it was helpful. Thanks for watching Helder.

@WallSpot 5 месяцев назад

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

@kadirertan8664 3 месяца назад

Great content as always.

@GiorgiBekurashvili 4 месяца назад

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

@yelocode 4 месяца назад

Thanks for watching

@kreaweb-be 8 месяцев назад

Very well explaned and very practical.

@yelocode 8 месяцев назад

Thank you

@lokendrajargha9969 6 месяцев назад

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

@yelocode 6 месяцев назад

Thanks for watching. glad to hear that.

@shaneenriquez7369 3 месяца назад

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 10 месяцев назад

Really awesome explanation ❤

@yelocode 10 месяцев назад

Glad you liked it

@EmersonCabrera 2 месяца назад

Amazing explanation, thank you!

@yelocode Месяц назад

Thanks for watching.

@francescolettera9954 7 месяцев назад

helpful! Thank you

@yelocode 7 месяцев назад

Thanks for watching. Glad it was helpful!

@user-bq9we2pl8r 2 месяца назад

you are the best,

@yelocode Месяц назад

Thank you

@brunogabriel3786 9 месяцев назад

Thanks!!!!!!!!😁

@yelocode 9 месяцев назад

Thanks for watching

@user-bq9we2pl8r 2 месяца назад

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

@yelocode Месяц назад

Yes bro, Thanks for watching.

@Stoney_Eagle 10 месяцев назад

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 10 месяцев назад

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 5 месяцев назад

what is dialog element with dialog api?

@Stoney_Eagle 5 месяцев назад

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

@HamadAbdulla_7 10 месяцев назад

Thanks

@yelocode 10 месяцев назад

Thank you for watching

@hasithudayanga6160 10 месяцев назад

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 9 месяцев назад

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

@wlakovic 4 месяца назад

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

@lexxkrt 3 месяца назад

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

@meraikwd1179 10 месяцев назад

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 10 месяцев назад

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 10 месяцев назад

@@yelocode Thank you for your valuable input

@meraikwd1179 10 месяцев назад

@@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 8 месяцев назад

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

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

@abdulkarimomer6290 10 месяцев назад

make TALL Stack course 🙏

@yelocode 10 месяцев назад

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

@ReuelTeodoro 10 месяцев назад

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

@yelocode 10 месяцев назад

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

@Sh1nitsu 5 месяцев назад

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 4 месяца назад

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 4 месяца назад

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

@devilwarrior3108 3 месяца назад

why doesn't bootstrap modal work?

@rondevPH 10 месяцев назад

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

@yelocode 10 месяцев назад

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 10 месяцев назад

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

@mugerwaobadiah1621 10 месяцев назад

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

@yelocode 10 месяцев назад

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

@isaachatilima 3 месяца назад

I need mentorship but your email address is not working 😞

@user-zz3qf7ew4y 6 месяцев назад

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

@sforshoaib 3 месяца назад

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

@Sh1nitsu 4 месяца назад

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

@md.mominulhaque2157 9 месяцев назад

please create child modal

@yelocode 9 месяцев назад

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

@onnewf9288 4 месяца назад

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 ru-vid.comgaming/emoji/7ff574f2/emoji_u1f64c.png