In this episode, we look at how to pass data from our backend controllers to our frontend pages/components when building an app with Laravel and Inertia.js. We kick things off by showing the basic way to send a simple string from the controller to the frontend, just like you would when using Blade templates. But, since we're working with Vue components, we also cover how you need to explicitly define the props you expect on the page to access that data correctly.
Once we have that simple example working, we move to something a bit more real-world: sending a list of posts to the page. We walk through creating a Post
model, setting up the necessary migrations and factory, and seeding the database with some fake data. After the data is ready, we show how to fetch this list in the controller and send it down to the Vue component as a prop.
On the frontend, we demonstrate how to set up the prop, iterate through the posts using Vue's v-for
directive, and output the post details. By the end of the episode, you'll see how easy it is to move data from Laravel into your Inertia-powered Vue components and render it however you need.