Make working properly metisMenu in vue app

Discussion in 'JavaScript' started by mstdmstd, Jun 24, 2019.

  1. #1
    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!
     
    mstdmstd, Jun 24, 2019 IP
  2. mstdmstd

    mstdmstd Well-Known Member

    Messages:
    130
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    #2
    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 ...
     
    mstdmstd, Jun 26, 2019 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    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.
     
    deathshadow, Jun 26, 2019 IP