Livewire: Full Page Components Example with Layouts

in this video let's talk about full page components in Livewire quite often I see that people structure Live Wire components as part of their laravel application and that's totally fine so example this table is Livewire component and everything else is layerable solarable menu laravel Breeze the starter kit and inside here you load Livewire this is how typical people would do that and I'm actually a big fan of that because Livewire in my opinion is for small Dynamic elements on the page but it is possible to have full page confidence so I want to show you a demo project that we're working on at the moment and soon it will be released on gumroad for sale so I will not publish the repo in this video but it's a work in progress with the structure of full page components so we have the components of categories list products list and then there will be orders list we're working on that at the moment and let's take a look at routes web file and the goal of that structure is to talk totally not have any laravel controllers just live wire components which will have all the logic inside so it's based on larval breeze so routes for auth do have controllers but categories orders and products all of those are actually live wire components so if we click here as you can see categories list is not allowable controller so it has render method everything like a typical Live Wire component would have and in the routes all we need to do is to Route get to that Livewire component without specifying any method but we can also assign the name like you would do in a typical laravel route so that's how it works now how does it render the blade in the categories list you render the blade as you would do categories list blade as in any Live Wire component you do have to have root component of div or whatever and then inside you do whatever you want for this particular Live Wire component the table so this table is Live Wire component where does it get all the header from by default if you use four page component it kind of mimics the behavior of extends the main layout and that main layout by default is resources views layouts app blade which is coincidentally or not in laravel Breeze a default laravel blade layout so resources views layouts app blade comes by default with laravel breeze so I don't need to configure anything I just need to proceed with blade components as per alarm will breeze so that slot becomes in the categories list Blade the Live Wire component content but if you do want to make that configurable and extend another blade file for example let's rename file save as to for example main blade and then you would want to extend the main for example let's change something in the body for example at hello somewhere so we would be sure that we're using the main blade and by default currently if we refresh we don't see that hello but we can publish the config of Livewire you may have done that during the installation of Livewire if you haven't you can publish the config like this and then in the config Live Wire file we have if we scroll down view path layout here's the default value layouts app if we change that to layouts Main and we refresh our page we're refresh and we see Hello in the corner so that's how you can customize the main layout and then proceed with having all the pages as Live Wire components without wearable controllers if we take a look at for example Network tab in the browser so what requests are happening actually if we refresh the categories then it reloads the full page if we click on orders or products it also reloads the full page like it would be a laravel controller but as a proof that it's a live wire component inside if we click some Dynamic element only the categories list component is being called so only one request to the server so you can create your full project as kind of Live Wire first I'm not sure if I'm personally a big fan of that I still believe that Livewire is mostly suitable for or components here and there dynamically on the page but I just wanted to Showcase that possibility to you

Channel: Laravel Daily

Views: 9,096

Keywords:

Id: 4c7h2sIA8lc

Length: 4min 14sec (254 seconds)

Published: Thu Mar 30 2023