Laravel/Inertia how to register globally the Link component

  inertiajs, laravel, vue.js

I’m pretty new to Inertia (I have enough experience with Laravel), so I’m writting a toy SPA application. I learn that I must use the <Link ...> component instead of <a ...> to get the SPA behaivour. Problem is that I have to import the Link component on every other component that’ll use links.

So, if I have a Page, I should do something like this:

  <Link href="/about" class="...">
    About Page

import { Head, Link } from "@inertiajs/inertia-vue3";

export default {
  components: {

And this works, but I think it’s quite unefficient, boresome and so to have to import the Head and Link components for every page, after all a Link is the most common element on a page other than plan text.

Here in the documentation says you can register Link and Head components globally, so my app.js code looks like:


import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
import { Head, Link } from "@inertiajs/inertia-vue3";

const appName =
  window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";

  title: (title) => `${title} - ${appName}`,
  resolve: (name) => require(`./Pages/${name}.vue`),
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .component("InertiaHead", Head)
      .component("InertiaLink", Link)
      .mixin({ methods: { route } })

As the documentation says, but this does nothing. When I comment the import ... and components section on my page component. It doesn’t throw an error, but it doesn’t display anything, not even the text.

Any idea?

Source: Laravel

Leave a Reply