This release removes the global component registration for the <inertia-link> and <inertia-head> components. To use these components moving forward, you'll have to manually import them:
<template>
<Head title="Home" />
<Link href="/about">About</Link>
</template>
<script>
import { Head, Link } from '@inertiajs/inertia-vue3'
export default {
components: {
Head,
Link,
}
}
</script>Alternatively, you can globally register them in your app.js file:
import { Head, Link } from '@inertiajs/inertia-vue3'
createInertiaApp({
// ...
setup({ el, App, props, plugin }) {
createApp({
render: () => h(App, props),
})
.use(plugin)
+ .component('InertiaHead', Head)
+ .component('InertiaLink', Link)
.mount(el)
},
})This release adds the ability to globally modify the page <title> when set via the <Head> component. A common use case for this is automatically adding an app name before or after each page title.
To use this feature, first set the title callback in your createInertiaApp configuration:
createInertiaApp({
title: title => `${title} - My App`,
// ...
})And then set a title using the <Head> component in your pages:
<Head title="Home">This will result in the following <title> tag:
<title>Home - My App</title>This also works if you set the title using a <title> tag:
<Head>
<title>Home</title>
</Head>