Important update in Inertia.js

Recently there was made an important update in Inertia.js which rather went unnoticed by many. Now whoever is following various tutorials of VILT stack (Vue, Inertiajs, Laravel, Tailwind) available on the internet will be facing problem of broken links (specifically inertia-link). Therefore, you need to see the official documentation first before cursing VILT stack tutorials available on the Internet.

So what just happened? In short words, the global components of Head and Link have been removed from global scope in the latest releases of Inertia.js. For full answer, this link may be visited.

So, how to patch things up?

Solution 1:

In each Vue file which contains <inertia-link> and in its inner components, import Head and Link as follows;

<script>
import { Head, Link } from '@inertiajs/inertia-vue'  // for Vue 2
import { Head, Link } from '@inertiajs/inertia-vue3' // for Vue 3
export default {
  components: {
    Head,
    Link,
  }
}
</script>

And change all the link tags in template from <inertia-link> to <Link> For example, convert

<inertia-link class="border bg-indigo-300 rounded-xl px-4 py-2 m-4" :href="route('posts.create')">
   <span>Create</span>
</inertia-link>

to

<Link class="border bg-indigo-300 rounded-xl px-4 py-2 m-4" :href="route('posts.create')">
   <span>Create</span>
</Link>        

Solution 2:

Register the Head and Link components globally and let the other things as they were. In this case you’ll just need to change resources/js/app.js as follows and let the <inertia-link> in templates as they were.

// Vue 2

import { Head, Link } from '@inertiajs/inertia-vue'

Vue.component('InertiaHead', Head)
Vue.component('InertiaLink', Link)

// Vue 3

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)
  },
})

For further details and actual implementation of the above in a Laravel 8 CRUD app, this tutorial may be followed.