IS there a way to edit External Vue.js plugins from inside the component file that imports it?

Question

For example, I'm using vue-charts.js and imported it into my root component:

import VueChartjs from 'vue-chartjs';

Vue.component('bar-chart', {
  extends: VueChartjs.HorizontalBar,
...
})

Now VueChartjs is a wrapper for Charts.js so the component comes with its own template. I'd like to be able to edit that template within VueChartjs.HorizontalBar or the component bar-chart that I mounted it onto.

Is there anyway to do this within this root component?

Answer 1

You can't edit the template of the vue-chartjs component. Because of the extending, all methods, props etc. will get merged. If some props or methods are duplicated, Vue's merge strategy will use your local ones, instead of the ones in the base class.

However Vue has no merge strategy for templates. So you could only completely overwrite the template. Check the git repo of vue-chartjs to see the template syntax, as some props and ids are required. And then you can replace it in your base component.