InertiaJS and Laravel-Modules

Hello, I may have a strange question, but I have it.

I'm using InertiaJS and a modular structure (laravel-modules from nWidart) and VITE is in one of the main modules. Now I'm faced with a problem: if I try to render a page in another module, "Inertia" always goes along the path of the main module.

Example: Example: Here is VITE and the main module with vue components:

/Modules/GeneralModule/vite.config.js
/Modules/GeneralModule/Resources/js/app.js
/Modules/GeneralModule/Resources/js/Pages/MyModule1.vue

But some components are located in other modules. I don't understand how to access them. /Modules/SecondModule/Resources/js/Pages/MyModule2.vue

Which path in the controller should be specified in order to access components from another module? return Inertia::render('MyModule2.vue', $template->complete());

Part of the app.js code which is located in /Modules/GeneralModule/Resources/js/app.js

createInertiaApp({
    resolve: (name) => resolvePageComponent(
        `./Pages/${name}.vue`, import.meta.glob('./**/*.vue')
    )
});

panthro

2 years ago

Level 4

Have you tried:

import.meta.glob('./**/*.vue', { eager: true })

idsalmantm

1 year ago

Level 1

import { createApp, h } from 'vue'; import { createInertiaApp } from '@inertiajs/vue3'; import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; import { ZiggyVue } from '../../vendor/tightenco/ziggy';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({ title: (title) => ${title} - ${appName}, resolve: (name) => { const [module, page] = name.includes('::') ? name.split('::') : [null, name];

    if (module && page) {
        console.log(`Resolving from module: ../../Modules/${module}/Resources/js/Pages/${page}.vue`);
        // Look for components in Modules
        return resolvePageComponent(
            `../../Modules/${module}/Resources/js/Pages/${page}.vue`,
            import.meta.glob('../../Modules/**/Resources/js/Pages/**/*.vue')
        );
    }

    console.log(`Resolving from root: ./Pages/${name}.vue`);
    // Fallback to root Pages directory
    return resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'));
},
setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
        .use(plugin)
        .use(ZiggyVue)
        .mount(el);
},
progress: {
    color: '#4B5563',
},

});

and make sure that you run , npm run dev

Please or to participate in this conversation.