Import a Vue js component from Laravel Blade File

Question

I have registered a some components as a global components in js/app.js file, But this makes the compiled app.js file larger.

//example         


        

Answer 1

As like Caddy DZ answered it's the way to go with laravel-mix. (CaddyDz happen to be my close friend by the way hhhh)

https://stackoverflow.com/a/58122158/7668448

Multi pages, multi bundles! laravel-mix-glob is the answer

However if there is multi pages. And keeping doing it that way. It's a bit of hassle. Or not the coolest of the ways. For this purpose i developed a pakage laravel-mix-glob. Which is a wrapper around laravel-mix. That do some magic for you.

Which allow you to use globs and have all the files that get added automatically handled for you. In place of managing them file by file. Page by page.

The use is so simple. You can check the package here:

https://www.npmjs.com/package/laravel-mix-glob

The documentation explain everything. You have to check the portion about the compileSpecifier

You can give it a one read. And then you'll be more productive. And the magic just happen. Even everything is explained within the doc even how laravel-mix-glob work.

You can also check this issue. Which show some nice points:

https://github.com/MohamedLamineAllal/laravel-mix-glob/issues/5#issuecomment-537991979

And to clear things even just here. Here a use example:

// imports
const mix = require('laravel-mix'); // you need the laravel mix instance
const MixGlob = require('laravel-mix-glob');

// init
const mixGlob = new MixGlob({mix}); // mix is required
// or 
const mixGlob = new MixGlob({
    mix, // mix required
    mapping: { // optional
        // see the doc
    },
    // more options maybe added in future version (fill issues if you need anything, or a PR if you like)
});


// use mixGlob
mixGlob.sass('resources/sass/**/*.compile.scss', 'public/css', null, {
    base: 'resources/sass/',
    // compileSpecifier: { 
    //     disabled: true // there is no compile specifier (disabled), and so it will not be removed from the extension (by default disabled = false, and the default specifier = 'compile', and it get removed from the path)
    //      ,
    //      specifier: 'cmp'
    // }
    // mapping: {   // this take precedency over any other mapping // useless feature as laravel-mix doesn't support output in different formats. (until i find a workaround)
    //     ext: {
    //         'scss': 'css' // multiple files separatly
    //     },
        // or
        // ext: 'css', // all to the same
        //   
    // }
})
.js(['resources/js/**/*.compile.{js,jsm}', '!resources/js/secondPattern/**/*'], 'public/js/', null, {
    base: 'resources/js/'
}) // multiple globs pattern as an array. Also with exclusion support (!)
.js('resources/js/secondPattern/**/*.compile.{js,jsm}', 'public/js', null, {
    base: 'resources/js/secondPattern'
})
.ts(['resources/js/ts/**/*.compile.ts', 'resources/js/tsx/**/*.compile.tsx'], 'public/js', null, {
    base: {
        ts: 'resources/js/ts/', // per file extension  mapping
        tsx: 'resources/js/tsx/**/*.compile.tsx'
    }
})
.mix('sass')('resources/sass/summernote.scss', '../resources/views/system/admin/dashboard/partials/_summernote_css.blade.php'); // laravel-mix instance

Some notes

For the bellow

.js(['resources/js/**/*.compile.{js,jsm}', '!resources/js/secondPattern/**/*'], 'public/js/', null, {
    base: 'resources/js/'
})

It translate to take all the js or jsm files in the directory resources/js/ or any of it's sub directories at all levels. And that are not part of resources/js/secondPattern/**/*. And output them in public/js. Holding the same structure from the base resources/js/. Whenever you add a new file that respect that structure it will be automatically compiled for you (well laravel-mix watcher will be restarted and with it the whole build). And you don't have to do it file by file. At all.

For instance let say at start you have 6 files that match the patterns. laravel-mix-glob automatically will make all the 6 right calls. And then even when you add new file it know automatically and recompile.

And laravel-mix-glob leverage all the best glob patterns. In the most intuitive way. Going from simple to the most complex. And the people used to use the glob libraries. Gulp. Or many other tools. Will just find it too familiar. Everything is simple. And it's all explained in the doc. There is many examples too.

compileSpecifier

It's an important feature. Imaging you want to bundle only few files from many. Adding the specifier and having the feature to be automatically managed and stripped from the output is just interesting and effective. That's the motivation. By default is activated you can deactivated as shown in the example bellow.

Final words

Check the doc as it's more complete and tackle all the different parts. The package was been there for months now. And it was well tested in Linux. More less in windows. But many users of both platform used it. And it work perfectly and magically. To give you more comfort and allow you to be more productive.

Also as the author i'm too open to the community. I review and handle PR with great joy. And i like to have contributors. So any interested one can let me know. Here or by filling an issue.