How to extend vue component imported from npm package?

Question

If you have a vue component that is installed via Node :

node_modules/vendor/somecomponent.vue

Is there any way to modify/extend the template/methods of this component?

Update:

After trying out the example below, I'm facing this issue:

I am using https://github.com/eliep/vue-avatar and I need to extend this with a prop, and maybe amend the template a bit.

import {Avatar} from 'vue-avatar'

Avatar = Vue.component('Avatar').extend({
      props: ['nationality']
});

export default {
        components: {
            Avatar
        }, 

       ...
}

Results in TypeError: Cannot read property 'extend' of undefined

Looks like you might be able to use it as a mixin: 012.vuejs.org/guide/extending.html — ceejayoz
– ceejayoz, Commented Mar 13, 2017 at 15:54

tony19 · Accepted Answer · 2022-07-15 20:55:01Z

5

It doesn't appear to be documented specifically, but the extend method of Vue itself is available to components. You can override the template and add methods (and data and props).

Vue.component('someComponent', {
  template: '<div>hi {{name}} {{one}}</div>',
  data: () => ({
    name: 'original'
  }),
  props: ['one'],
  methods: {
    original: function() {
      this.name = 'original';
    }
  }
});

const myC = Vue.component('someComponent').extend({
  template: '#my-template',
  props: ['two'],
  methods: {
    another: function() {
      this.name = 'another';
    }
  }
});


new Vue({
  el: '#app',
  components: {
    myComponent: myC
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.3/vue.min.js"></script>
<div id='app'>
  <my-component one="arf" two="meow"></my-component>
</div>

<template id="my-template">
  <div>Look, it's {{name}} {{one}} {{two}}
  <button @click="original">Call original</button>
  <button @click="another">Call another</button>
  </div>
</template>

Avatar appears to be a component spec, the simple JavaScript object that Vue will create a Component object from. Try this:

Vue.component('originalAvatar', Avatar);
const newAvatar = Vue.component('originalAvatar').extend({
  /* Your spec */
});

edited Jul 15, 2022 at 20:55

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 13, 2017 at 16:01

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Qar Over a year ago

Thanks! What about extending plugins? Is that the same procedure?

Qar Over a year ago

I am a little bit confused on how to use your example, in my situation. I've updated the question with my issue.

Roy J Over a year ago

@Qar If the Avatar object is itself a component, you would do Avatar.extend(...) rather than getting it by name from Vue.

Qar Over a year ago

yeah thought so, too, but getting a "TypeError: __WEBPACK_IMPORTED_MODULE_1_vue_avatar__.Avatar.extend is not a function" when trying that.

Collectives™ on Stack Overflow

How to extend vue component imported from npm package?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related