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:
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:
import SourceComponent from 'node_modules/somePackageName/components/footer.vue'
export default {
name: "override",
extends: SourceComponent,
methods: {
thatActualMethodBehaviour(){}
}
}
// 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(){}}
})
}
// 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(){}
}