How to use Modules-Inertia?

[jobasco]

Hi, Thanks a lot for coming up with this braliant idea. However i am a beginer in php and laravel as well so i am finding it very difficult to understand how modules-inertia works and also how to impletment it in my site.

On Vue For example

import Vue from "vue"; import { createInertiaApp, Link } from "@inertiajs/inertia-vue";

createInertiaApp({ resolve: (name) => { let page = null;

    let isModule = name.split("::");
    if (isModule.length > 1) {
        let moduleName = isModule[0];
        let pathToFile = isModule[1];
        //@modules is alias to module folder or examle ../../modules
        page = require(`@modules/${moduleName}/${pathToFile}.vue`);
    } else {
        page = require(`./Pages/${name}`);
    }

    return page.default;
},
setup({ el, App, props, plugin }) {
    Vue.use(plugin);

    new Vue({
        render: (h) => h(App, props),
    }).$mount(el);
},

});

where do put this code? i am using laravel with breeze + inertia scafolding. should i put it in laravel default Resources app.js ? or i should create app.js file in my created modules and put it there? Thanks a lot.

[YaroslavFedan]

Thanks for the feedback. In fact, you can form the file structure as you like. This is the input script to initialize vueJs with inertiaJs. You can paste this code into the default Resources app.js file. You don't need to do this for modules.

[jobasco]

Thanks, but can you please provide some simple answer here? like how to connect to modules? i have followed the procidure to link to my created module but it's showing blank. can you you please help?

[YaroslavFedan]

• Which version vue you use? My example for vue2
• Is there an error in the browser console?
• After creating the module, you didn't forget to restart npm run dev

[jobasco]

Sorry, my bad, i am using laravel 9, vue 3 and php 8.1

[YaroslavFedan]

Version laravel it doesn't matter the main thing is not lower 6. Version php too. But here is the version vue has the meaning. (Initialize app on Inertia slightly different) But I think that if you change the script in app.js to this

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";

import Layout from "@backend/Shared/Layout"; // it`s your layout if you his needed

createInertiaApp({
    resolve: (name) => {
        let page = null;

        let isModule = name.split("::");
        if (isModule.length > 1) {
            let module = isModule[0];
            let pathTo = isModule[1];

            page = require(`@modules/${module}/${pathTo}.vue`);
        } else {
            page = require(`./Pages/${name}`);
        }

        page.default.layout = Layout; // delete this if you don`t use layout

        return page.default;
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});

should earn.

[jobasco]

Hi, are we not supposed to modify the vite.config.js file? it's still not working for me. Uncaught (in promise) ReferenceError: require is not defined at resolve (app.js:21:13) at h2 (createInertiaApp.js:8:52) at exports.createInertiaApp (createInertiaApp.js:12:24) at app.js:12:1 page is blank

[YaroslavFedan]

vite.config.js is just a builder, it has nothing to do with the vue logic and cannot affect it. But in my case, I ditched Vite in favor of webpack.

ср, 7 сент. 2022 г. в 18:58, jobasc0 @.***>:

Hi, are we not supposed to modify the vite.config.js file? it's still not working for me

— Reply to this email directly, view it on GitHub https://github.com/YaroslavFedan/modules-inertia/issues/1#issuecomment-1239584409, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB7PABTKC33RGE2F7PTAR3LV5C3RFANCNFSM6AAAAAAQBEIXAY . You are receiving this because you modified the open/close state.Message ID: @.***>

[YaroslavFedan]

The advantage over webpack is supposedly in build speed, which I didn’t really notice. The default Vite configuration on my laptop did not build the bundle automatically (I had to restart). After digging around on the Internet, I found a solution to this problem, but after that my laptop began to make noise like an airplane on a runway. So I threw out Vite and installed webpack. And no problem 😎

чт, 8 сент. 2022 г. в 07:11, Ярослав Федан @.***>:

vite.config.js is just a builder, it has nothing to do with the vue logic and cannot affect it. But in my case, I ditched Vite in favor of webpack.

ср, 7 сент. 2022 г. в 18:58, jobasc0 @.***>:

Hi, are we not supposed to modify the vite.config.js file? it's still not working for me

— Reply to this email directly, view it on GitHub https://github.com/YaroslavFedan/modules-inertia/issues/1#issuecomment-1239584409, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB7PABTKC33RGE2F7PTAR3LV5C3RFANCNFSM6AAAAAAQBEIXAY . You are receiving this because you modified the open/close state.Message ID: @.***>

[YaroslavFedan]

The advantage over webpack is supposedly in build speed, which I didn’t really notice. The default Vite configuration on my laptop did not build the bundle automatically (I had to restart). After digging around on the Internet, I found a solution to this problem, but after that my laptop began to make noise like an airplane on a runway. So I threw out Vite and installed webpack. And no problem 😎

ср, 7 сент. 2022 г. в 18:58, jobasc0 @.***>:

Hi, are we not supposed to modify the vite.config.js file? it's still not working for me

— Reply to this email directly, view it on GitHub https://github.com/YaroslavFedan/modules-inertia/issues/1#issuecomment-1239584409, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB7PABTKC33RGE2F7PTAR3LV5C3RFANCNFSM6AAAAAAQBEIXAY . You are receiving this because you modified the open/close state.Message ID: @.***>

[jobasco]

Thanks, i will try and find a way.