Skip to main content

Upgrade to Ralph UI v23.0.0

This update is quite small but considered a major because of a breaking change in how to handle the Start / Front page.

A functionality that was not used by anyone has been removed since it was producing unneccesary warning messages.

See release notes for more information

Pre-requisites​

Before upgrading to v23.0.0, make sure you have already upgraded to 22.0.0.

See guide here

Steps​

Update nuxt.config.js​

  • Remove the useStartPage setting from publicRuntimeConfig in nuxt.config.js
  • Add cart.productImageSizes and searchProductsImageSizes to publicRuntimeConfig in nuxt.config.js to be able to set the img sizes attributes for the product images in the cart and search results:
nuxt.config.js
...
publicRuntimeConfig: {
    ...
    searchProductsImageSizes: '35px',
    ...
    cart: {
        productImageSizes: '(min-width: 768px) 80px, 53px'
    },
    ...
}
...

Use front page as start page​

  • Copy all content from pages/start/index.vue and paste it into pages/index.vue, replacing all existing content.
  • Remove the pages/start/index.vue file.

Check your sizes-attributes​

Some img sizes attributes has gotten new defaults in this update, make sure to check that they are correct for your project.

pages/product/_alias.vue
<template>
...
    <CaProductGallery
         ...
          main-image-sizes="(min-width: 1920px) 815px, (min-width: 1024px) 42vw, (min-width: 768px) 600px, 100vw"
          thumbnail-sizes="(min-width: 1920px) 400px, 21vw"
          ...
        />
...
</template>
...
tip

To learn more about the sizes attribute, visit the MDN Web Docs