• Does anyone know how Magento has implemented this functionality?
  • What Magento custom mixins plugin is actually is ?

1 Answer 1


A mixin is a class whose methods are added to, or mixed in, with another class.

A base class includes the methods from a mixin instead of inheriting from it. This allows you to add to or augment the behavior of the base class by adding different mixins to it.

The following is an example of a mixin module that extends the target component with a function that introduces a new blockVisibility property to a column element.

File: OrangeCompany/Sample/view/base/web/js/columns-mixin.js

define(function () {
 'use strict';

 var mixin = {

      * @param {Column} elem
     isDisabled: function (elem) {
         return elem.blockVisibility || this._super();

 return function (target) { // target == Result that Magento_Ui/.../columns returns.
     return target.extend(mixin); // new result that all other modules receive

Mixins are declared in the mixins property in the requirejs-config.js configuration file. This file must be created in the same area specific directory the mixin is defined in.

The mixins configuration in the requirejs-config.js associates a target component with a mixin using their paths.


The following is an example of a requirejs-config.js file that adds the columns-mixins, defined in the previous example.

var config = {
 config: {
     mixins: {
         'Magento_Ui/js/grid/controls/columns': {
             'OrangeCompany_Sample/js/columns-mixin': true

Mixin example in Magento: https://github.com/magento/magento2/blob/2.2/app/code/Magento/CheckoutAgreements/view/frontend/requirejs-config.js

Reference: https://devdocs.magento.com/guides/v2.2/javascript-dev-guide/javascript/js_mixins.html

Use of JS mixins as small example: https://webkul.com/blog/use-js-mixins-magento2/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.