In this episode, we jump right in to building a real feature: rendering a list of books on the page using Laravel Livewire. We start by cleaning things up—deleting the default example component using a handy Livewire CLI command.
From there, it's time to set up our Book
model, complete with its migration and a factory for generating fake books. We make sure each book belongs to a user and has the fields we need (like title, author, and notes). After running the migration and tweaking the model to make mass assignment easier, we use the factory in Tinker to quickly stuff our database with fake data.
Next up, we move on to displaying those books. We create a new Livewire component conventionally named BookIndex
and hook it up to the dashboard. We fetch the list of books for the currently authenticated user and pass them straight into the component’s Blade view. The books are then output in a basic Blade loop—nothing special yet, just the titles for now.
To make things look a bit nicer, we transplant some styling from the dashboard and wrap each book in a styled container. Then, we illustrate how Livewire’s interactivity works: by creating a fake button that triggers a method, we see how Livewire re-renders the list by just clicking—no need to refresh the page. It's a glimpse of how Livewire seamlessly updates the UI when data changes.
The episode wraps up with a quick note on performance considerations (like being careful with how much data you re-render). But the big takeaway: we now have a live-updating list of books, and we can see the groundwork laid out for adding and updating books with Livewire in real time.