I have a project where I would like to use this topic. I just downloaded it and placed its scripts in the resources/assets/js directory. This is how I call all the scripts after running the gulp that I need for the page:
<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> <script src="/js/bootstrap-checkbox-radio.js"></script> <script src="/js/bootstrap-notify.js"></script> <script src="/js/paper-dashboard.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.notify({ icon: 'ti-gift', message: "Welcome to <b>Paper Dashboard</b> - a beautiful Bootstrap freebie for your next project." },{ type: 'success', timer: 4000 }); }); </script> <script src="/js/app.js"></script>
But then I can not get a loading error message or tooltip, if I remove app.js, I will work again, but then the vue components do not work.
This is the app.js app:
require('./bootstrap'); var VueResource = require('vue-resource'); 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 this is the gulpfile file:
const elixir = require('laravel-elixir'); require('laravel-elixir-vue'); 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 would like craig_h to suggest at the bottom of my bootstrap.js files, like this:
require('./bootstrap-checkbox-radio.js'); require('./bootstrap-notify.js'); require('./paper-dashboard.js');
But I get an error message:
paper-dashboard.js? 16eb: 26Uncaught ReferenceError: lbd is not defined (...)
This is script paper-dashboard.js:
var fixedTop = false; var navbar_initialized = false; $(document).ready(function(){ window_width = $(window).width(); // Init navigation toggle for small screens if(window_width <= 991){ lbd.initRightMenu(); } // Activate the tooltips $('[rel="tooltip"]').tooltip(); }); // activate collapse right menu when the windows is 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 the bg color and active color from the default sidebar to the 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 the content from the regular header to the right menu $off_canvas_sidebar.children('ul').each(function(){ content_buff = $(this).html(); ul_content = ul_content + content_buff; }); // add the content from the sidebar to the 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 a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on the // leading edge, instead of the 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); }; };
We apologize if this is a beginner's question, but I have not used a web package or a browser, so I do not know how to configure all this.