In this episode, we tackle the issue where all of our pages show "Laravel" as the page title no matter where we are on the site. We dive into why this happens—basically, because the <title>
tag is hard-coded in app.blade.php
and isn’t easy to swap out dynamically when using Inertia with Vue.
To make our page titles dynamic, we remove the static <title>
from the layout and start using Inertia’s Head
component in our Vue pages. We tidy up the routing by switching to a new HomeController and confirm everything’s still working after the change.
Then, we jump into the Home.vue component and import the Head package from Inertia (via @inertiajs/vue3
). With this, we show how easy it is to set a unique title for a page, make it dynamic if you have props or data, and even get more advanced by setting meta tags (like descriptions) for better SEO.
Finally, we talk about how this approach works for every page individually and why you might not see the changes in your server’s page source unless you enable SSR, but you can always see it live in the browser’s dev tools. Now, each of your views can have their own custom title and metadata, making your app feel a lot more polished and professional.