Component Handler not defined #20
Comments
|
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? |
|
Definitely! As there is already #13, I'll fix this as well on it |
|
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: |
|
@pdcmoreira You need to include MDL too: http://www.getmdl.io/started/index.html |
|
Ok, so I've included MDL through the "hosted" method and now the buttons are correctly styled, but the |
|
you must be missing the mdl js. check mdl website again 😄 |
|
Are you refering to the material.js? I've added these 3 lines to my <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> |
|
you should remove the defer |
|
Perfect! Thanks! It's not obvious in the vue-mdl documentation that we should include MDL first, though. |
|
Yeah, where do you think it should be? Where do you expected itto be? |
|
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. |
|
There's already a note but I've seen a lot of people struggling with this when they start |
|
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. |
|
@zalkawe314 Could you make the PR for it, please 😄 ? |
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 definedThe text was updated successfully, but these errors were encountered: