In this episode, we jump right in and build our very first filter for our forum app! The first thing we do is set up a reusable navigation component for our sidebar — this is where we'll list different discussions filters. That way, as we add more filters in the future, it's super tidy and easy to manage.
We start by creating a Navigation.vue
component, move the existing sidebar navigation over, and then add Inertia links for our different filter options. For now, we create a filter for "All Discussions" (the default view) and "No Replies" (to show discussions with no responses yet).
Next, we switch over to the backend and install the Laravel Query Builder package, which is awesome for handling filter logic through the query string. We update our forum controller to use this new query builder, and set up a system for class-based filters — making things clean and extendable.
For our "No Replies" filter, we create a custom filter class that checks for discussions with only one post (meaning no replies yet). After wiring everything up, we show how the frontend filter link triggers the backend filter — all without a page refresh, thanks to Vue and Inertia.
By the end of the episode, you'll have a slick sidebar filter in place and a solid understanding of how to structure and extend this system as your app grows!