javascript - Laravel - making vue work with other plugins -

i have project use theme. downloaded , put scripts resources/assets/js directory. how calling scripts, after run gulp, need page:

<!-- scripts --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hvvnyaiadrto2pzugmuljr8blusjgizsdygmijlv2b8=" crossorigin="anonymous"></script> <script src="/js/bootstrap.min.js" type="text/javascript"></script> <script type="text/javascript" src="/js/material/material.min.js"></script> <script type="text/javascript" src="/js/material/ripples.min.js"></script> <script>$.material.init()</script>  <!--  checkbox, radio & switch plugins --> <script src="/js/bootstrap-checkbox-radio.js"></script>  <!--  notifications plugin    --> <script src="/js/bootstrap-notify.js"></script>  <!-- paper dashboard core javascript , methods demo purpose --> <script src="/js/paper-dashboard.js"></script>    <script type="text/javascript">   $(document).ready(function(){       $.notify({           icon: 'ti-gift',           message: "welcome <b>paper dashboard</b> - beautiful bootstrap freebie next project."          },{             type: 'success',             timer: 4000         });    }); </script> <script src="/js/app.js"></script> 

but can't bootstrap notify or tooltip work, if remove app.js working again, vue components not working.

this app.js:

/**  * first load of project's javascript dependencies  * include vue , vue resource. gives great starting point  * building robust, powerful web applications using vue , laravel.  */  require('./bootstrap');  var vueresource = require('vue-resource');  /**  * next, create fresh vue application instance , attach  * body of page. here, may begin adding components  * application, or feel free tweak setup needs.  */  vue.component('video-upload', require('./components/videoupload.vue')); vue.component('video-player', require('./components/videoplayer.vue')); vue.component('video-voting', require('./components/videovoting.vue'));  vue.use(vueresource);  const app = new vue({     el: 'body',     data: window.videoapp }); 

and gulpfile:

const elixir = require('laravel-elixir');  require('laravel-elixir-vue');  /*  |--------------------------------------------------------------------------  | elixir asset management  |--------------------------------------------------------------------------  |  | elixir provides clean, fluent api defining basic gulp tasks  | laravel application. default, compiling sass  | file our application, publishing vendor resources.  |  */  elixir(mix => {     mix.copy('resources/assets/js', 'public/js');     mix.copy('resources/assets/css', 'public/css');      mix.sass('app.scss')        .webpack('app.js'); }); 

update

i have required craig_h suggested @ bottom of bootstrap.js files this:

require('./bootstrap-checkbox-radio.js'); require('./bootstrap-notify.js'); require('./paper-dashboard.js'); 

but error:

paper-dashboard.js?16eb:26uncaught referenceerror: lbd not defined(…)

this script paper-dashboard.js:

var fixedtop = false;  var navbar_initialized = false;  $(document).ready(function(){     window_width = $(window).width();      // init navigation toggle small screens     if(window_width <= 991){         lbd.initrightmenu();     }      //  activate tooltips     $('[rel="tooltip"]').tooltip();  });  // activate collapse right menu when windows resized $(window).resize(function(){     if($(window).width() <= 991){         lbd.initrightmenu();     } });  lbd = {     misc:{         navbar_menu_visible: 0     },      initrightmenu: function(){          if(!navbar_initialized){             $off_canvas_sidebar = $('nav').find('.navbar-collapse').first().clone(true);              $sidebar = $('.sidebar');             sidebar_bg_color = $sidebar.data('background-color');             sidebar_active_color = $sidebar.data('active-color');              $logo = $sidebar.find('.logo').first();             logo_content = $logo[0].outerhtml;              ul_content = '';              // set bg color , active color default sidebar off canvas sidebar;             $off_canvas_sidebar.attr('data-background-color',sidebar_bg_color);             $off_canvas_sidebar.attr('data-active-color',sidebar_active_color);              $off_canvas_sidebar.addclass('off-canvas-sidebar');              //add content regular header right menu             $off_canvas_sidebar.children('ul').each(function(){                 content_buff = $(this).html();                 ul_content = ul_content + content_buff;             });              // add content sidebar right menu             content_buff = $sidebar.find('.nav').html();             ul_content = ul_content + '<li class="divider"></li>'+ content_buff;              ul_content = '<ul class="nav navbar-nav">' + ul_content + '</ul>';              navbar_content = logo_content + ul_content;             navbar_content = '<div class="sidebar-wrapper">' + navbar_content + '</div>';              $off_canvas_sidebar.html(navbar_content);              $('body').append($off_canvas_sidebar);               $toggle = $('.navbar-toggle');               $off_canvas_sidebar.find('a').removeclass('btn btn-round btn-default');              $off_canvas_sidebar.find('button').removeclass('btn-round btn-fill btn-info btn-primary btn-success btn-danger btn-warning btn-neutral');              $off_canvas_sidebar.find('button').addclass('btn-simple btn-block');               $toggle.click(function (){                 if(lbd.misc.navbar_menu_visible == 1) {                     $('html').removeclass('nav-open');                     lbd.misc.navbar_menu_visible = 0;                     $('#bodyclick').remove();                      settimeout(function(){                         $toggle.removeclass('toggled');                      }, 400);                  } else {                     settimeout(function(){                         $toggle.addclass('toggled');                     }, 430);                      div = '<div id="bodyclick"></div>';                     $(div).appendto("body").click(function() {                         $('html').removeclass('nav-open');                         lbd.misc.navbar_menu_visible = 0;                         $('#bodyclick').remove();                          settimeout(function(){                             $toggle.removeclass('toggled');                          }, 400);                     });                      $('html').addclass('nav-open');                     lbd.misc.navbar_menu_visible = 1;                  }             });             navbar_initialized = true;         }      } }   // returns function, that, long continues invoked, not // triggered. function called after stops being called // n milliseconds. if `immediate` passed, trigger function on // leading edge, instead of trailing.  function debounce(func, wait, immediate) {     var timeout;     return function() {         var context = this, args = arguments;         cleartimeout(timeout);         timeout = settimeout(function() {             timeout = null;             if (!immediate) func.apply(context, args);         }, wait);         if (immediate && !timeout) func.apply(context, args);     }; }; 

my apologizes if begginers question, have not used webpack or browserify before don't know how setup of this.

i don't use webpack use browserify instead, think problem using packages rely on global variables, if want need use importer, see shimming modules

however, can away requiring them in: /resources/assets/js/bootstrap.js so:

require('./bootstrap-checkbox-radio.js')

require('./bootstrap-notify.js')

require('./paper-dashboard.js')

then running gulp