Extend vue-material components into my own components

1
votes

I would like to extend Vue-Material components so that I can abstract them in my project; e.g. have an icon component called "my-icon" and it would simply inherit/extend the md-icon component. So in my project I could use and it would simply use md-icon.

I tried to create MyIcon/index.js with:

import VueMaterial from 'vue-material';

export default function install(Vue) {    
    Vue.component('my-icon', Vue.extend(VueMaterial.mdIcon));
}

And got the error:

[Vue warn]: Failed to mount component: template or render function not defined.

I would really like to be able to extend these components without having to define the template for each one, as that would duplicate a lot of effort. In a perfect world, I could take the existing vue-material components, rename them to what I want, and have the ability extend the functionality by overriding the template down the road. That way, I can use the vue-material components for most of the work and add on/replace when needed without modifying my work upstream.

Does anyone have any suggestions/thoughts around this?

1
vuejs2vue-material

1 Answers

1
votes

You extend components by actually re-using them.

<template>
 <div class="myCustomIcon">
   <md-icon></md-icon>
 </div>
</template>
import VueMaterial from 'vue-material';

export default{
 components:{
  mdIcon
 }
}