Head Section and Title: Inertia Component

Our application doesn't have a Meta Title, and there are no title in the Blade layout. How do we pass different title to individual pages?

To add title or any meta tag, Inertia has a Head component. First, we must import this Head component into the page component. Then, we can use this component to add a title.

resources/js/Pages/Posts/Index.vue:

<script setup>
import AppLayout from '../../Layouts/App.vue';
import { Head } from '@inertiajs/vue3'; 
 
const props = defineProps({
    posts: {
        type: Object,
        required: true
    }
})
</script>
 
<template>
    <Head> 
        <title>Posts</title>
    </Head>
 
    <AppLayout>
        // ...
    </AppLayout>
</template>

We can see the title on the posts page.

If you have only a title, you can make it shorter.

resources/js/Pages/Posts/Index.vue:

<script setup>
import AppLayout from '../../Layouts/App.vue';
import { Head } from '@inertiajs/vue3'; 
 
const props = defineProps({
    posts: {
        type: Object,
        required: true
    }
})
</script>
 
<template>
    <Head> 
        <title>Posts</title>
    </Head>
    <Head title="Posts" /> 
 
    <AppLayout>
        // ...
    </AppLayout>
</template>

The same goes for the About page.

resources/js/Pages/About.vue:

<script setup>
import AppLayout from '../Layouts/App.vue';
import { Head } from '@inertiajs/vue3'; 
</script>
 
<template>
    <Head title="About" /> 
 
    <AppLayout>
        <div>About us</div>
    </AppLayout>
</template>

Also, there are cases when you have the project name in your title, but some part of that is dynamic. For example, posts - inertia course. You can define that global repeating title directly in the resources/js/app.js.

resources/js/app.js:

import './bootstrap';
 
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { ZiggyVue } from '../../vendor/tightenco/ziggy'
 
createInertiaApp({
    title: (title) => `${title} - Inertia Course`, 
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        return pages[`./Pages/${name}.vue`]
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .mount(el)
    },
    progress: {
        color: '#f00',
        showSpinner: true,
    },
})

Extract Repeating Menus as Main Layout Multiple Layouts: Login Form

Course Content

Vue Inertia + Laravel 11: From Scratch

Head Section and Title: Inertia Component

Course Content

Intro

Practical Example: Table of Data

SPA With Links

Layouts

Forms

Authentication and Authorization