Using material design with VueJS

问题

I'm building a web app with VueJs and need a css framework to design something not from scratch!

I found material-design-lite (www.getmdl.io) but i couldn't make it work properly with vue-router.

My first page is correctly displayed but when i try to move to another page, i have this error :

vue.esm.js?65d7:467 DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

I thought it was because of the "Use MDL on dynamic websites" from the docs (https://getmdl.io/started/index.html) but i couldn't figure it out and solve my problem.

Otherwise, i couldn't find examples with vue to solve this.

Does someone know how to make mdl work with vuejs ?

Thanks, Jules.

回答1:

Some elements are inserted by Vue after MDL's componentHandler has run, so you must restart them. You can do this in the mounted hook:

mounted: function(){
    componentHandler.upgradeAllRegistered();
}

来源：https://stackoverflow.com/questions/43448649/using-material-design-with-vuejs