0

I have Laravel 5.3.21 application with Vue.js 1.0.28

I'm using hot-reload workflow with browserify-hmr plugin.

Here is the simple gulpfile.js used to achieve that:

var elixir = require('laravel-elixir');
var gutil = require('gulp-util');

require('laravel-elixir-browserify-official');
require('laravel-elixir-vueify');

//  If 'gulp watch' is run
if (gutil.env._.indexOf('watch') > -1) {

    //  Enable watchify for faster builds
    elixir.config.js.browserify.watchify.enabled = true;

    //  Add the browserify HMR plugin
    elixir.config.js.browserify.plugins.push({
        name: 'browserify-hmr',
        options: {
            url: 'http://1.2.3.4:2096',
            hostname: '1.2.3.4',
            port: 2096
        }
    })

}
elixir.config.js.browserify.watchify.options.poll = true;

elixir(function (mix) {
    mix.copy('node_modules/datatables.net-bs/css/dataTables.bootstrap.css',
             'resources/assets/css/vendor/dataTables.bootstrap.css');
    mix.styles([
        'vendor/dataTables.bootstrap.css'
    ]);
    mix.sass('app.scss');
    mix.browserify('app.js');
});

I need to load components dynamically from the resources/assets/js/views/ folder, so I could make my front-end code modular and based on current route name $Laravel->routeName = request()->route()->getName() in Laravel.

For example:

// Global Settings.
Route::get('admin/settings', 'Admin@settings')
    ->name('admin_global_settings');

Then in resources/assets/js/views/admin/admin_global_settings.js I have code to initialize Vue.js component and register it with Vue.js instance:

var FeaturedOpportunities = require( '../../components/Featured-Opportunities.vue' );
window.Vue.component('FeaturedOpportunities', FeaturedOpportunities);

That is all nice but here is the problem in resources/assets/js/app.js:

window.Vue = require('vue');
require('vue-resource');

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
    next();
});

// Problem is here, have to keep track of all my routes and their corresponding modules:
var routes = {
    'organization_invites_roles': function () {
        require('./views/organization/organization_invites_roles');
    },
    'admin_global_settings': function () {
        require('./views/admin/admin_global_settings');
    },
};

// Is there a way to load it dynamically?
if (Laravel.routeName) {
    if (routes[Laravel.routeName]) {
        routes[Laravel.routeName]();
    }
}

new Vue({
    el: 'body',

    components: {

    },

    ready() {
        console.log('Vue and Vueify all set to go!');
    }
});

I've found some way that could probably solve this issue: Compiling dynamically required modules with Browserify but not sure if this applicable for my case.

Community
  • 1
  • 1
Nikolay Konovalov
  • 77
  • 2
  • 8
  • 1
    you can try to look at this guide https://laracasts.com/discuss/channels/vue/how-to-elixir-vue-browsersync-vueify-hotreload – Duy Anh Dec 06 '16 at 09:50
  • @DuyAnh Thank you for the link, I've actually read it a long time ago when started learning Vue.js but yesterday I've read it again and saw there a workaround example when you have multiple bundles in your gulpfile. That is what I actually wanted to have from the beginning. Would post solution later if that works. – Nikolay Konovalov Dec 07 '16 at 18:07

0 Answers0