In this episode, we start off by recapping what we've already done with our Inertia.js + Laravel setup, then we dive right into building a user's profile page from scratch. It's a nice way to reinforce how we create new pages, set up controllers, routes, and render Inertia components—just like we've done before—but this time for individual users.
Once the profile page is up, we work on passing down a user's data and their posts into our Vue component using resources. We cover a couple of ways to load posts, including doing it directly through relationships and why you might want to use a custom query if you need features like pagination.
With the user's data and their posts on the profile page, we tidy up the Vue component by using the layout, props, and even dynamically update the page title with the user's name.
Finally, we shift focus to navigation between pages. We talk about why you shouldn't use standard anchor tags (<a>
) in Inertia apps—clicking them causes a full page reload, which isn't the SPA vibe we want. Instead, we introduce the Inertia Link
component, which helps us make client-side transitions between pages (like clicking a username to see their profile) without ever leaving the SPA context. You even get to see the difference in the browser's network panel!
In the next episode, we'll continue exploring more advanced Inertia link features, but for now, you've got the basics of smooth, SPA-styled page linking down.