daisyUI meets Laravel Livewire

if you've been around the Tailwind ecosystem long enough you've probably heard about Daisy UI it's basically a component Library similar to bootstrap where you kind of have uh buttons and tabs and cards all of these components already pre-built with tailin but then it's customizable it's themeable a whole bunch of cool little Nifty Things well here's Daisy UI but for Lille Live Wire so like I said Daisy UI is a component Library that's really popular for Tailwind CSS and it basically just has a whole bunch of different components already pre-built for you so you can have you know this accordion or an alert there's there's a ton I'm not going to go through all of them but I want to take a look at what it would look like to build something like this manually in larvo Live Wire um let's say the the easiest way to kind of show this is if we were to take a button and just use Daisy UI but we wanted to you know we want to have this button and then we want to also um have a loading spinner after we call a live wire function okay that's easy enough um you know we can grab the loading spinner and then say you know the loading class with Live Wire let's let's jump into it okay I'm first going to create a new LEL project with live wire and with Breeze that way we get Tailwind out of the box and we just have to install dcui as a plugin let's do that right now there Breeze we're going to use the uh class component with Livewire and Alpine we'll say yes for dark mode this doesn't matter too much all right let's jump into our uh Daisy UI directory that we just created and I'm going to go ahead and create the uh database so PHP Artisan migrate we're going to create it and then I'm going to run MPN runev then we'll just go ahead and open this up in our code editor okay let's take a look at the um dashboard View and what we're basically going to do is we're going to take this and instead of just showing your logged in so actually let's take a look at um what this looks like here we're going install daui in a bit but let's take a look at dy. test all right here we go let's go ahead and register okay you're logged in so if we want to say hi there this is where our Daisy UI component will go perfect now let's go ahead and create a new Live Wire component so that way we have some place to put our Daisy button and then we'll transition into Daisy y4 Live Wire let's take a look okay let's create a new volt component with our class-based um live art structure and we'll start scaffolding out our Daisy button we're just going to be able to click a button uh we'll say just sleep for a little bit and then show some text on the screen later so that way we have a loading state that we can kind of play around with within Daisy UI so we'll just say phps in and make volt and we'll say um Daisy test perfect so let's take a look at that awesome now let's go ahead and install da UI so that way we're ready to start creating this within umin the function itself awesome so let's go ahead and take a look at how to install Dai so we'll just go ahead and grab this and we'll go ahead and paste it into our um terminal here then we just need to add the daui plugin to our Tailwind do fig. JS file let's go ahead and do that perfect oh there we go and I think we should be good to go so let's go to our Daisy test and we'll just go ahead and call a button here so this should be um button I wish you could could have class of button primary there we go gab KOB is helping us out let's go ahead and take a look at what this looks like in the browser um here we go and of course we're not calling this Livewire component yet so let's go ahead and do that so in our dashboard we can go ahead and just call this here we can go uh Live Wire Daisy test there we go we got a button easy right now Daisy UI just makes this super simple because we can not only theme it but we can have specific uh you know colors of the button or if we needed to have it you know active or error warning that kind of thing so if we let's just say this should be a let's say a button secondary and then we'll have a button um yeah say let's say button secondary sounds like it would be a good good option so let's go back into our Daisy test and we'll say this is secondary instead of primary and you can see here that that we automatically see that it's Pink Perfect now let's take a look at how how this would look like if we want to click this button show some text after a little bit and have a loading spinner be in there now this is where you know Daisy UI is great but you still have to have all these little components set up and that you probably are going to start you know extracting into your own components to make these loading Spinners happen and just make them look nice let's do this manually for now um okay so let's take a look we want to say this is um we'll say show text and here we want to um let's go ahead and say this is a public text equals h Hello World um we'll say we'll say this is blank that way we can modify that so then we'll be this text equals hello world then we want to display the text so we can display the text here so um on click and we can do this with wire click uh we want to show text now let's go ahead and take a back look click there hello world perfect refresh hello world awesome now what if we want to show a loading spinner because this is a database query that we're getting hello world so let's go ahead and modify that so we're going to sleep for almost two seconds and then we'll show Hello World there we go one two hello world and one two hello world but there's no because Live Wire is using uh Ajax requests to go and fetch the server we can kind of pull this up right here actually let's see so if we were to take a look at the network um let's go ahead and refresh and we'll clear this every time I press this button you know we're we're grabbing the info and then it's water falling down it's we're receiving information back which is displaying on the page hello world okay now how would we do this with dcy so that we can set up a spinner well live where a wire loading attribute so while this is loading or while anything on the page is loading and we can actually be specific on this show text function we're going to change the class let's go ahead and do that right now so we can actually say you know wire loading class equals and then we could H here Buton let's go ahead and take a look at what dzui expects for the button let's close this out so for any kind of loading um if we wanted to have loading Spinners with this okay so span class loading spinner loading okay so let's just go ahead and take this and it's in the button so maybe span class you can see where this kind of gets a little bit more confusing because we want the loading button spinner I can see here button but then we have a span of a class so we basically um want to remove this span once uh once the buttons done loading so let's go ahead and take a look at that so instead of putting this in the wire loading class let's actually go ahead and put a new span and we can have loading in here I believe they had it believe they had the loading text okay it's outside the span so we we won't we won't say we won't even say loading let's just go ahead and for now just leave it as a span so that way we can have the loading spinner inside our button secondary but we want to remove this if wire loading is activated instead of using wire loading class we can actually just say wire loading so this span is only going to show up when wire loading we can actually be specific on the Target too so we can say wire Target equals um show text and with any luck this should work so basically what we're going to do is we say Okay anytime this loading we should be at the loading button still says button it says h Hello World okay now this is a little bit more feedback um but you can see how here even with you know the the the wonderful attributes the Live Wire gives to say that okay hey this span is only showing with wire loading it it begins to get a little bit tedious especially if you wanted to disable the button you add a little bit more class and then you want to um you know maybe you want to show that extra text well then you would have to you know create a new span this is loading and then we'll say that this is uh wire loading and then uh for this button text we would have to you know there's probably a bunch of different ways to do this but we would have to remove move that button text so that it's not shown when it's loading or we create two buttons that are sitting in the same spot and then it basically changes it out you can see how this would get tricky over time of course dcui is great because it provides these attributes it provides these classes and you're not having to kind of take out your own components and do this all yourself within Tailwind great thing is it's still Tailwind under the hood so you can modify any of this but here's where I get a little bit excited because Daisy UI meets Lille Livewire with a component Library called Mary UI so Mary UI basically takes all the good of D UI that we just saw all of the components so everything that Mary UI gives is just dais UI plus a little extra specific for laravel and laravel Livewire so you still have all those same components that you have out of the box but now you get all of those the the the button function that we tried to create now you just get that for free let's just even pull up a button within a button here you can see that not only do we have things like you know icons but they're they're specific blade components that we can use within our within our application so we have the Spinners that have targets and then we don't have to do anything it it it's just automatically disabled when we're using it so let's go ahead and modify this actually create a new volt class component with M UI so let's install it right now since we've already installed Breeze what we're going to do is just um have a manual install so we're just going to uh require Mary and because we've already installed Dai and all this we shouldn't need to do any of that so let's go ahead and jump back into our code and we'll ahead and require marry just a heads up this is created by the incredible Robson Torio um I hope I'm pronouncing that right but go ahead and give him a follow and also take a look at his GitHub because he has fantastic um just repos all over the place but he he is the creator behind Mary and he even has some demo applications built specifically with Mary which is a great way to not only dive your foot into dayi Mary but also live wire and class components itself so let's jump back into the code okay so I already installed marui now let's go ahead and add um this to our taable one config perfect and then we've already done that we've already have a layout all this should be added so we should be good to go so now we can just add that button so let's go ahead and take a look at how that works know button with a spinner and here we go okay so let's do this wi click save okay yeah let's let's just jump right in so now I'm going to go ahead and create a new volt component with Mar UI and then we can kind of like see the difference of what that code looks like so I'm just going to go PHP artisan perfect let take a look at merry test and we're just going to copy in this button and so we're going let's go ahead and grab some things from the daisy test so we're just going to grab um all of this so that way we can show the text and we'll just say that this is what did we say just button perfect let's just do that so button this is wire click of show text we have icon right of Cl we we'll keep the we'll keep the icon we keep the spinner so that's that's out of the box um let's take a look at uh how this looks like how this looks in the component so back to our Lille again we shouldn't add it so that way we have it ready let's take a look at our dashboard and we're just going to add Live Wire Miry test and that should be good to go bam there we go and now all a sudden we have you know the same kind of functionality but we have all these things given to us for free out of the box and that's only the the the tip of the iceberg so this is a demo specifically of every component within marui and just some neat features within a lir of a live wire as well so I'll take a good look at here but I advise you to take a look through the the repo itself because not only does this give you a great starting base for your next application with using Daisy UI with using M UI again all of this is themea all of this is just Daisy UI so everything that is in the daisy UI documentation is applicable to Mary but this is just specifically built for Live Wire so you don't have to do all of that uh gluing together yourself so you can see that all this is is um using Live Wire and using Live Wire volt specifically so this is Live Wire 3 Live Wire volt and then class components so if you want uh look into how a actual code base for a project might look like within L laravel laravel Live Wire and volt which is those single single file components and I would advise you giving giving paper a look so start the repo so as you can see here it has you know things like login being able to create specific forms um with drop downs everything like that and so validation all this stuff is a great way to learn Lille great way to learn Livewire and also just a great way to learn Daisy UI too so Daisy UI is a themeable component specifically for tail one CSS it's really popular right now and overall it just makes using and getting up to speed within an application that much easier because you're using Tailwind so that you you know you can modify that in the future but it's themeable it is customizable and and it just looks nice and gives you a lot of stuff free out of the box but you pair that with lay of a live wire you pair that with something like marry UI which is fantastic then you're just running up the speed within no time you can Kickstart an application and have a button with a loading SP that makes it look like this is something you put so much time and effort in but it's just one line of code that you're given from Mari so check it out check out Robson orio's work as well and give Mar a try and see me tell me what you think overall I love using something like Mar UI to be able to get up to speed to be able to get an MVP out the door without having to think about the design without having to think about how a button is going to look or how a form is supposed to look just makes things easy

Channel: Josh Cirre

Views: 9,779

Keywords:

Id: F2813o7AFsw

Length: 18min 47sec (1127 seconds)

Published: Wed Nov 29 2023