This topic contains 2 replies, has 2 voices, and was last updated by Sean Sean 2 years ago.

Making Metronic work with VUE.js


  • theanimalix
    Participant

    Posts: 37
    Member Reply #10077

    Hey,

    One of my pages contains some VUE components (from Laravel passport: https://github.com/laravel/passport/tree/2.0/resources) and in order to get get it working with Metronic I had to replace <script> HTML tag responsible for loading VUE components with code that loads the dependencies  dynamically, after the DOM is ready:
    <pre style=”background-color: #2b2b2b; color: #a9b7c6; font-family: ‘Courier New’; font-size: 7,6pt;”><span style=”background-color: #344134;”>$</span>(<span style=”color: #9876aa;”>document</span>).<span style=”color: #ffc66d;”>ready</span>(<span style=”color: #cc7832; font-weight: bold;”>function </span>() {
    <span style=”background-color: #344134;”>$</span>.<span style=”color: #ffc66d;”>getScript</span>(<span style=”color: #6a8759;”>'</span>{{<span style=”background-color: #232525;”>elixir(</span><span style=”color: #6a8759; background-color: #232525;”>’js/oauth.js'</span><span style=”background-color: #232525;”>)</span>}}<span style=”color: #6a8759;”>'</span>)<span style=”color: #cc7832;”>;
    </span>})<span style=”color: #cc7832;”>;</span>

    …without doing this Metronic would throw an error on right after page loads, when executing Metronics “handleSidebarMenu” method.

    PROBLEM:

    By doing above VUE components seem to work perfectly, but now I’m getting an exception from layout.js….whenever I click any Metronic dropdown I get an error “Uncaught TypeError: $(…).parents(…).size is not a function” from this line:

    <pre style=”background-color: #2b2b2b; color: #a9b7c6; font-family: ‘Courier New’; font-size: 7,6pt;”><span style=”color: #cc7832; font-weight: bold;”>if </span>(App.<span style=”color: #ffc66d;”>getViewPort</span>().<span style=”color: #9876aa;”>width </span>>= resBreakpointMd && that.<span style=”color: #ffc66d;”>parents</span>(<span style=”color: #6a8759;”>’.page-sidebar-menu-hover-submenu'</span>).size() === <span style=”color: #6897bb;”>1</span>) { <span style=”color: #808080;”>// exit of hover sidebar menu
    </span> <span style=”color: #cc7832; font-weight: bold;”>return</span><span style=”color: #cc7832;”>;
    </span>}

    I’m a bit confused how to address that, since this only happens on one page (the one containing VUE component), but works OK on other pages.

    Any suggestion how to resolve this?

    Look forward to hear from you.

    • This topic was modified 2 years ago by  theanimalix.

    theanimalix
    Participant

    Posts: 37
    Member Reply #10079

    Seems like my code snippets got corrupted after submission because they contained styling, but I can’t update the post above, so I’m posting it again:

    $(document).ready(function () {
    $.getScript(‘{{elixir(’js/oauth.js’)}}’);
    });

    …and…

    if (App.getViewPort().width >= resBreakpointMd && that.parents(’.page-sidebar-menu-hover-submenu’).size() === 1) { // exit of hover sidebar menu
    return;
    }

     

     

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #10085

    Hi,

    Please provide us a test link to your site and we will try to check it online. Otherwise we can not give you any advice by just referring to your code here.

    Thanks.

You must be logged in to reply to this topic.