Using Mixins

INFO

Mixins are the stable way to share component logic today. A Single File Component cannot use them, so the experimental Single File Component system is adding composables for the commonly used mixins. See Composables replacing mixins for the current state of that list.

Overview

This guide covers how to use an existing Administration mixin in a plugin. Generally, mixins behave the same as they do in Vue normally, differing only in the registration and the way mixins are included in a component.

Prerequisites

All you need for this guide is a running Shopware 6 instance and full access to both the files and a running plugin. Of course you'll have to understand JavaScript, but that's a prerequisite for Shopware as a whole and will not be taught as part of this documentation. As stated before mixins in Shopware are basically the same as in Vue, so you should have read their documentation on them first.

Finding a mixin

The Shopware 6 Administration comes with a few predefined mixins.

To create your own mixin, review the Adding mixins guide.

Using the Mixin

After we've found the mixin we need, we can get it from the registry with the Mixin.getByName function and inject it into our component as seen below. In this example we'll use the notification mixin, which is useful for creating notifications visible to the user in the Administration.

// <administration root>/components/swag-basic-example/index.js
const { Component, Mixin } = Shopware;

Component.register('swag-basic-example', {

    mixins: [
        Mixin.getByName('notification')
    ],

    methods: {
        greet: function () {
            this.createNotificationSuccess({ title: 'Greetings' })
        }
    }
});

For guidance on choosing notifications or snackbars, see Displaying user feedback.