3

How do I go about adding a global component (e.g. <Link />) to InertiaJS's createInertiaApp() method in Laravel 9?

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
    setup({ el, App, props }) {
        return render(<App {...props} />, el);
    },
});
AndrewL64
  • 15,794
  • 8
  • 47
  • 79
  • Does this answer your question? [Define global component in InertiaJS with Vue 3](https://stackoverflow.com/questions/67544184/define-global-component-in-inertiajs-with-vue-3) – ericmp Aug 30 '22 at 09:35
  • @ericmp No as I'm using the new `createInertiaApp()` method to configure Inertia. – AndrewL64 Aug 30 '22 at 10:05

1 Answers1

0

Here you have an example of a global component registration. In this case, I'm globally importing the Head component, from InertiaJS.

import { createInertiaApp, Head } from '@inertiajs/inertia-vue3';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
    setup({ el, App, props }) {
        return render(<App {...props} />, el).component('Head', Head);
    },
});

Source here.

ericmp
  • 1,163
  • 4
  • 18
  • I'm using React instead of Vue but following your approach, I first added an import for `Link` on `app.jsx` like this: `import { Link } from '@inertiajs/inertia-react';` and then changed this line: `return render(, el);` to this `return render(, el).component('Link', Link);` but when I visit any page now, I get a white screen with the console returning: `Uncaught ReferenceError: Link is not defined`. – AndrewL64 Aug 30 '22 at 20:55
  • Adding `import { Link } from '@inertiajs/inertia-react';` on individual pages and using `Link` works fine however so I know the import is working fine. – AndrewL64 Aug 30 '22 at 20:56
  • Coincidently, I was setting up Inertia by following that series you linked and got stuck with the global component registration part. I have added a comment below that video but based on a previous comment regarding the same thing, I am not sure if anyone would reply. – AndrewL64 Aug 30 '22 at 21:06