Having multiple app.js

I am building a SPA with Laravel and Inertia Vue. The app has 3 roles and I want to split app.js for each role, meaning each role dashboard will have separate app.js. Maybe something like role1app.js role2app.js and role3app.js

I tried making a separate .js file but inertia/webpack is combining it in one app.js.

How can I split them?

Sinnbeck

4 years ago

Level 102

Show your laravel.mix file

adityar15

4 years ago

Level 2

@sinnbeck Here it is

const mix = require('laravel-mix');

 
 const path = require('path'); mix.alias({ ziggy: path.resolve('vendor/tightenco/ziggy/dist.vue') });


mix.js('resources/js/app.js','public/js').vue().version();
mix.js('resources/js/role1app.js','public/js').vue().version(); 
mix.js('resources/js/role2app.js','public/js').vue().version(); 
 




 mix.webpackConfig({
  output: {
    chunkFilename: 'js/[name].js?id=[chunkhash]',
  }
});



  

```

Tray2

4 years ago

Level 73

I think you should keep it in one file unless it becomes very big. You can however split them during development.

adityar15

4 years ago

Level 2

@tray2 thanks for the reply. If I keep it in one file then it will be big. I am doing code splitting as well with async components. It is not halfway yet and it is already in some MBs. That's why I was trying to figure out a solution to split it.

adityar15

4 years ago

Best Answer

Level 2

Okay, I got the solution. So it was Inertia who was combining it all together. I just need to split the Pages into folder structure which I did it already and then in each app.js file I have to change the following

//from this 
createInertiaApp({
    resolve: (name) => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(store)
            .mixin({ methods: { route: window.route } })
            .mount(el);
    },
});

//to this

createInertiaApp({
    resolve: (name) => require(`./Pages/Role1/${name}`), // changed here
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(store)
            .mixin({ methods: { route: window.route } })
            .mount(el);
    },
});

2 likes

Aniket_IN

3 years ago

Level 1

@adityar15 I'm also trying to implement the exact same thing, can you help me a bit? I mean how you handling this in controller?

How would our controller know which app.js to use?

adityar15

3 years ago

Level 2

@Aniket_IN The controller doesn't need to know which app.js to handle as this is a front-end feature. Rather you need to set the rootView of Inertia.

In my case I have two different blade files which are acting as inertia layouts.

role.blade.php
role1.blade.php

in my role.blade.php I am including the js file which has code something like this

//all imports
 
createInertiaApp({
    resolve: (name) => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(store)
            .mixin({ methods: { route: window.route } })
            .mount(el);
    },
});

in my role1.blade.php I am including the js file which has code as follows

// all imports
createInertiaApp({
    resolve: (name) => require(`./Pages/Role1/${name}`), // changed here
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(store)
            .mixin({ methods: { route: window.route } })
            .mount(el);
    },
});

Now from my controller, I can change the rootView of Inertia or I can change it in the middleware depending upon the route prefix.

Hope this helps

1 like

Please or to participate in this conversation.