Override Vue’s mixin method

Total
1
Shares

Is there a way to override some of npm’s mixin which is called inside the component by the local one ?

I have an npm package component inside
node_modules/somePackageName/components/footer.vue which use another of it’s mixins from
node_modules/somePackageName/mixins/popup.js

That popup.js contains following method:

methods: {
  setPopupActiveStatus (val, blur = true) {
    const isVisible = false
  }
},

And I want to override it’s behaviour from App.vue where I use that footer.vue component with something like this:

methods: {
  setPopupActiveStatus (val, blur = true) {
    const isVisible = true
  }
},

But it doesn’t work as I wanted to.

==== UPDATE ====

Here is the explanation of How I solved my issue based on @Estradiaz’s answer:

enter image description here


Solution

Where Vue extends

So basically what you want to do is to extend your current component by a custom method.
This can be done with Vue.extend. Vue provides an option to worryless clone/extend components by assigning one component to the extends option:

Option/ Composition – extends

import SourceComponent from 'node_modules/somePackageName/components/footer.vue'
export default {
   name: "override",
   extends: SourceComponent,
   methods: {
      thatActualMethodBehaviour(){}
   }
} 

Vue.extend

// can be  Function | Object
import SourceComponent from 'node_modules/somePackageName/components/footer.vue'
if(typeof SourceComponent === 'function'){
  export default SourceComponent.extend({
      methods: {thatActualMethodBehaviour(){}}
  })
} else {
  export default Vue.extend(SourceComponent).extend({
      methods: {thatActualMethodBehaviour(){}}
  })  
}

Option/ Composition – mixins

// must be Object
import SourceComponentOption from 'node_modules/somePackageName/components/footer.vue'
if(typeof SourceComponent !== 'function'){
  export default Vue.extend({
      mixins: [SourceComponentOption],
      methods: {thatActualMethodBehaviour(){}}
  })
}

the – Y U DO DIS ?!?? – path

import SourceComponentOption from 'node_modules/somePackageName/components/footer.vue'
export default Object.assign({}, SourceComponentOption, {methods: Object.assign({}, SourceComponentOption.methods, {thatActualMethodBehaviour: function(){}}))

typescript: vue-property-decorator

import {Vue, Component} from 'vue-property-decorator'
import SourceComponent from 'node_modules/somePackageName/components/footer.vue'
@Component<CustomComponent>({...hooks})
export default class CustomComponent extends SourceComponent{
   methods: thatActualMethodBehaviour(){}
}
Leave a Reply

Your email address will not be published. Required fields are marked *