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:

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

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

export default {
  components: {
    Head,
    Link,
  },
  ...
};
</script>

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 https://inertiajs.com/releases/inertia-vue3-0.5.0-2021-07-13 in the documentation says you can register Link and Head components globally, so my app.js code looks like:

require("./bootstrap");

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";

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

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