Important: The information in this article is over 12 months old, and may be out of date or no longer relevant.
But hey, you're here anyway, so give it a read see if it still applies to you.
Update 23rd July 2021: @inertiajs/inertia 0.10.0 changes the way the <inertia-link> and <inertia-head> components are used. Find out more...
The first time I set up an Inertia project I stuck with what I knew: Vue 2, even though Inertia comes with a Vue 3 adapter. As part of the Inertia Vue 2 adapter, the third-party Vue Meta was used. Essentially this library allowed you to create add a metaInfo property to your Vue component to update the app’s metadata view-by-view. However, Vue Meta is still not ready for Vue 3.
This week, the Inertia team announced the <inertia-head> component, a first-party feature of Inertia that replaces the previously-used Vue Meta.
Before you get started, to use <inertia-head>, you’ll need to be running the correct breed:
I’ve got it all up and running using [email protected] and [email protected].
Before you go on, this post assumes you already have your Inertia app up and running and understand how its ecosystem works.
The basics
The <inertia-head> component is added globally to your Inertia app – you can use it in any of your Views.
All you need to do is include the component in your view, and include any of the properties you want to have injected in to the document’s <head>:
1<template> 2 <div> 3 <inertia-head> 4 <title>Update your profile</title> 5 </inertia-head> 6 <!-- ... --> 7 </div> 8</template> 9<script>10export default {11 // ...12}13</script>Copied!
It just plops in to your component’s template, and the <inertia-head> component does the rest.
It could be as simple as the <title>, or could be a complete set of description and OG metadata – what you include really depends on your app.