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. 

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.

 <div
    v-will-change="'font-size'"
    class="sf-select"
    :class="{
      'is-selected': value || placeholder,
      'is-required': required,
      'is-disabled': disabled,
      'is-invalid': !valid,
    }"
  />

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.

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