global components in createInertiaApp() method

[andrewl64]

How to add global components to the createInertiaApp() method?

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

[greenspace10]

for just a couple of componets to can just use .component() method on the createApp function

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import Button from '@/Components/Button.vue';
import TextInput from '@/Components/TextInput.vue';

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .component('Button', Button)        <-- registers Button globally
      .component('TextInput', TextInput)    <-- registers TextInput globally
      .mount(el)
  },
})

alternatively, if you have alot of components to load globally then I use something like this.

./plugins/global-components.js

import { defineAsyncComponent } from 'vue';

export default {
    install(app) {
        const components = import.meta.globEager('@/Components/Base/**/*.vue');
        Object.entries(components).forEach(([path, definition]) => {
            const componentName = path
                .split('/')
                .pop()
                .replace(/\.\w+$/, '');
            app.component(componentName, definition.default);
        });
    },
};

and then in app.js

import GlobalComponents from '@/plugins/global-components';
createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
    setup({ el, App, props }) {
       return (
            createApp({ render: () => h(app, props) })
                .use(plugin)
                .use(GlobalComponents) // << this will call the global-components.js to load all the components in the base dir
                .mount(el)
        );
    },
});