Laravel-modules: Question: How to manage Vue components inside the module folder

[cristiangervasi]

Hi, I'm trying to use Vue JS components that are stored directly in a module Resources folder (assets/js/components).
I would rather not write for each Vue component its path in the main Laravel app.js file, so i'm thinking about editing the app.js files to scan Modules components folder and require each component automatically, but I'm not so good with the Vue JS enviroment.
Is there a simpler way to use Vue components inside modules folders?

[nWidart]

I'm not familiar enough with javascript to answer this.

This is how I've done it

[alighasemzadeh]

Hello,
But we can not run npm build production for each module installation.

[nWidart]

you can. It's up to you how you want to handle these things.

[alighasemzadeh]

Can you suggest me a solution?
When user is in shared hosting he can not run npm.

[nWidart]

That's all up to you.
If you can't run npm on the server, commit the files.

[spacemudd]

I thought of making it like how SASS components are bundled. It's quite better this way, I believe.

Suppose you have 'Blogs' module with JS/Vue component(s):

Modules/Blogs/Resources/assets/js/components/ExampleComponent/ExampleComponent.vue

Then, you would have a file called _all.js in the /js directory:

Vue.component('exmaple-component', require('./components/ExampleComponent/ExampleComponent.vue'));
... and plenty more.

And in your main project's app.js:

require('./../../../Modules/PurchaseControl/Resources/assets/js/_all');

Completely avoiding having multiple lines in the main app.js.

[mrbrackins]

Thanks @spacemudd was stuck trying to figure this myself

[enextiarg]

Maybe is useful. I am using two ways.

1. Search and register vue component that are inside of the modules
   I have created a file to register onlye the necesary componets adding this lines in /resources/assets/js/app.js

const apps = require.context('../../../Apps', true, /register\.js$/i)
apps.keys().map(key => {
    const name = key.replace('./','').replace('register.js','');
    require('../../../Apps/'+name+'register.js');
})

And this lines in Modules/MyModule/Resources/assets/js/register.js

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => {
    const name = _.last(key.split('/')).split('.')[0]
    return Vue.component(name, files(key).default)
});

And all my components inside components folder

1. Working in inside de module and publishing the mixed file in publish (i like this one)
   I start a node project inside de module with
   npm init
   And configure the mixer to publish the files inside public folder

const { mix } = require('laravel-mix');
require('laravel-mix-merge-manifest');

mix.setPublicPath('../../public').mergeManifest();

mix.js(__dirname + '/Resources/assets/js/app.js', 'enexti/mymodule/js/mymodule.js')
    .sass( __dirname + '/Resources/assets/sass/app.scss', 'enexti/mymodule/css/mymodule.css');


if (mix.inProduction()) {
    mix.version();
}

and use in the html asset
<script type="text/javascript" src="{{Module::asset('mymodyle:js/mymodule.js')}}?v1.0.1"></script>
after that i run npm run watch in order to compile de file

[dexcell]

Why not search and require all *.vue in Modules folder. More simpler IMO.

in your main app.js
````
const moduleVueFiles = require.context('../../Modules', true, /.vue$/i);
moduleVueFiles.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], moduleVueFiles(key).default));

const app = new Vue({
el: '#app'
});

````

[garbinmarcelo]

Why not search and require all *.vue in Modules folder. More simpler IMO.

in your main app.js

const moduleVueFiles = require.context('../../Modules', true, /\.vue$/i);
moduleVueFiles.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], moduleVueFiles(key).default));

const app = new Vue({
    el: '#app'
});

Hello, I'm not a JS expert, does this code look for files with a .vue extension in subfolders? it is? How is the operation of this package with vuejs, have you had any problems so far?

[willvrd]

Hello @garbinmarcelo I have been testing the code with some components and I didn't have problems.

[rohititaliaya]

I have added my app.js path Modules/csee/Resources/assets/js/app.js of modules in Main webpack.mix.js as given as under and its working within module.

webpack.mix.js

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

mix.js('Modules/csee/Resources/assets/js/app.js', 'public/js').vue();