Skip to main content
This is documentation for Inertia.js v1, which is no longer actively maintained. Please refer to the v2 docs for the latest information.
Since Inertia powered JavaScript apps are rendered within the document <body>, they are unable to render markup to the document <head>, as it’s outside of their scope. To help with this, Inertia ships with a <Head> component which can be used to set the page <title>, <meta> tags, and other <head> elements. The <Head> component will only replace <head> elements that are not in your server-side root template. The <Head> component is not available in the Svelte adapter, as Svelte already ships with its own <svelte:head> component.

​
Head Component

To add <head> elements to your page, use the <Head> component. Within this component, you can include the elements that you wish to add to the document <head>. 
import { Head } from '@inertiajs/vue2'

<Head>
    <title>Your page title</title>
    <meta name="description" content="Your page description">
</Head>

​
Title Shorthand

If you only need to add a <title> to the document <head>, you may simply pass the title as a prop to the <Head> component. 
import { Head } from '@inertiajs/vue2'

<Head title="Your page title" />

​
Title Callback

You can globally modify the page <title> using the title callback in the createInertiaApp setup method. Typically, this method is invoked in your application’s main JavaScript file. A common use case for the title callback is automatically adding an app name before or after each page title. 
createInertiaApp({
title: title => \
After defining the title callback, the callback will automatically be invoked when you set a title using the <Head> component. 
import { Head } from '@inertiajs/vue2'

<Head title="Home">
Which, in this example, will result in the following <title> tag. 
<title>Home - My App</title>
The title callback will also be invoked when you set the title using a <title> tag within your <Head> component. 
import { Head } from '@inertiajs/vue2'

<Head>
    <title>Home</title>
</Head>

​
Multiple Head Instances

It’s possible to have multiple instances of the <Head> component throughout your application. For example, your layout can set some default <Head> elements, and then your individual pages can override those defaults. 
// Layout.vue

import { Head } from '@inertiajs/vue2'

<Head>
    <title>My app</title>
    <meta head-key="description" name="description" content="This is the default description" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</Head>

// About.vue

import { Head } from '@inertiajs/vue2'

<Head>
    <title>About - My app</title>
    <meta head-key="description" name="description" content="This is a page specific description" />
</Head>
Inertia will only ever render one <title> tag; however, all other tags will be stacked since it’s valid to have multiple instances of them. To avoid duplicate tags in your <head>, you can use the head-key property, which will make sure the tag is only rendered once. This is illustrated in the example above for the <meta name="description"> tag. The code example above will render the following HTML. 
<head>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>About - My app</title>
<meta name="description" content="This is a page specific description" />
</head>

​
Head Extension

When building a real application, it can sometimes be helpful to create a custom head component that extends Inertia’s <Head> component. This gives you a place to set app-wide defaults, such as appending the app name to the page title. 
<!-- AppHead.vue -->

<template>
    <Head :title="title ? `${title} - My App` : 'My App'">
        <slot />
    </Head>
</template>

<script>
import { Head } from '@inertiajs/vue2'

export default {
    components: {
        Head,
    },
    props: {
        title: String,
    },
}
</script>
Once you have created the custom component, you may simply start using the custom component in your pages. 
import AppHead from './AppHead'

<AppHead title="About" />