The new version of StorefrontUI is already available. Find out what has changed

Anna Musiał

•

February 9, 2022

•

Product

The brand new version of StorefrontUI is here. 0.12.0 is one of the biggest releases we had in a while. It includes fixes for most burning issues and some new features as well. Our main goal was to make StorefrontUI even more performant. Check out how we approached it.

Technical Whitepaper

Download whitepaper

Introducing Nuxt Image support

StorefrontUI 0.12.0 provides integration for Nuxt Image, which is a powerful image optimization module. That’s a huge boost for performance in any nuxt based application. Using this solution is not mandatory. You can switch image tag by adding one of the following: img, nuxt-img or nuxt-picture to the imageTag prop (by default it is img). If you want to use nuxt-image settings just add them to the nuxtImgConfig prop as an Object.

Overriding by :root in projects

There are a few ways to override global css variables. As html selector has lower specificity than root we decided to change our approach. Currently we recommend to use :root {} to override any css variables.

Before:

#app {
    --font-family--primary: "Raleway", serif;
}

#__nuxt {
    --font-family-primary: "Raleway", serif;
}

After:

:root {
    --font-family-primary: "Raleway", serif;
}

Even better animations

As performance was our main focus in the recent version we reviewed how we handled animations in our project.

The will-change property in CSS optimizes animations by letting the browser know which properties and elements are just about to be manipulated, potentially increasing the performance of that particular operation. As overusing this one can actually cause more harm than good (too many triggers of will-change can actually cause the page to be less performant) - we’ve created a vue directive to allow using this property only when it's needed.

Another improvement was removing the SfExpand component and replacing it with CSS properties to reduce the size of the DOM for such a simple action. That’s what we call a quick win.

Other improvements:

Refactor of mobile observer

In its previous state, the mobile observer was very hard to maintain. We’ve restructured the code and improved the logic, which should solve most of the problems that this helper caused.

New modifier for SfComponentSelect

We have added new css modifier for positioning of the label in SfComponentSelect:

"sf-component-select--label-right"

New slot for SfBanner

SfBanner has new slot img-tag that was added to work with SfCimage.

Breaking Changes

Please notice that this version contains breaking changes that were necessary to fix some of the bugs. To proceed with the update smoothly follow the migration guide here .

SfImage: default image added as a placeholder
SfImage: width and height props types changed to number and both are required
SfCard, SfGallery, SfCollectedProduct, SfGroupedProductItem, SfProductCard, SfProductCardHorizontal: props types of imageWidth and imageHeight changed to Number
SfStore: props types of pictureWidth and pictureHeight changed to Number
transitions: remove SfExpand functional component and fix sf-expand css styles
SfInput, SfComponentSelect, SfSelect, SfSlidingSection, SfTextarea: replace transitions using properties affecting performance with transform
SfLink: required attribute added to the link prop and defined default value of to property for nuxt-link
SfSearchbar, SfInput: replace native input with SfInput component and add new SfIcon component in SfInput