title: Laravel/Inertia how to register globally the Link component
body: <p>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 <code>&lt;Link ...&gt;</code> component instead of <code>&lt;a ...&gt;</code> to get the SPA behaivour. Problem is that I have to import the Link component on every other component that'll use links.</p>
  <p>So, if I have a Page, I should do something like this:</p>
  <pre><code>&lt;template&gt;
    ...
    &lt;Link href=&quot;/about&quot; class=&quot;...&quot;&gt;
      About Page
    &lt;/Link&gt;
    ...
  &lt;/template&gt;
  
  &lt;script&gt;
  import { Head, Link } from &quot;@inertiajs/inertia-vue3&quot;;
  
  export default {
    components: {
      Head,
      Link,
    },
    ...
  };
  &lt;/script&gt;
  </code></pre>
  <p>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 <code>Link</code> is the most common element on a page other than plan text.</p>
  <p>Here <a href="https://inertiajs.com/releases/inertia-vue3-0.5.0-2021-07-13" rel="nofollow noreferrer">https://inertiajs.com/releases/inertia-vue3-0.5.0-2021-07-13</a> in the documentation says you can register <code>Link</code> and <code>Head</code> components globally, so my <code>app.js</code> code looks like:</p>
  <pre><code>require(&quot;./bootstrap&quot;);
  
  import { createApp, h } from &quot;vue&quot;;
  import { createInertiaApp } from &quot;@inertiajs/inertia-vue3&quot;;
  import { InertiaProgress } from &quot;@inertiajs/progress&quot;;
  import { Head, Link } from &quot;@inertiajs/inertia-vue3&quot;;
  
  const appName =
    window.document.getElementsByTagName(&quot;title&quot;)[0]?.innerText || &quot;Laravel&quot;;
  
  createInertiaApp({
    title: (title) =&gt; `${title} - ${appName}`,
    resolve: (name) =&gt; require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
      createApp({ render: () =&gt; h(app, props) })
        .use(plugin)
        .component(&quot;InertiaHead&quot;, Head)
        .component(&quot;InertiaLink&quot;, Link)
        .mixin({ methods: { route } })
        .mount(el);
    },
  });
  </code></pre>
  <p>As the documentation says, but this does nothing. When I comment the <code>import ...</code> and <code>components</code> section on my page component. It doesn't throw an error, but it doesn't display anything, not even the text.</p>
  <p>Any idea?</p>