Using material design with VueJS

2
votes

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
javascriptvue.jsmaterial-designmaterial-design-litevue-router
try this, github.com/marcosmoura/vue-material - Elias Pinheiro
Also vuetifyjs.com - yuriy636
I seen both of them but, even following docs models and architecture, produces ugly code, you need to trick the system if you want to use VueX, always adding personnal style for doing what you want. Material-design-lite is much more clean. - Jules B
Can you provide some example code of what you're trying that does not work? - Roy J
It's inside a bigger project, this will be complicated ^^ - Jules B

1 Answers

0
votes

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();
}