@inertiajs/inertia 0.10.0 and Laravel Jetstream: update the Head and Link component usage
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.
With two time consuming projects wrapped up this week, I finally had time to come back to my internal InertiaJS project – so thought I’d update all the underlying libraries, from Laravel to Tailwind CSS.
Update, compile, and then, uh oh, links aren’t working. What gives?
Looking at the console, I was presented with an incredibly informative message:
[Vue warn]: Failed to resolve component: inertia-link
at <Login ... >
at <Inertia ... >
at <App>There’s actually no sarcasm there. That is a superb message to see. Sure, links are broken but not only does this tell me what the issue is, but a drop-dead simple trace as to where in the app it is.
Going to the Login component, which was generated from a Laravel Jetstream stub (side note, Laravel Jetstream is flipping awesome at getting up and running with a new app), I can see that <inertia-link> is most definitely being used.
I’ll admit I have been out of the Inertia world for a few months due to other projects, but checking out the release notes showed the recent 0.10.0 release included a pull request from Jonathan Reinink (Inertia’s creator) that removed the global components for Head and Link.
The <inertia-head> is a more recent addition, coming in 0.9.1, to allow for updating of head content (check out my getting started with <inertia-head> post for more), and <inertia-link> is pretty self-explanatory. You know, a link, that's for Inertia.
Rather than be included globally by default, the Head and Link components should now be included as required in other components. This change was introduced based on:
improved tree shaking, and
ability to improve code maintainability and IDE assistance
Take a look at the link in the pull request for a discussion on twitter about this approach.
So pre-0.10.0, your links use the <inertia-link> component that is globally available.
1<inertia-link ...>2 I'm an old link3</inertia-link>From 0.10.0, you need to explicitly import the <Link> component from the inertia-vue3 library, and change <inertia-link> to <Link>. That's it:
1<template> 2 <div> 3 ... 4 <Link ...> 5 I'm a new link 6 </Link> 7 ... 8 </div> 9</template>10<script>11import {Link} from '@inertiajs/inertia-vue3';12 13export default {14 components: {15 Link16 }17}18</script>If your app is still young (like mine was), it was only a change that needed to be made in a few places: but for larger apps it may be a little more time consuming.
But hey, stepping forward with best practice is always worth the time.
A fix is coming for new Jetstream installations soon (already resolved on Github), but if you’re updating an older Jetstream install with the new InertiaJS, you’ll need to either globally add Head and Link, or update each Page to include these components.
