Certainly! Here’s a detailed solution:
The <title inertia> attribute is used by Inertia.js to identify and dynamically update the page title during client-side navigation. While it’s true that inertia is not a valid HTML attribute, Inertia.js specifically looks for <title inertia> in the DOM, not <title data-inertia>. Changing it to data-inertia breaks this functionality because Inertia.js will no longer recognize the title tag it should update.
Solution:
Keep the <title inertia> tag as it is, even though it’s not standard HTML. Inertia.js requires this exact attribute for its title updating mechanism to work. Browsers will ignore unknown attributes on the <title> tag, so it won’t cause any issues in practice.
Example:
<title inertia>{{ config('app.name', 'Laravel') }}</title>
Summary:
- Do not change it to
data-inertia. - The non-standard
inertiaattribute is intentional and required by Inertia.js. - It is safe to use, and will not cause browser issues.
References:
If you need to set dynamic titles per page, make sure you’re using Inertia’s title helper in your client-side code. For example, in a Vue component:
import { Head } from '@inertiajs/vue3'
<Head title="Dashboard" />
This will update the <title inertia> tag automatically.
