Vue Storefront releases integration for SAP Commerce CloudRead now

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

Explore by Category:

Product

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

Portret-AMU-2.jpg

Anna Musiał

February 9, 2022

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

CTA_–_Technical_Whitepaper.png

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

Community

As always, we’d like to thank our community for their hard work. Special thanks go to the ones involved in 0.12.0 release and our Core Team:

  • @adampawlinski
  • @justynagieracka
  • @ymaheshwari1
  • @lucadido06
  • @sabasayer
  • @pspaczek
  • @infinityredux
  • @mayashavin
  • @ymaheshwari1
  • @lucadido06
  • @sabasayer
  • @pspaczek
  • @infinityredux
  • @mayashavin
  • @abskj

Want to migrate, check our migration guide at - https://docs.storefrontui.io/?path=/story/releases-v0-12-x-latest-v0-12-0-migration-guide--page

More information on the complete release changelog: https://github.com/vuestorefront/storefront-ui/releases/tag/%40storefrontui%2Fvue%400.12.0

Storefront UI: www.storefront.ui

Docs: https://docs.storefrontui.io/

Repository: https://github.com/vuestorefront/storefront-ui

Share:

Share:

Ready to dive in? Schedule a demo

Get a live, personalised demo with one of our awesome product specialists.

Image_container.png