feat(perf): add nuxt img module to boilerplate

[AdamPawlinski]

trafficstars

Description

Add nuxt-mage module and config. Can be used with components from SFUI:

• SfImage
• SfProductCard
• SfProductCardHorizontal
• SfGallery
• SfHero
• SfBanner

All above mentioned components accepts props from nuxt-image docs. detalis in PR: https://github.com/vuestorefront/storefront-ui/pull/2174. Nuxt-image props can be passed by object containing properties, like this:

:nuxtImgConfig="{
    format: 'webp',
    fit: 'cover',
}"

Full configuration details are available in nuxt-image documentation Unfortunately I have to add workaround which switched off default placeholder for SfImage, because there is no support for @load event in latest nuxt-image version (this fix is already prepared but not released yet, what you can see here https://github.com/nuxt/image/pull/416).

For now boilerplate theme is configured to use default provider ipx which should work without further configuration and can be suitable for basic purposes.

There is imageTag prop on Category page which allows using proper component nuxt-img or nuxt-picture:

• to SfProductCard
• to SfProductCardHorizontal

There is imageTag prop added on Product page :

• to SfGallery
• to SfProductCard in RelatedProducts

On Home page:

• to SfHero component
• to SfBanner component inside BannerGrid,
• to SfProductCard in carousel component

In SearchResults component:

• add to SfProductCard

Important note: you need to add fit prop to every component where nuxt-img will be used otherwise 500 error from ipx appears.

There are also minor changes in other SfImage components which adjust them to changes in next version of SFUI.

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots:

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• [ ] I have read the CONTRIBUTING document.

Changelog

• [ ] I have updated the Changelog (V1) v2 and mentioned all breaking changes in the public API.
• [ ] I have documented all new public APIs and made changes to existing docs mentioning the parts I've changed so they're up to date.

Tests

• [ ] I have written test cases for my code
• [ ] I have tested my Pull Request on production build and (to my knowledge) it works without any issues
• [ ] I have added tests to cover my changes.
• [ ] All new and existing tests passed.

I tested manually my code, and it works well with both:

• [ ] Default Theme
• [ ] Capybara Theme

Code standards

• [ ] My code follows the code style of this project.

• [ ] I have followed naming conventions

Docs

• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.

[CLAassistant]

All committers have signed the CLA.