1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

    mstdmstd Active Member

    Messages:
    73
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #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:
    8,976
    Likes Received:
    1,635
    Best Answers:
    233
    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