In this episode, we focus on building a page that shows all the services an employee can perform. You'll see how we set up a new controller to handle requests for an employee's services, using a clean URL structure with route model binding. We're also making sure that the employee and their associated services are passed down to the view properly so we can display them.
To avoid repeating ourselves, we refactor the services list into its own Vue component. This way, both the home page and the employee service page can use the same code to display services. We walk through making the component, wiring up the props, and integrating everything with Ziggy for easy route handling in JavaScript.
You’ll learn a neat workflow for moving bits of UI into reusable components, keeping things clean and maintainable. By the end, we end up with a page for each employee that lists their available services, and the same services grid can be reused anywhere else in the app without duplication!