posva/vue-mdc

Component Handler not defined

eurobob opened this issue · 14 comments

eurobob commented

I get this console error when I include a component. I'm including the MDL javascript too, maybe i'm not including it in the right place? It's a little unclear in the documentation.

Uncaught ReferenceError: componentHandler is not defined

eurobob commented

My bad! I had the defer attribute on the MDL js file, but not on my own js file.

I did however find that you need to include the MDL js before your own Vue instantiation, so perhaps this could be made clear in the docs?

posva commented

Definitely! As there is already #13, I'll fix this as well on it

pdcmoreira commented

I'm having the same error on a fresh installation with vue-cli.

main.js:

var VueMdl = require('vue-mdl');
var Vue = require('vue');
var App = require('./App');

Vue.use(VueMdl.default);

new Vue({
    el: 'body',

    components: {
        App: App
    }
});

App.vue:

<template>
    <div id="app">
        <img class="logo" src="./assets/logo.png">

        <mdl-button>Button</mdl-button>
        <mdl-button v-mdl-ripple-effect>Ripple Effect</mdl-button>
        <mdl-button disabled>Disabled</mdl-button>
        <mdl-button icon>
            <i class="material-icons">star</i>
        </mdl-button>
    </div>
</template>

<script>
    export default {
    }
</script>

<style>
</style>

The buttons appear unstyled, with the error on the console:
Uncaught ReferenceError: componentHandler is not defined

pdcmoreira commented

Ok, so I've included MDL through the "hosted" method and now the buttons are correctly styled, but the Uncaught ReferenceError: componentHandler is not defined error is still in the console. Do you have any idea?

posva commented

you must be missing the mdl js. check mdl website again 😄

pdcmoreira commented

Are you refering to the material.js? I've added these 3 lines to my <head> tag, as it says in the mdl website:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
posva commented

you should remove the defer

  • 👍7
pdcmoreira commented

Perfect! Thanks! It's not obvious in the vue-mdl documentation that we should include MDL first, though.

posva commented

Yeah, where do you think it should be? Where do you expected itto be?

pdcmoreira commented

In the Installation section, there should be some note saying it doesn't include MDL, therefore we should include it first. I think. Or maybe I'm just being noob.

  • 👍1
posva commented

There's already a note but I've seen a lot of people struggling with this when they start

euan-smith commented

No problem realising what I had to setup from MDL, but like the other posters had not spotted the 'defer' attribute after copy-pasting the script tag from the MDL documentation. It'd be helpful, I think, to add a comment about that.

posva commented

@zalkawe314 Could you make the PR for it, please 😄 ?
Edit: Oh, it's on their documentation? I didn't notice that
Edit2: Done!