Giters

posva / vue-mdc

Material web components for Vue.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Component Handler not defined

eurobob opened this issue · comments

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

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?

commented

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

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

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?

commented

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

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>
commented

you should remove the defer

commented

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

commented

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

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.

commented

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

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.

commented

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