This way it goes. You serve the js file from your shared folder, the rest is just config.
BUT !!!
It still requires quite of reorganize for CSS. It doesn't have defaults to fallback and many of variable definitions missing and so on.
So not directly usable but if CSS is for you "piece of cake" - you can do it.
<script src="/js/gauge-hotnipi.js"></script>
<template>
<gauge-hotnipi ref="hotgauge" min="0" max="100" size="180px" platehue="220" digits='{"size":80,"distance":14}'></gauge-hotnipi>
</template>
<script>
export default {
methods: {
getElement: function(name,base){
if(base){
return this.$refs[name][0]
}
return this.$refs[name]
}
},
watch: {
msg: function(){
if(this.msg.payload != undefined){
this.getElement("hotgauge").update(this.msg.payload)
}
}
}
}
</script>