In this episode, we're starting from scratch by setting up a fresh Laravel project (with Livewire already installed) so we can prepare a place to drop in our comment component later on. First things first, we create an Article
model and migration, keeping it simple by just adding a title and a unique slug.
After running the migration, we build an ArticleShow
Livewire component and register a route for it that uses route model binding by slug. We seed the database with a fake article so we have something to display.
As we wire things up and visit our new article page, we bump into a missing layout error, so we fix that by specifying the layout in our Livewire component. There's also a quick fix needed with the Breeze layout: since it expects a logged-in user, we tweak the navigation so it doesn’t blow up if no one is signed in.
We then borrow the dashboard template from Breeze, strip out the unnecessary layout stuff, and customize it a bit—plugging in the article title and making the layout cleaner and more focused. We add a section for the article content and designate another spot for the future comments section.
To wrap things up, we use Livewire's props to pass the current article to the component and make sure we’re pulling articles by slug in our route. Now we have a nice, basic article page with a comments section ready for building out next!