Hello, I want to use SB Admin 2 template from https://github.com/dpwilhelmsen/sb-admin-2-bootstrap-4 In my Laravel 5.7 / Vuejs 2.6 / Vuex 3.1/ Bootstrap 4.3 app and I take some steps for it : As it is based in metismenu In console I run next commands : npm install --save metismenu npm i popper npm audit fix Code (markup): In resources/js/app.js I included metismenu: require('./bootstrap'); //require('popper'); /* If to uncomment line above in console I got lot of errors : WARNING in ./node_modules/popper/index.js 235:35-58 Critical dependency: the request of a dependency is an expression @ ./resources/js/app.js @ multi ./resources/js/app.js ./resources/sass/sb2/app.scss ./resources/sass/sb2/sb-admin-2.scss */ require('metismenu'); require('jquery'); window.Vue = require('vue'); ... Code (JavaScript): In resources/js/helpers/commonFuncs.js which is used in all vue pages I init menu at method : export function checkAuthorization(store, router) { // console.log("-11 checkAuthorization::") router.beforeEach((to, from, next) => { jQueryInit(); next(); ... function jQueryInit() { // alert( "jQueryInit"+(-55) ) $(function () { // alert( "INSIDE::"+var_dump(-11) ) $('#side-menu').metisMenu(); console.log("Inside $('#side-menu')::") console.log($('#side-menu')) }); //Loads the correct sidebar on window load, //collapses the sidebar on window resize. // Sets the min-height of #page-wrapper to window size $(function () { var setupPage = function () { var topOffset = 50; console.log("++1 typeof window::") console.log(typeof window) console.log(window) var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; if (width < 768) { $('div.navbar-collapse').removeClass('show'); topOffset = 100; // 2-row-menu } else { $('div.navbar-collapse').addClass('show'); } console.log("++2 typeof window::") console.log(typeof window) console.log(window) var height = ((window.innerHeight > 0) ? window.innerHeight : screen.height) - 1; height = height - topOffset; if (height < 1) height = 1; if (height > topOffset) { $("#page-wrapper").css("min-height", (height) + "px"); } }; // debugger $(window).bind("load resize", setupPage); var url = window.location; var element = $('ul.nav a').filter(function () { return this.href == url; }).addClass('active').parent(); while (true) { if (element.is('li')) { element = element.parent().addClass('in').parent(); } else { break; } } setupPage(); }); alert( "AFTER jQueryInit"+(-55) ) } Code (JavaScript): looking at console I do not see any JS errors and it looks that window is proper JS object. I suppose that is best place for init of metismenu. I did not attache any metisMenu.js / css files manually sopposing that command asbove require('metismenu'); Code (JavaScript): made it. But layout of my page is broken. You can look at it live at http://hostels-tours.nilov-sergey-demo-apps.tk/admin/dashboard Please, pay attention at console output : https://imgur.com/a/xZ0EVNg I added style definition : #wrapper { width: 100%; background-color: yellow; border: 2px dotted red; } Code (CSS): to be sure that styling in resources/sass/sb2/sb-admin-2.scss are applied. What is wrong and is it possible to work in vue app metisMenu.js ? Thanks!
Sorry, I still search for decision, any idea why I failed to run properly MetisMenu in vuejs app? Who did such way ? MetisMenu is very popular ...
Why are you using JavaScript -- especially some garbage off the shelf script that reeks of the worst of late '90's early '00's -- to do what HTML and CSS should be doing WITHOUT scripting even involved? Oh, that's why. The "keep throwing frameworks at everything because I never learned how anything works" approach. So hot and trendy, and the 'norm' even if it is an epic /FAIL/ at development. Derpismenu is more like it. Nothing like an ass-load of client-side scripting to do 1/10th the code in HTML+CSS' job. You're building full stack, USE IT! See, this is why I rail against all that garbage.