Laravel-mix: Laravel Mix - Multiple vue.js apps

[bhaidar]

Hi,
I have two web apps built on top of Vue.js. The first is used by end-users and the second used by Admins.

Each app has its own app.js file.

Inside the blade view, the two apps' js files are loading fine. However, the scss inside admin vue components are not showing anywhere.

Any idea how to compile and extract all admin vue.js component scss into a single file and use it inside the admin blade view?

Thanks

[bhaidar]

Anyone can check this out pls?

[ice6]

@bhaidar this can help, I use it in my project.

webpack.mix.js

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

if (process.env.section) {
    require(`${__dirname}/webpack.mix.${process.env.section}.js`);
}

webpack.mix.admin.js

your normal mix script ...

webpack.mix.front.js

your normal mix script ...

package.json

```
...cross-env process.env.section=front...

...cross-env process.env.section=admin...
````

[bhaidar]

Thanks @ice6! Does this setup mean I can run one at a time?

Let me give you a brief on what I am trying to do:

I did some trials with the mix file. For instance, I added multiple SCSS files. Only the last one in the list is used to store the SCSS from the Vue components and other SCSS files.

For example:

mix .js('resources/assets/js/app.js', 'public/js') .js('resources/assets/js/admin-app.js', 'public/js') .webpackConfig({ resolve: { alias: { '@': __dirname + '/resources/assets/js', }, }, }) .sass('resources/assets/sass/app.scss', 'public/css') .sass('resources/assets/sass/admin-app.scss', 'public/css') .sass('resources/assets/sass/ITCSS/itcss.scss', 'public/css') .version();

The itcss.scss has all of the CSS in the app. If I switch the last two lines, then admin-app.scss has all of the CSS in the app. Is that a known behavior?

In addition, I have the following setup:

resources\js\app.js is the first Vue app. It has components and files under resources\js\components, resources\js\views, etc.

resources\js\admin-app.js is the second Vue app. It has components and files under resources\js\admin folder.

If I add styles to a single component inside resources\js\admin folder, then the final CSS file has the CSS collected from inside resources\js\admin folder. The files and folders belonging to the first app are ignored.

Any idea?

[roitto]

If you wait a while for the release of stable webpack 5 and a new laravel-mix, you can use module federation to easily share modules between differrent public/admin sites.

https://indepth.dev/webpack-5-module-federation-a-game-changer-in-javascript-architecture/

[ScriptedAlchemy]

Currently stable. Adding advanced features to module federation, but WP5 is prod ready

[solicomo]

@bhaidar this can help, I use it in my project.

webpack.mix.js

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

if (process.env.section) {
    require(`${__dirname}/webpack.mix.${process.env.section}.js`);
}

webpack.mix.admin.js

your normal mix script ...

webpack.mix.front.js

your normal mix script ...

package.json

...cross-env process.env.section=front...

...cross-env process.env.section=admin...

You don't even need the code in webpack.mix.js or the new argument process.env.section.
Just use --env.mixfile and you're good to go.

cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --env.mixfile=webpack.mix.admin --config=node_modules/laravel-mix/setup/webpack.config.js

See --env.mixfile=webpack.mix.admin in the above line. It indicates we're going to use webpack.mix.admin.js.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.