Overriding mixins in vue.js?

Question

Vue.js

Hello.
There is a component that is installed using npm. It uses a mixin that doesn't work for me.
Is it possible to override the mixin that is used in this component without copying the code of the entire component?

Answer 1

Try like this.

import BaseGrid from './Grid.vue';
import MyMixin from './MyMixin.js';

const TransformedGrid = Vue.component('BaseGrid').extend({
  mixins: ['MyMixin']
});

export default {
  name: 'SomeComponent',
  components: {
    BaseGrid: TransformedGrid
  }
}

If you need to keep the global installation, then you need to slightly rewrite the installation script.
installCustomGrid.js

import BaseGrid from './Grid.vue';
import MyMixin from './MyMixin.js';

const TransformedGrid = Vue.component('BaseGrid').extend({
  mixins: ['MyMixin']
});

export default {
  install (Vue) {
    Vue.component('Grid', TransformedGrid)
  }
}

app.js

import Grid from './installCustomGrid.js';

Vue.use(Grid);

If that doesn't work, try simply overwriting in your mixin all the methods that are used in this mixin: https://github.com/euvl/vue-js-grid/blob/master/sr...

methods: {
    getWindowSize () {}
  }