Adding responsive behavior


The Shopware 6 Administration provides two ways of adding classes to elements based on their size, the device helper and the v-responsive directive. Alternatively you can use css media queries to make your plugin responsive. Learn how to use css here:


The DeviceHelper provides methods to get device and browser information like the current viewport size. The helper methods can be accessed with this.$device in every Vue component, since it is bound to the Vue prototype.

It makes it possible to run functions to react to onResize events with adding classes or removing them. The example below shows you how to use the $device.onResize helper.

const listener = function (ev) {
// do something on resize with the event, like adding or removing classes to elements
const scope = this;
const component = 'sw-basic-example';
this.$device.onResize({ listener, scope, component });

The code snippet before could be placed in the mounted Vue lifecycle hook to register those listeners automatically. Then you can automatically remove the listeners in the onDestroy hook


It also provides many helper functions e.g. to get the screen dimensions. Although there are many more as seen below:




Gets the viewport width


Gets the viewport height


Gets the device pixel ratio


Gets the screen width


Gets screen height


Gets the screen orientation

v-responsive directive

The v-responsive directive can be used to dynamically apply classes based on an element's dimensions.

<input v-responsive="{ 'is--compact': el => el.width <= 1620, timeout: 200 }">

Let's do a small explanation of this directive:

  • Apply class (in this case: is--compact) when the width of the element is smaller than 1620px.

  • timeout: Sets the duration on how much the throttle should wait.