In this episode, we're diving into building the booking UI by preparing all the data we'll need on the frontend, specifically for employees and services. We start by cleaning up our app's routes and setting up a new HomeController that will handle fetching the employees and services. Instead of just dumping raw models straight to the frontend, we use Laravel API resources. This lets us structure and format the data nicely, making it easier to use in our Vue components.
We walk through creating both an EmployeeResource and a ServiceResource, picking exactly which fields we want to send—like names, slugs, profile photos, service durations, and prices. Along the way, we set up our app so that the data comes down in clean arrays (not awkwardly nested in a data
key), making it even easier to work with in Vue.
A big part of this episode is dealing with price formatting. Since our prices are stored in cents, we make a simple accessor on the Service model to format them as human-friendly dollar amounts, so they're ready to display on the UI. We also chat briefly about potentially using the Laravel Money package in the future for more robust currency handling.
By the end of the episode, we've got all our employee and service data pulled, structured, and ready for the frontend. Next up, we'll be showing this data in our UI and wiring up navigation so users can either pick an employee or go straight to checkout through a selected service!