I
I
Igor Silakov2017-02-04 10:59:25
webpack
Igor Silakov, 2017-02-04 10:59:25

Why doesn't js work in material-design-lite menu?

In the template (copy-pasted from the mdl guide) app.blade.php:

<!-- Always shows a header, even in smaller screens. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <header class="mdl-layout__header">
            <div class="mdl-layout__header-row">
                <!-- Title -->
                <span class="mdl-layout-title">Title</span>
                <!-- Add spacer, to align navigation to the right -->
                <div class="mdl-layout-spacer"></div>
                <!-- Navigation. We hide it in small screens. -->
                <nav class="mdl-navigation mdl-layout--large-screen-only">
                    <a class="mdl-navigation__link" href="">Link</a>
                    <a class="mdl-navigation__link" href="">Link</a>
                    <a class="mdl-navigation__link" href="">Link</a>
                    <a class="mdl-navigation__link" href="">Link</a>
                </nav>
            </div>
        </header>
        <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">Title</span>
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
            </nav>
        </div>
        <main class="mdl-layout__content">
            <div class="page-content">
                <router-view></router-view>
            </div>
        </main>
    </div>

In app.js:
import 'material-design-lite/dist/material.min.js'
Webpack builds the bundle.
CSS styles are collected in a separate style.css
As a result, the styles work, that is, the menu on the page looks like it should, but clicking on the sandwich does nothing.
4edbea5cb8b6471c968db76bc4eb4b5c.png
There are no errors on the console.
Googled that we should use componentHandler , but its various calls to mounted () did not lead to anything.
I checked that the dependence is being tightened: yes, it is being tightened.
Styles, respectively, too.
What am I doing wrong?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question