From 9f61ca8ae0f7c1f2c02d429ee6e4ac65e9953410 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Wed, 19 Jan 2022 08:16:23 +0100
Subject: [PATCH 01/24] chore(theme): added nuxt-image

---
 packages/theme/nuxt.config.js |   2 +
 packages/theme/package.json   |   1 +
 packages/theme/tsconfig.json  |   3 +-
 yarn.lock                     | 363 ++++++++++++++++++++++++++++++++--
 4 files changed, 353 insertions(+), 16 deletions(-)

diff --git a/packages/theme/nuxt.config.js b/packages/theme/nuxt.config.js
index c55020670..161955430 100755
--- a/packages/theme/nuxt.config.js
+++ b/packages/theme/nuxt.config.js
@@ -99,6 +99,7 @@ export default {
       defaultStore,
       facets,
     }],
+    '@nuxt/image',
   ],
   modules: [
     ['nuxt-i18n', {
@@ -107,6 +108,7 @@ export default {
     'cookie-universal-nuxt',
     'vue-scrollto/nuxt',
     '@vue-storefront/middleware/nuxt',
+    '@nuxt/image',
   ],
   i18n: {
     country: 'US',
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 207149ce4..ced7c9efb 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -54,6 +54,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
+    "@nuxt/image": "^0.6.0",
     "@nuxt/types": "latest",
     "@nuxt/typescript-build": "latest",
     "@testing-library/jest-dom": "^5.16.1",
diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json
index be1cf9ce8..de8191975 100644
--- a/packages/theme/tsconfig.json
+++ b/packages/theme/tsconfig.json
@@ -26,7 +26,8 @@
     "types": [
       "@types/node",
       "@nuxt/types",
-      "nuxt-i18n"
+      "nuxt-i18n",
+      "@nuxt/image"
     ],
     "resolveJsonModule": true,
     "rootDir": "./",
diff --git a/yarn.lock b/yarn.lock
index e02a0dbf0..4ab64a9e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3790,6 +3790,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@nuxt/image@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "@nuxt/image@npm:0.6.0"
+  dependencies:
+    consola: ^2.15.3
+    defu: ^5.0.0
+    fs-extra: ^10.0.0
+    hasha: ^5.2.2
+    image-meta: ^0.0.1
+    ipx: ^0.8.0
+    is-https: ^4.0.0
+    lru-cache: ^6.0.0
+    node-fetch: ^2.6.1
+    p-limit: ^3.1.0
+    rc9: ^1.2.0
+    requrl: ^3.0.2
+    semver: ^7.3.5
+    ufo: ^0.7.9
+    upath: ^2.0.1
+  dependenciesMeta:
+    ipx:
+      optional: true
+  checksum: 32c530e2923d82429391c19af9e191271dbb6467467f33dfb2e75ea8b8e5144b580b6983a208abb7e8fb28d021b72480e1a9bb4a4f6de6b9893f7dc19cdf22f9
+  languageName: node
+  linkType: hard
+
 "@nuxt/loading-screen@npm:^2.0.3":
   version: 2.0.4
   resolution: "@nuxt/loading-screen@npm:2.0.4"
@@ -5727,7 +5753,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@vue-storefront/magento-api@1.0.0-rc.5.2.2, @vue-storefront/magento-api@workspace:packages/api-client":
+"@vue-storefront/magento-api@1.0.0-rc.5.3, @vue-storefront/magento-api@workspace:packages/api-client":
   version: 0.0.0-use.local
   resolution: "@vue-storefront/magento-api@workspace:packages/api-client"
   dependencies:
@@ -5756,6 +5782,7 @@ __metadata:
   resolution: "@vue-storefront/magento-theme@workspace:packages/theme"
   dependencies:
     "@babel/core": ^7.16.7
+    "@nuxt/image": ^0.6.0
     "@nuxt/types": latest
     "@nuxt/typescript-build": latest
     "@nuxtjs/composition-api": ^0.31.0
@@ -5767,7 +5794,7 @@ __metadata:
     "@testing-library/user-event": ^13.5.0
     "@testing-library/vue": ^5.8.2
     "@vue-storefront/core": ~2.5.4
-    "@vue-storefront/magento": 1.0.0-rc.5.2.2
+    "@vue-storefront/magento": 1.0.0-rc.5.3
     "@vue-storefront/middleware": ~2.5.4
     "@vue-storefront/nuxt": ~2.5.4
     "@vue-storefront/nuxt-theme": ~2.5.4
@@ -5821,13 +5848,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@vue-storefront/magento@1.0.0-rc.5.2.2, @vue-storefront/magento@workspace:packages/composables":
+"@vue-storefront/magento@1.0.0-rc.5.3, @vue-storefront/magento@workspace:packages/composables":
   version: 0.0.0-use.local
   resolution: "@vue-storefront/magento@workspace:packages/composables"
   dependencies:
     "@types/js-cookie": ^3.0.1
     "@vue-storefront/core": ~2.5.4
-    "@vue-storefront/magento-api": 1.0.0-rc.5.2.2
+    "@vue-storefront/magento-api": 1.0.0-rc.5.3
     "@vue/composition-api": ^1.4.1
     "@vue/test-utils": ^1.3.0
     cookie-universal: ^2.1.5
@@ -7682,7 +7709,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bl@npm:^4.1.0":
+"bl@npm:^4.0.3, bl@npm:^4.1.0":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
   dependencies:
@@ -8862,6 +8889,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clipboardy@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "clipboardy@npm:3.0.0"
+  dependencies:
+    arch: ^2.2.0
+    execa: ^5.1.1
+    is-wsl: ^2.2.0
+  checksum: 2c292acb59705494cbe07d7df7c8becff4f01651514d32ebd80f4aec2d20946d8f3824aac67ecdf2d09ef21fdf0eb24b6a7f033c137ccdceedc4661c54455c94
+  languageName: node
+  linkType: hard
+
 "cliui@npm:^6.0.0":
   version: 6.0.0
   resolution: "cliui@npm:6.0.0"
@@ -9032,7 +9070,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-string@npm:^1.6.0":
+"color-string@npm:^1.6.0, color-string@npm:^1.9.0":
   version: 1.9.0
   resolution: "color-string@npm:1.9.0"
   dependencies:
@@ -9061,6 +9099,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"color@npm:^4.0.1":
+  version: 4.2.0
+  resolution: "color@npm:4.2.0"
+  dependencies:
+    color-convert: ^2.0.1
+    color-string: ^1.9.0
+  checksum: a5e7d8e8b4cdc3a005da8f0d9a41c63f74c46ab0865d834e950891a5c171141e8e88cbb958a501bd6d80ec57448fee4f630d9910f9533524ea9324e4bc9a3c35
+  languageName: node
+  linkType: hard
+
 "colorette@npm:^1.2.2":
   version: 1.4.0
   resolution: "colorette@npm:1.4.0"
@@ -9127,7 +9175,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^2.19.0, commander@npm:^2.20.0":
+"commander@npm:^2.19.0, commander@npm:^2.20.0, commander@npm:^2.20.3":
   version: 2.20.3
   resolution: "commander@npm:2.20.3"
   checksum: ab8c07884e42c3a8dbc5dd9592c606176c7eb5c1ca5ff274bcf907039b2c41de3626f684ea75ccf4d361ba004bbaff1f577d5384c155f3871e456bdf27becf9e
@@ -10096,6 +10144,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssfilter@npm:0.0.10":
+  version: 0.0.10
+  resolution: "cssfilter@npm:0.0.10"
+  checksum: bc2c52bbb3426c3f2e4832edb6f8573e6cfa65b40b540932762d1e018f0f0157725e2991b77344bbc8266c6bbf4daa2803b0707cfb1bd0877505bf83a68e4b04
+  languageName: node
+  linkType: hard
+
 "cssnano-preset-default@npm:^4.0.8":
   version: 4.0.8
   resolution: "cssnano-preset-default@npm:4.0.8"
@@ -10608,6 +10663,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"define-lazy-prop@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "define-lazy-prop@npm:2.0.0"
+  checksum: 0115fdb065e0490918ba271d7339c42453d209d4cb619dfe635870d906731eff3e1ade8028bb461ea27ce8264ec5e22c6980612d332895977e89c1bbc80fcee2
+  languageName: node
+  linkType: hard
+
 "define-properties@npm:^1.1.2, define-properties@npm:^1.1.3":
   version: 1.1.3
   resolution: "define-properties@npm:1.1.3"
@@ -10793,6 +10855,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-libc@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "detect-libc@npm:1.0.3"
+  bin:
+    detect-libc: ./bin/detect-libc.js
+  checksum: daaaed925ffa7889bd91d56e9624e6c8033911bb60f3a50a74a87500680652969dbaab9526d1e200a4c94acf80fc862a22131841145a0a8482d60a99c24f4a3e
+  languageName: node
+  linkType: hard
+
 "detect-newline@npm:^3.0.0":
   version: 3.1.0
   resolution: "detect-newline@npm:3.1.0"
@@ -11265,7 +11336,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"end-of-stream@npm:^1.0.0, end-of-stream@npm:^1.1.0":
+"end-of-stream@npm:^1.0.0, end-of-stream@npm:^1.1.0, end-of-stream@npm:^1.4.1":
   version: 1.4.4
   resolution: "end-of-stream@npm:1.4.4"
   dependencies:
@@ -12016,6 +12087,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expand-template@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "expand-template@npm:2.0.3"
+  checksum: 588c19847216421ed92befb521767b7018dc88f88b0576df98cb242f20961425e96a92cbece525ef28cc5becceae5d544ae0f5b9b5e2aa05acb13716ca5b3099
+  languageName: node
+  linkType: hard
+
 "expand-tilde@npm:^2.0.0, expand-tilde@npm:^2.0.2":
   version: 2.0.2
   resolution: "expand-tilde@npm:2.0.2"
@@ -12737,6 +12815,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-constants@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "fs-constants@npm:1.0.0"
+  checksum: 18f5b718371816155849475ac36c7d0b24d39a11d91348cfcb308b4494824413e03572c403c86d3a260e049465518c4f0d5bd00f0371cdfcad6d4f30a85b350d
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:8.1.0, fs-extra@npm:^8.1.0":
   version: 8.1.0
   resolution: "fs-extra@npm:8.1.0"
@@ -12990,7 +13075,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-port-please@npm:^2.2.0":
+"get-port-please@npm:^2.1.0, get-port-please@npm:^2.2.0":
   version: 2.2.0
   resolution: "get-port-please@npm:2.2.0"
   dependencies:
@@ -13185,6 +13270,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"github-from-package@npm:0.0.0":
+  version: 0.0.0
+  resolution: "github-from-package@npm:0.0.0"
+  checksum: 14e448192a35c1e42efee94c9d01a10f42fe790375891a24b25261246ce9336ab9df5d274585aedd4568f7922246c2a78b8a8cd2571bfe99c693a9718e7dd0e3
+  languageName: node
+  linkType: hard
+
 "glob-all@npm:^3.1.0, glob-all@npm:^3.2.1":
   version: 3.2.1
   resolution: "glob-all@npm:3.2.1"
@@ -14030,6 +14122,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"http-shutdown@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "http-shutdown@npm:1.2.2"
+  checksum: 5dccd94f4fe4f51f9cbd7ec4586121160cd6470728e581662ea8032724440d891c4c92b8210b871ac468adadb3c99c40098ad0f752a781a550abae49dfa26206
+  languageName: node
+  linkType: hard
+
 "http-signature@npm:~1.2.0":
   version: 1.2.0
   resolution: "http-signature@npm:1.2.0"
@@ -14184,6 +14283,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"image-meta@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "image-meta@npm:0.0.1"
+  checksum: 5e3262f33c73f94e7f4ea9706a5656e239e6f449fe0b69796baa040d05251480e56ba1a9d7af37830ef4fd165d3802d6b02aa25db5a827d507941110133ed682
+  languageName: node
+  linkType: hard
+
 "immutable@npm:^4.0.0":
   version: 4.0.0
   resolution: "immutable@npm:4.0.0"
@@ -14491,6 +14597,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ipx@npm:^0.8.0":
+  version: 0.8.0
+  resolution: "ipx@npm:0.8.0"
+  dependencies:
+    consola: ^2.15.3
+    defu: ^5.0.0
+    destr: ^1.1.0
+    etag: ^1.8.1
+    fs-extra: ^10.0.0
+    image-meta: ^0.0.1
+    is-valid-path: ^0.1.1
+    listhen: ^0.2.4
+    node-fetch: ^2.6.1
+    sharp: ^0.29.0
+    ufo: ^0.7.9
+    xss: ^1.0.9
+  bin:
+    ipx: dist/cli.js
+  checksum: 3f9de49cc38cbd20d002fb844cea477f18d8f5f90fecdb6e664d28114f20c1eca1509066f1992290a58bc632319ab6179ffe075ed7edf3265e85ab98dd148b6c
+  languageName: node
+  linkType: hard
+
 "is-absolute-url@npm:^2.0.0":
   version: 2.1.0
   resolution: "is-absolute-url@npm:2.1.0"
@@ -14722,7 +14850,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-docker@npm:^2.2.1":
+"is-docker@npm:^2.0.0, is-docker@npm:^2.1.1, is-docker@npm:^2.2.1":
   version: 2.2.1
   resolution: "is-docker@npm:2.2.1"
   bin:
@@ -14747,6 +14875,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-extglob@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "is-extglob@npm:1.0.0"
+  checksum: 5eea8517feeae5206547c0fc838c1416ec763b30093c286e1965a05f46b74a59ad391f912565f3b67c9c31cab4769ab9c35420e016b608acb47309be8d0d6e94
+  languageName: node
+  linkType: hard
+
 "is-extglob@npm:^2.1.0, is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -14809,6 +14944,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-glob@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-glob@npm:2.0.1"
+  dependencies:
+    is-extglob: ^1.0.0
+  checksum: 089f5f93640072491396a5f075ce73e949a90f35832b782bc49a6b7637d58e392d53cb0b395e059ccab70fcb82ff35d183f6f9ebbcb43227a1e02e3fed5430c9
+  languageName: node
+  linkType: hard
+
 "is-glob@npm:^3.1.0":
   version: 3.1.0
   resolution: "is-glob@npm:3.1.0"
@@ -14849,6 +14993,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-invalid-path@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "is-invalid-path@npm:0.1.0"
+  dependencies:
+    is-glob: ^2.0.0
+  checksum: 184dd40d9c7a765506e4fdcd7e664f86de68a4d5d429964b160255fe40de1b4323d1b4e6ea76ff87debf788a330e4f27cb1dfe5fc2420405e1c8a16a6ed87092
+  languageName: node
+  linkType: hard
+
 "is-lambda@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-lambda@npm:1.0.1"
@@ -15129,6 +15282,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-valid-path@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "is-valid-path@npm:0.1.1"
+  dependencies:
+    is-invalid-path: ^0.1.0
+  checksum: d6e716a4a999c75e32ff91ff1ea684fc9e69de05747ec4aaae049460beb971c79f474629dd87a5b4b662691f8323c1920f1b6f1dcdcb39b07082f0ff77b71da6
+  languageName: node
+  linkType: hard
+
 "is-weakref@npm:^1.0.1":
   version: 1.0.2
   resolution: "is-weakref@npm:1.0.2"
@@ -15159,6 +15321,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-wsl@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "is-wsl@npm:2.2.0"
+  dependencies:
+    is-docker: ^2.0.0
+  checksum: 20849846ae414997d290b75e16868e5261e86ff5047f104027026fd61d8b5a9b0b3ade16239f35e1a067b3c7cc02f70183cb661010ed16f4b6c7c93dad1b19d8
+  languageName: node
+  linkType: hard
+
 "is-yarn-global@npm:^0.3.0":
   version: 0.3.0
   resolution: "is-yarn-global@npm:0.3.0"
@@ -16616,6 +16787,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"listhen@npm:^0.2.4":
+  version: 0.2.6
+  resolution: "listhen@npm:0.2.6"
+  dependencies:
+    clipboardy: ^3.0.0
+    colorette: ^2.0.16
+    defu: ^5.0.0
+    get-port-please: ^2.1.0
+    http-shutdown: ^1.2.2
+    open: ^8.0.5
+    selfsigned: ^2.0.0
+  checksum: 2cbf4e125f08be29c5d89289e340c77f393bedbe60d7b2b0374c807989f6b091b704181aebe08ab7322072cdebfcd049c3b06570399d8de69005b06c83423235
+  languageName: node
+  linkType: hard
+
 "listr-silent-renderer@npm:^1.1.1":
   version: 1.1.1
   resolution: "listr-silent-renderer@npm:1.1.1"
@@ -17711,7 +17897,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mkdirp-classic@npm:^0.5.2":
+"mkdirp-classic@npm:^0.5.2, mkdirp-classic@npm:^0.5.3":
   version: 0.5.3
   resolution: "mkdirp-classic@npm:0.5.3"
   checksum: 3f4e088208270bbcc148d53b73e9a5bd9eef05ad2cbf3b3d0ff8795278d50dd1d11a8ef1875ff5aea3fa888931f95bfcb2ad5b7c1061cfefd6284d199e6776ac
@@ -18048,6 +18234,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"napi-build-utils@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "napi-build-utils@npm:1.0.2"
+  checksum: 06c14271ee966e108d55ae109f340976a9556c8603e888037145d6522726aebe89dd0c861b4b83947feaf6d39e79e08817559e8693deedc2c94e82c5cbd090c7
+  languageName: node
+  linkType: hard
+
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"
@@ -18108,6 +18301,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-abi@npm:^3.3.0":
+  version: 3.5.0
+  resolution: "node-abi@npm:3.5.0"
+  dependencies:
+    semver: ^7.3.5
+  checksum: e7fa2363cea366e788e460ead39cf900cc3c49b5978fa56790fda87df54b6937424c72ea00cbfb72fe1513eedcbb48a0ac50a56e7961cc6bd425ef09efbe1916
+  languageName: node
+  linkType: hard
+
 "node-addon-api@npm:^1.7.1":
   version: 1.7.2
   resolution: "node-addon-api@npm:1.7.2"
@@ -18117,6 +18319,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-addon-api@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "node-addon-api@npm:4.2.0"
+  dependencies:
+    node-gyp: latest
+  checksum: 52ea6ff01a882766ceec74a0752c0cf9571fa72559a7a3e8969779fa5ae113a2d63cb54dd267fa83a533ab2b7617131d4a6996114701f4ca27246d2513b0e5a5
+  languageName: node
+  linkType: hard
+
 "node-cache@npm:^4.1.1":
   version: 4.2.1
   resolution: "node-cache@npm:4.2.1"
@@ -18155,6 +18366,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-forge@npm:^1.2.0":
+  version: 1.2.1
+  resolution: "node-forge@npm:1.2.1"
+  checksum: af4f88c3f69362359f35f6a9e231b35c96d906eeb6e976fb92742afe7fcdd76439dc22b41ce3755389d171f6320756ec7505bdfa7b252466c091b8c519a22674
+  languageName: node
+  linkType: hard
+
 "node-gyp@npm:^5.0.2":
   version: 5.1.1
   resolution: "node-gyp@npm:5.1.1"
@@ -18571,7 +18789,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"npmlog@npm:^4.1.2":
+"npmlog@npm:^4.0.1, npmlog@npm:^4.1.2":
   version: 4.1.2
   resolution: "npmlog@npm:4.1.2"
   dependencies:
@@ -18873,6 +19091,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"open@npm:^8.0.5":
+  version: 8.4.0
+  resolution: "open@npm:8.4.0"
+  dependencies:
+    define-lazy-prop: ^2.0.0
+    is-docker: ^2.1.1
+    is-wsl: ^2.2.0
+  checksum: e9545bec64cdbf30a0c35c1bdc310344adf8428a117f7d8df3c0af0a0a24c513b304916a6d9b11db0190ff7225c2d578885080b761ed46a3d5f6f1eebb98b63c
+  languageName: node
+  linkType: hard
+
 "opener@npm:1.5.2, opener@npm:^1.5.2":
   version: 1.5.2
   resolution: "opener@npm:1.5.2"
@@ -19031,7 +19260,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-limit@npm:3.1.0, p-limit@npm:^3.0.2":
+"p-limit@npm:3.1.0, p-limit@npm:^3.0.2, p-limit@npm:^3.1.0":
   version: 3.1.0
   resolution: "p-limit@npm:3.1.0"
   dependencies:
@@ -20648,6 +20877,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prebuild-install@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "prebuild-install@npm:7.0.0"
+  dependencies:
+    detect-libc: ^1.0.3
+    expand-template: ^2.0.3
+    github-from-package: 0.0.0
+    minimist: ^1.2.3
+    mkdirp-classic: ^0.5.3
+    napi-build-utils: ^1.0.1
+    node-abi: ^3.3.0
+    npmlog: ^4.0.1
+    pump: ^3.0.0
+    rc: ^1.2.7
+    simple-get: ^4.0.0
+    tar-fs: ^2.0.0
+    tunnel-agent: ^0.6.0
+  bin:
+    prebuild-install: bin.js
+  checksum: 413783f74677a9691c286f3302ef37a9d4d6121b85bb38064d286931dfc57961da6066bfe02e7c411ee828c2ee40b0ba467575e7197178582db8385dd8402d5f
+  languageName: node
+  linkType: hard
+
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -21172,7 +21424,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc@npm:^1.2.8":
+"rc@npm:^1.2.7, rc@npm:^1.2.8":
   version: 1.2.8
   resolution: "rc@npm:1.2.8"
   dependencies:
@@ -21384,7 +21636,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:3, readable-stream@npm:^3.0.0, readable-stream@npm:^3.0.2, readable-stream@npm:^3.4.0, readable-stream@npm:^3.5.0, readable-stream@npm:^3.6.0":
+"readable-stream@npm:3, readable-stream@npm:^3.0.0, readable-stream@npm:^3.0.2, readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0, readable-stream@npm:^3.5.0, readable-stream@npm:^3.6.0":
   version: 3.6.0
   resolution: "readable-stream@npm:3.6.0"
   dependencies:
@@ -21739,6 +21991,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"requrl@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "requrl@npm:3.0.2"
+  checksum: 84fbaf4326050de145fdb6037b77416c649453fa1cce19df25776e13b5b89a119224213c2d786acda088b5724b9e085a41aa6d59bf9c3fa19345fc49c7902c7f
+  languageName: node
+  linkType: hard
+
 "resolve-alpn@npm:^1.0.0":
   version: 1.2.1
   resolution: "resolve-alpn@npm:1.2.1"
@@ -22259,6 +22518,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"selfsigned@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "selfsigned@npm:2.0.0"
+  dependencies:
+    node-forge: ^1.2.0
+  checksum: 43fca39a5aded2a8e97c1756af74c049a9dde12d47d302820f7d507d25c2ad7da4b04bc439a36620d63b4c0149bcf34ae7a729f978bf3b1bf48859c36ae34cee
+  languageName: node
+  linkType: hard
+
 "sembear@npm:^0.5.0":
   version: 0.5.2
   resolution: "sembear@npm:0.5.2"
@@ -22489,6 +22757,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sharp@npm:^0.29.0":
+  version: 0.29.3
+  resolution: "sharp@npm:0.29.3"
+  dependencies:
+    color: ^4.0.1
+    detect-libc: ^1.0.3
+    node-addon-api: ^4.2.0
+    node-gyp: latest
+    prebuild-install: ^7.0.0
+    semver: ^7.3.5
+    simple-get: ^4.0.0
+    tar-fs: ^2.1.1
+    tunnel-agent: ^0.6.0
+  checksum: d496cdd546c9abe743aebcee013731295f735687819a18c2bdcbba6f31a6b259f3da95af5c11260a8fedc9d4ab95697f5f8c4f3cd65232792b5cfb876bea7c9a
+  languageName: node
+  linkType: hard
+
 "shasum-object@npm:^1.0.0":
   version: 1.0.0
   resolution: "shasum-object@npm:1.0.0"
@@ -22618,6 +22903,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-get@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "simple-get@npm:4.0.0"
+  dependencies:
+    decompress-response: ^6.0.0
+    once: ^1.3.1
+    simple-concat: ^1.0.0
+  checksum: 8af4fb788be27af3586395857a1617be133391a7356b007a76379f5eb2ad1c19ea6a13ba9467b0fe790b9e468f9fb124639779b62eb21e6d3ab2cb9b2850cb8d
+  languageName: node
+  linkType: hard
+
 "simple-swizzle@npm:^0.2.2":
   version: 0.2.2
   resolution: "simple-swizzle@npm:0.2.2"
@@ -23722,6 +24018,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tar-fs@npm:^2.0.0, tar-fs@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "tar-fs@npm:2.1.1"
+  dependencies:
+    chownr: ^1.1.1
+    mkdirp-classic: ^0.5.2
+    pump: ^3.0.0
+    tar-stream: ^2.1.4
+  checksum: f5b9a70059f5b2969e65f037b4e4da2daf0fa762d3d232ffd96e819e3f94665dbbbe62f76f084f1acb4dbdcce16c6e4dac08d12ffc6d24b8d76720f4d9cf032d
+  languageName: node
+  linkType: hard
+
+"tar-stream@npm:^2.1.4":
+  version: 2.2.0
+  resolution: "tar-stream@npm:2.2.0"
+  dependencies:
+    bl: ^4.0.3
+    end-of-stream: ^1.4.1
+    fs-constants: ^1.0.0
+    inherits: ^2.0.3
+    readable-stream: ^3.1.1
+  checksum: 699831a8b97666ef50021c767f84924cfee21c142c2eb0e79c63254e140e6408d6d55a065a2992548e72b06de39237ef2b802b99e3ece93ca3904a37622a66f3
+  languageName: node
+  linkType: hard
+
 "tar@npm:^4.4.12":
   version: 4.4.19
   resolution: "tar@npm:4.4.19"
@@ -26207,6 +26528,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xss@npm:^1.0.9":
+  version: 1.0.10
+  resolution: "xss@npm:1.0.10"
+  dependencies:
+    commander: ^2.20.3
+    cssfilter: 0.0.10
+  bin:
+    xss: bin/xss
+  checksum: 0dbc70a716020d854569610d5bc949ba9d3b7f530b7af5508ffe84edaea228c34a4e1227f71cb3a4741373b1c49c3cb691f69dddefda45a594a31f112ae6a738
+  languageName: node
+  linkType: hard
+
 "xtend@npm:^4.0.0, xtend@npm:^4.0.1, xtend@npm:^4.0.2, xtend@npm:~4.0.1":
   version: 4.0.2
   resolution: "xtend@npm:4.0.2"

From 34d4c2234d26f3e3f8c27f151f8f4ee292e820f5 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Wed, 19 Jan 2022 09:45:13 +0100
Subject: [PATCH 02/24] feat(theme): added nuxt-img to category page

---
 packages/theme/pages/Category.vue | 67 ++++++++++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 1 deletion(-)

diff --git a/packages/theme/pages/Category.vue b/packages/theme/pages/Category.vue
index 2dd407ccd..0d5bf0f0a 100644
--- a/packages/theme/pages/Category.vue
+++ b/packages/theme/pages/Category.vue
@@ -122,6 +122,8 @@
               class="products__product-card"
               :style="{ '--index': i }"
               :title="productGetters.getName(product)"
+              :image-width="216"
+              :image-height="268"
               :image="productGetters.getProductThumbnailImage(product)"
               :regular-price="$fc(productGetters.getPrice(product).regular)"
               :special-price="productGetters.getPrice(product).special && $fc(productGetters.getPrice(product).special)"
@@ -141,7 +143,37 @@
               "
               @click:wishlist="addItemToWishlist(product)"
               @click:add-to-cart="addItemToCart({ product, quantity: 1 })"
-            />
+            >
+              <template #image="imageSlotProps">
+                <SfButton
+                  :link="imageSlotProps.link"
+                  class="sf-button--pure sf-product-card__link"
+                  data-testid="product-link"
+                  aria-label="Go To Product"
+                  v-on="$listeners"
+                >
+                  <template v-if="Array.isArray(imageSlotProps.image)">
+                    <nuxt-img
+                      v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                      :key="key"
+                      class="sf-product-card__picture"
+                      :src="picture"
+                      :alt="imageSlotProps.title"
+                      :width="imageSlotProps.imageWidth"
+                      :height="imageSlotProps.imageHeight"
+                    />
+                  </template>
+                  <nuxt-img
+                    v-else
+                    class="sf-product-card__image lol"
+                    :src="imageSlotProps.image"
+                    :alt="imageSlotProps.title"
+                    :width="imageSlotProps.imageWidth"
+                    :height="imageSlotProps.imageHeight"
+                  />
+                </SfButton>
+              </template>
+            </SfProductCard>
           </transition-group>
           <transition-group
             v-else
@@ -158,6 +190,8 @@
               :title="productGetters.getName(product)"
               :description="productGetters.getDescription(product)"
               :image="productGetters.getProductThumbnailImage(product)"
+              image-width="140"
+              image-height="200"
               :regular-price="$fc(productGetters.getPrice(product).regular)"
               :special-price="productGetters.getPrice(product).special && $fc(productGetters.getPrice(product).special)"
               :score-rating="productGetters.getAverageRating(product)"
@@ -175,6 +209,35 @@
               @click:wishlist="addItemToWishlist(product)"
               @click:add-to-cart="addItemToCart({ product, quantity: 1 })"
             >
+              <template #image="imageSlotProps">
+                <SfLink
+                  :link="imageSlotProps.link"
+                  class="
+                    sf-product-card-horizontal__link
+                    sf-product-card-horizontal__link--image
+                  "
+                >
+                  <template v-if="Array.isArray(imageSlotProps.image)">
+                    <SfImage
+                      v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                      :key="key"
+                      class="sf-product-card-horizontal__picture"
+                      :src="picture"
+                      :alt="imageSlotProps.title"
+                      :width="imageSlotProps.imageWidth"
+                      :height="imageSlotProps.imageHeight"
+                    />
+                  </template>
+                  <SfImage
+                    v-else
+                    class="sf-product-card-horizontal__image"
+                    :src="imageSlotProps.image"
+                    :alt="imageSlotProps.title"
+                    :width="imageSlotProps.imageWidth"
+                    :height="imageSlotProps.imageHeight"
+                  />
+                </SfLink>
+              </template>
               <template #configuration>
                 <SfProperty
                   class="desktop-only"
@@ -352,6 +415,7 @@ import {
   SfLoader,
   SfColor,
   SfProperty,
+  SfImage,
 } from '@storefront-ui/vue';
 import {
   ref,
@@ -395,6 +459,7 @@ export default defineComponent({
     SfHeading,
     SfProperty,
     LazyHydrate,
+    SfImage,
   },
   middleware: cacheControl({
     'max-age': 60,

From b07a15854ca71d7b0c4b16f41aa3348350db37aa Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 06:39:18 +0100
Subject: [PATCH 03/24] feat: added nuxt-img to category pages, added newe
 configs, and useImage compoosable

---
 packages/theme/.env.example                  |  3 +++
 packages/theme/composables/index.ts          |  1 +
 packages/theme/composables/useImage/index.ts | 25 ++++++++++++++++++++
 packages/theme/config.js                     | 18 ++++++++++++++
 packages/theme/config/example.json           |  5 +++-
 packages/theme/middleware.config.js          |  2 ++
 packages/theme/nuxt.config.js                | 10 ++++++++
 packages/theme/pages/Category.vue            | 16 +++++++------
 8 files changed, 72 insertions(+), 8 deletions(-)
 create mode 100644 packages/theme/composables/useImage/index.ts

diff --git a/packages/theme/.env.example b/packages/theme/.env.example
index 9663e1dff..14030bda5 100644
--- a/packages/theme/.env.example
+++ b/packages/theme/.env.example
@@ -6,3 +6,6 @@ MAGENTO_GRAPHQL=https://{YOUR_SITE_FRONT_URL}/graphql
 MAGENTO_EXTERNAL_CHECKOUT=false
 MAGENTO_EXTERNAL_CHECKOUT_URL=https://{YOUR_SITE_FRONT_URL}
 MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync
+MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
+IMAGE_PROVIDER={YOUR_IMAGE_PROVIDER}
+IMAGE_PROVIDER_BASE_URL={YOUR_IMAGE_PROVIDER_BASE_URL}
diff --git a/packages/theme/composables/index.ts b/packages/theme/composables/index.ts
index 3a0da61ff..cd7162b62 100644
--- a/packages/theme/composables/index.ts
+++ b/packages/theme/composables/index.ts
@@ -1,3 +1,4 @@
 export { default as useUiHelpers } from './useUiHelpers';
 export { default as useUiNotification } from './useUiNotification';
 export { default as useUiState } from './useUiState';
+export { default as useImage } from './useImage';
diff --git a/packages/theme/composables/useImage/index.ts b/packages/theme/composables/useImage/index.ts
new file mode 100644
index 000000000..1d42e3b81
--- /dev/null
+++ b/packages/theme/composables/useImage/index.ts
@@ -0,0 +1,25 @@
+import { useContext } from '@nuxtjs/composition-api';
+
+const useImage = () => {
+  // @ts-ignore
+  const { $vsf } = useContext();
+
+  const getMagentoImage = (fullImageUrl: string) => {
+    const { imageProvider, magentoBaseUrl } = $vsf.$magento.config;
+
+    if (imageProvider !== 'ipx') {
+      const url = fullImageUrl.split(`${magentoBaseUrl}`);
+
+      const regex = /cache\/(.*?)\//gm;
+      return url[1].replace(regex, '');
+    }
+
+    return fullImageUrl;
+  };
+
+  return {
+    getMagentoImage,
+  };
+};
+
+export default useImage;
diff --git a/packages/theme/config.js b/packages/theme/config.js
index a6ce772de..b3d3cfbf4 100644
--- a/packages/theme/config.js
+++ b/packages/theme/config.js
@@ -55,6 +55,24 @@ const config = convict({
     default: process.env.NUXT_APP_PORT || 3000,
     env: 'NUXT_APP_PORT',
   },
+  magentoBaseUrl: {
+    doc: 'Magento base url',
+    format: String,
+    default: process.env.MAGENTO_BASE_URL || 'https://magento2-instance.vuestorefront.io/',
+    env: 'MAGENTO_BASE_URL',
+  },
+  imageProvider: {
+    doc: 'Image provider',
+    format: String,
+    default: process.env.IMAGE_PROVIDER || 'ipx',
+    env: 'IMAGE_PROVIDER',
+  },
+  imageProviderBaseUrl: {
+    doc: 'Image provider base URL',
+    format: String,
+    default: process.env.IMAGE_PROVIDER_BASE_URL || 'https://magento2-instance.vuestorefront.io/',
+    env: 'IMAGE_PROVIDER_BASE_URL',
+  },
 });
 
 const env = config.get('env');
diff --git a/packages/theme/config/example.json b/packages/theme/config/example.json
index cb367c9bb..3c1f7054b 100644
--- a/packages/theme/config/example.json
+++ b/packages/theme/config/example.json
@@ -5,5 +5,8 @@
   "magentoGraphQl": "https://{YOUR_SITE_FRONT_URL}/graphql",
   "enableMagentoExternalCheckout": false,
   "externalCheckoutUrl": "https://{YOUR_SITE_FRONT_URL}",
-  "externalCheckoutSyncPath": "/vue/cart/sync"
+  "externalCheckoutSyncPath": "/vue/cart/sync",
+  "imageProvider": "ipx",
+  "magentoBaseUrl": "https://magento2-instance.vuestorefront.io/",
+  "imageProviderBaseUrl": "https://res-4.cloudinary.com/{YOUR_CLOUD_ID}/image/upload/"
 }
diff --git a/packages/theme/middleware.config.js b/packages/theme/middleware.config.js
index 91ab3a42b..ae291e72c 100755
--- a/packages/theme/middleware.config.js
+++ b/packages/theme/middleware.config.js
@@ -25,6 +25,8 @@ module.exports = {
         customApolloHttpLinkOptions: {
           useGETForQueries: false,
         },
+        magentoBaseUrl: config.get('magentoBaseUrl'),
+        imageProvider: config.get('imageProvider'),
       },
     },
   },
diff --git a/packages/theme/nuxt.config.js b/packages/theme/nuxt.config.js
index 161955430..bdfb2e970 100755
--- a/packages/theme/nuxt.config.js
+++ b/packages/theme/nuxt.config.js
@@ -14,6 +14,8 @@ const {
         externalCheckout,
         defaultStore,
         facets,
+        magentoBaseUrl,
+        imageProvider,
       },
     },
   },
@@ -98,6 +100,8 @@ export default {
       externalCheckout,
       defaultStore,
       facets,
+      magentoBaseUrl,
+      imageProvider,
     }],
     '@nuxt/image',
   ],
@@ -237,4 +241,10 @@ export default {
         .forEach((route) => routes.unshift(route));
     },
   },
+  image: {
+    provider: config.get('imageProvider'),
+    cloudinary: {
+      baseURL: config.get('imageProviderBaseUrl'),
+    },
+  },
 };
diff --git a/packages/theme/pages/Category.vue b/packages/theme/pages/Category.vue
index 0d5bf0f0a..d4a84c2a9 100644
--- a/packages/theme/pages/Category.vue
+++ b/packages/theme/pages/Category.vue
@@ -124,7 +124,7 @@
               :title="productGetters.getName(product)"
               :image-width="216"
               :image-height="268"
-              :image="productGetters.getProductThumbnailImage(product)"
+              :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
               :regular-price="$fc(productGetters.getPrice(product).regular)"
               :special-price="productGetters.getPrice(product).special && $fc(productGetters.getPrice(product).special)"
               :score-rating="productGetters.getAverageRating(product)"
@@ -189,7 +189,7 @@
               :style="{ '--index': i }"
               :title="productGetters.getName(product)"
               :description="productGetters.getDescription(product)"
-              :image="productGetters.getProductThumbnailImage(product)"
+              :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
               image-width="140"
               image-height="200"
               :regular-price="$fc(productGetters.getPrice(product).regular)"
@@ -218,7 +218,7 @@
                   "
                 >
                   <template v-if="Array.isArray(imageSlotProps.image)">
-                    <SfImage
+                    <nuxt-img
                       v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
                       :key="key"
                       class="sf-product-card-horizontal__picture"
@@ -228,7 +228,7 @@
                       :height="imageSlotProps.imageHeight"
                     />
                   </template>
-                  <SfImage
+                  <nuxt-img
                     v-else
                     class="sf-product-card-horizontal__image"
                     :src="imageSlotProps.image"
@@ -415,7 +415,6 @@ import {
   SfLoader,
   SfColor,
   SfProperty,
-  SfImage,
 } from '@storefront-ui/vue';
 import {
   ref,
@@ -434,10 +433,11 @@ import {
 import { onSSR, useVSFContext } from '@vue-storefront/core';
 import CategorySidebarMenu from '~/components/Category/CategorySidebarMenu';
 import { useUrlResolver } from '~/composables/useUrlResolver.ts';
-import { useUiHelpers, useUiState } from '~/composables';
+import { useUiHelpers, useUiState, useImage } from '~/composables';
 import cacheControl from '~/helpers/cacheControl';
 import { useAddToCart } from '~/helpers/cart/addToCart';
 
+
 // TODO(addToCart qty, horizontal): https://github.com/vuestorefront/storefront-ui/issues/1606
 export default defineComponent({
   name: 'CategoryPage',
@@ -459,7 +459,6 @@ export default defineComponent({
     SfHeading,
     SfProperty,
     LazyHydrate,
-    SfImage,
   },
   middleware: cacheControl({
     'max-age': 60,
@@ -639,6 +638,8 @@ export default defineComponent({
       }
     });
 
+    const image = useImage();
+
     return {
       routeData,
       ...uiState,
@@ -663,6 +664,7 @@ export default defineComponent({
       selectFilter,
       sortBy,
       uiHelpers,
+      getMagentoImage: image.getMagentoImage,
     };
   },
 });

From b452b7526fc2eb206bffb4b85c0a8cd36d2e6204 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 07:55:42 +0100
Subject: [PATCH 04/24] feat(theme): added nuxt-img to products carousel, added
 image enums

---
 .../theme/components/ProductsCarousel.vue     | 43 ++++++++++++++++++-
 packages/theme/composables/useImage/index.ts  |  2 +
 packages/theme/enums/imageEnums.js            | 10 +++++
 packages/theme/pages/Category.vue             | 13 +++---
 4 files changed, 60 insertions(+), 8 deletions(-)
 create mode 100644 packages/theme/enums/imageEnums.js

diff --git a/packages/theme/components/ProductsCarousel.vue b/packages/theme/components/ProductsCarousel.vue
index 5c281906e..714dc375b 100644
--- a/packages/theme/components/ProductsCarousel.vue
+++ b/packages/theme/components/ProductsCarousel.vue
@@ -19,7 +19,9 @@
         >
           <SfProductCard
             :title="productGetters.getName(product)"
-            :image="productGetters.getProductThumbnailImage(product)"
+            :image-width="imageSizes.productCard.width"
+            :image-height="imageSizes.productCard.height"
+            :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
             :regular-price="$fc(productGetters.getPrice(product).regular)"
             :special-price="productGetters.getPrice(product).special && $fc(productGetters.getPrice(product).special)"
             :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
@@ -32,7 +34,37 @@
             :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
             @click:wishlist="addItemToWishlist(product)"
             @click:add-to-cart="addItemToCart({ product, quantity: 1 })"
-          />
+          >
+            <template #image="imageSlotProps">
+              <SfButton
+                :link="imageSlotProps.link"
+                class="sf-button--pure sf-product-card__link"
+                data-testid="product-link"
+                aria-label="Go To Product"
+                v-on="$listeners"
+              >
+                <template v-if="Array.isArray(imageSlotProps.image)">
+                  <nuxt-img
+                    v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                    :key="key"
+                    class="sf-product-card__picture"
+                    :src="picture"
+                    :alt="imageSlotProps.title"
+                    :width="imageSlotProps.imageWidth"
+                    :height="imageSlotProps.imageHeight"
+                  />
+                </template>
+                <nuxt-img
+                  v-else
+                  class="sf-product-card__image lol"
+                  :src="imageSlotProps.image"
+                  :alt="imageSlotProps.title"
+                  :width="imageSlotProps.imageWidth"
+                  :height="imageSlotProps.imageHeight"
+                />
+              </SfButton>
+            </template>
+          </SfProductCard>
         </SfCarouselItem>
       </SfCarousel>
     </SfLoader>
@@ -45,6 +77,7 @@ import {
   SfProductCard,
   SfSection,
   SfLoader,
+  SfButton
 } from '@storefront-ui/vue';
 
 import {
@@ -52,6 +85,7 @@ import {
 } from '@vue-storefront/magento';
 import { computed, defineComponent } from '@nuxtjs/composition-api';
 import { useAddToCart } from '~/helpers/cart/addToCart';
+import { useImage } from '~/composables';
 
 export default defineComponent({
   name: 'ProductsCarousel',
@@ -60,6 +94,7 @@ export default defineComponent({
     SfProductCard,
     SfSection,
     SfLoader,
+    SfButton,
   },
   props: {
     title: {
@@ -96,6 +131,8 @@ export default defineComponent({
       );
     };
 
+    const { getMagentoImage, imageSizes } = useImage();
+
     return {
       addItemToCart,
       addItemToWishlist,
@@ -104,6 +141,8 @@ export default defineComponent({
       isInWishlist,
       mappedProducts,
       productGetters,
+      getMagentoImage,
+      imageSizes,
     };
   },
 });
diff --git a/packages/theme/composables/useImage/index.ts b/packages/theme/composables/useImage/index.ts
index 1d42e3b81..15931615e 100644
--- a/packages/theme/composables/useImage/index.ts
+++ b/packages/theme/composables/useImage/index.ts
@@ -1,4 +1,5 @@
 import { useContext } from '@nuxtjs/composition-api';
+import imageSizes from '~/enums/imageEnums';
 
 const useImage = () => {
   // @ts-ignore
@@ -19,6 +20,7 @@ const useImage = () => {
 
   return {
     getMagentoImage,
+    imageSizes
   };
 };
 
diff --git a/packages/theme/enums/imageEnums.js b/packages/theme/enums/imageEnums.js
new file mode 100644
index 000000000..216a7547e
--- /dev/null
+++ b/packages/theme/enums/imageEnums.js
@@ -0,0 +1,10 @@
+module.exports = {
+  productCard: {
+    width: 216,
+    height: 268,
+  },
+  productCardHorizontal: {
+    width: 140,
+    height: 200,
+  },
+};
diff --git a/packages/theme/pages/Category.vue b/packages/theme/pages/Category.vue
index d4a84c2a9..1ea8258a7 100644
--- a/packages/theme/pages/Category.vue
+++ b/packages/theme/pages/Category.vue
@@ -122,8 +122,8 @@
               class="products__product-card"
               :style="{ '--index': i }"
               :title="productGetters.getName(product)"
-              :image-width="216"
-              :image-height="268"
+              :image-width="imageSizes.productCard.width"
+              :image-height="imageSizes.productCard.height"
               :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
               :regular-price="$fc(productGetters.getPrice(product).regular)"
               :special-price="productGetters.getPrice(product).special && $fc(productGetters.getPrice(product).special)"
@@ -190,8 +190,8 @@
               :title="productGetters.getName(product)"
               :description="productGetters.getDescription(product)"
               :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
-              image-width="140"
-              image-height="200"
+              :image-width="imageSizes.productCardHorizontal.width"
+              :image-height="imageSizes.productCardHorizontal.height"
               :regular-price="$fc(productGetters.getPrice(product).regular)"
               :special-price="productGetters.getPrice(product).special && $fc(productGetters.getPrice(product).special)"
               :score-rating="productGetters.getAverageRating(product)"
@@ -638,7 +638,7 @@ export default defineComponent({
       }
     });
 
-    const image = useImage();
+    const { getMagentoImage, imageSizes } = useImage();
 
     return {
       routeData,
@@ -664,7 +664,8 @@ export default defineComponent({
       selectFilter,
       sortBy,
       uiHelpers,
-      getMagentoImage: image.getMagentoImage,
+      getMagentoImage,
+      imageSizes,
     };
   },
 });

From 801923f1a9de6ab09b25713991eb9ab91f72b1bd Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 08:11:42 +0100
Subject: [PATCH 05/24] feat(theme): added nuxt-img for search results

---
 packages/theme/components/SearchResults.vue | 78 +++++++++++++++++++--
 1 file changed, 73 insertions(+), 5 deletions(-)

diff --git a/packages/theme/components/SearchResults.vue b/packages/theme/components/SearchResults.vue
index 6c4ad1cfb..4de0e0e6f 100644
--- a/packages/theme/components/SearchResults.vue
+++ b/packages/theme/components/SearchResults.vue
@@ -73,7 +73,9 @@
                   :max-rating="5"
                   :score-rating="productGetters.getAverageRating(product)"
                   :reviews-count="productGetters.getTotalReviews(product)"
-                  :image="productGetters.getProductThumbnailImage(product)"
+                  :image-width="imageSizes.productCard.width"
+                  :image-height="imageSizes.productCard.height"
+                  :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
                   :alt="productGetters.getName(product)"
                   :title="productGetters.getName(product)"
                   :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
@@ -81,7 +83,37 @@
                   :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
                   :is-in-wishlist="product.isInWishlist"
                   @click:wishlist="addItemToWishlist(product)"
-                />
+                >
+                  <template #image="imageSlotProps">
+                    <SfButton
+                      :link="imageSlotProps.link"
+                      class="sf-button--pure sf-product-card__link"
+                      data-testid="product-link"
+                      aria-label="Go To Product"
+                      v-on="$listeners"
+                    >
+                      <template v-if="Array.isArray(imageSlotProps.image)">
+                        <nuxt-img
+                          v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                          :key="key"
+                          class="sf-product-card__picture"
+                          :src="picture"
+                          :alt="imageSlotProps.title"
+                          :width="imageSlotProps.imageWidth"
+                          :height="imageSlotProps.imageHeight"
+                        />
+                      </template>
+                      <nuxt-img
+                        v-else
+                        class="sf-product-card__image lol"
+                        :src="imageSlotProps.image"
+                        :alt="imageSlotProps.title"
+                        :width="imageSlotProps.imageWidth"
+                        :height="imageSlotProps.imageHeight"
+                      />
+                    </SfButton>
+                  </template>
+                </SfProductCard>
               </div>
             </SfScrollable>
             <div class="results--mobile smartphone-only">
@@ -93,7 +125,9 @@
                 :max-rating="5"
                 :score-rating="productGetters.getAverageRating(product)"
                 :reviews-count="productGetters.getTotalReviews(product)"
-                :image="productGetters.getProductThumbnailImage(product)"
+                :image-width="imageSizes.productCardHorizontal.width"
+                :image-height="imageSizes.productCardHorizontal.height"
+                :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
                 :alt="productGetters.getName(product)"
                 :title="productGetters.getName(product)"
                 :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
@@ -101,7 +135,37 @@
                 :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
                 :is-in-wishlist="product.isInWishlist"
                 @click:wishlist="addItemToWishlist(product)"
-              />
+              >
+                <template #image="imageSlotProps">
+                  <SfButton
+                    :link="imageSlotProps.link"
+                    class="sf-button--pure sf-product-card__link"
+                    data-testid="product-link"
+                    aria-label="Go To Product"
+                    v-on="$listeners"
+                  >
+                    <template v-if="Array.isArray(imageSlotProps.image)">
+                      <nuxt-img
+                        v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                        :key="key"
+                        class="sf-product-card__picture"
+                        :src="picture"
+                        :alt="imageSlotProps.title"
+                        :width="imageSlotProps.imageWidth"
+                        :height="imageSlotProps.imageHeight"
+                      />
+                    </template>
+                    <nuxt-img
+                      v-else
+                      class="sf-product-card__image lol"
+                      :src="imageSlotProps.image"
+                      :alt="imageSlotProps.title"
+                      :width="imageSlotProps.imageWidth"
+                      :height="imageSlotProps.imageHeight"
+                    />
+                  </SfButton>
+                </template>
+              </SfProductCard>
             </div>
           </SfMegaMenuColumn>
           <div class="action-buttons smartphone-only">
@@ -158,7 +222,7 @@ import {
   defineComponent,
 } from '@nuxtjs/composition-api';
 import { productGetters, useUser, useWishlist } from '@vue-storefront/magento';
-import { useUiHelpers } from '~/composables';
+import { useUiHelpers, useImage } from '~/composables';
 
 export default defineComponent({
   name: 'SearchResults',
@@ -208,6 +272,8 @@ export default defineComponent({
       );
     };
 
+    const { getMagentoImage, imageSizes } = useImage();
+
     return {
       th,
       isSearchOpen,
@@ -217,6 +283,8 @@ export default defineComponent({
       addItemToWishlist,
       isInWishlist,
       isAuthenticated,
+      getMagentoImage,
+      imageSizes
     };
   },
 });

From 044e91d858f24320f624861e47092f53c2368d5f Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 09:11:17 +0100
Subject: [PATCH 06/24] feat(theme): added nuxt-img to my account wishlist

---
 packages/theme/pages/MyAccount/MyWishlist.vue | 75 ++++++++++++++++++-
 1 file changed, 71 insertions(+), 4 deletions(-)

diff --git a/packages/theme/pages/MyAccount/MyWishlist.vue b/packages/theme/pages/MyAccount/MyWishlist.vue
index f12bf4c1c..cdd86e453 100644
--- a/packages/theme/pages/MyAccount/MyWishlist.vue
+++ b/packages/theme/pages/MyAccount/MyWishlist.vue
@@ -66,7 +66,9 @@
                   :key="productGetters.getSlug(product.product)"
                   v-e2e="'wishlist-product-card'"
                   class="products__product-card"
-                  :image="productGetters.getProductThumbnailImage(product.product)"
+                  :image-width="imageSizes.productCard.width"
+                  :image-height="imageSizes.productCard.height"
+                  :image="getMagentoImage(productGetters.getProductThumbnailImage(product.product))"
                   :is-added-to-cart="isInCart({ product: product.product })"
                   :is-in-wishlist="true"
                   :link="
@@ -87,7 +89,37 @@
                   wishlist-icon
                   @click:wishlist="removeItemFromWishlist(product.product)"
                   @click:add-to-cart="addItemToCart({ product: product.product, quantity: 1 })"
-                />
+                >
+                  <template #image="imageSlotProps">
+                    <SfButton
+                      :link="imageSlotProps.link"
+                      class="sf-button--pure sf-product-card__link"
+                      data-testid="product-link"
+                      aria-label="Go To Product"
+                      v-on="$listeners"
+                    >
+                      <template v-if="Array.isArray(imageSlotProps.image)">
+                        <nuxt-img
+                          v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                          :key="key"
+                          class="sf-product-card__picture"
+                          :src="picture"
+                          :alt="imageSlotProps.title"
+                          :width="imageSlotProps.imageWidth"
+                          :height="imageSlotProps.imageHeight"
+                        />
+                      </template>
+                      <nuxt-img
+                        v-else
+                        class="sf-product-card__image lol"
+                        :src="imageSlotProps.image"
+                        :alt="imageSlotProps.title"
+                        :width="imageSlotProps.imageWidth"
+                        :height="imageSlotProps.imageHeight"
+                      />
+                    </SfButton>
+                  </template>
+                </SfProductCard>
               </transition-group>
               <transition-group
                 v-else
@@ -101,7 +133,9 @@
                   :key="productGetters.getSlug(product.product)"
                   class="products__product-card-horizontal"
                   :description="productGetters.getDescription(product.product)"
-                  :image="productGetters.getProductThumbnailImage(product.product)"
+                  :image="getMagentoImage(productGetters.getProductThumbnailImage(product.product))"
+                  :image-width="imageSizes.productCardHorizontal.width"
+                  :image-height="imageSizes.productCardHorizontal.height"
                   :is-in-wishlist="true"
                   :link="
                     localePath(
@@ -121,6 +155,35 @@
                   @click:wishlist="removeItemFromWishlist(product.product)"
                   @click:add-to-cart="addItemToCart({ product: product.product, quantity: 1 })"
                 >
+                  <template #image="imageSlotProps">
+                    <SfLink
+                      :link="imageSlotProps.link"
+                      class="
+                    sf-product-card-horizontal__link
+                    sf-product-card-horizontal__link--image
+                  "
+                    >
+                      <template v-if="Array.isArray(imageSlotProps.image)">
+                        <nuxt-img
+                          v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                          :key="key"
+                          class="sf-product-card-horizontal__picture"
+                          :src="picture"
+                          :alt="imageSlotProps.title"
+                          :width="imageSlotProps.imageWidth"
+                          :height="imageSlotProps.imageHeight"
+                        />
+                      </template>
+                      <nuxt-img
+                        v-else
+                        class="sf-product-card-horizontal__image"
+                        :src="imageSlotProps.image"
+                        :alt="imageSlotProps.title"
+                        :width="imageSlotProps.imageWidth"
+                        :height="imageSlotProps.imageHeight"
+                      />
+                    </SfLink>
+                  </template>
                   <template #configuration>
                     <SfProperty
                       class="desktop-only"
@@ -214,7 +277,7 @@ import {
   productGetters,
   wishlistGetters,
 } from '@vue-storefront/magento';
-import { useUiHelpers, useUiState } from '~/composables';
+import { useUiHelpers, useUiState, useImage } from '~/composables';
 
 export default defineComponent({
   name: 'MyWishlist',
@@ -287,6 +350,8 @@ export default defineComponent({
       await removeItem({ product });
     };
 
+    const { getMagentoImage, imageSizes } = useImage();
+
     onSSR(async () => {
       await load({
         searchParams: {
@@ -307,6 +372,8 @@ export default defineComponent({
       products,
       th,
       wishlist,
+      getMagentoImage,
+      imageSizes
     };
   },
 });

From 0457ea85e73ed3e44c021f1f8f6c05260362ed68 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 09:17:34 +0100
Subject: [PATCH 07/24] feat(theme): changed log to use nuxt-img

---
 packages/theme/components/AppHeader.vue               | 6 ++++--
 packages/theme/static/icons/{logo.svg => logo_icao8u} | 0
 2 files changed, 4 insertions(+), 2 deletions(-)
 rename packages/theme/static/icons/{logo.svg => logo_icao8u} (100%)

diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index 77e580468..ef89f5783 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/packages/theme/components/AppHeader.vue
@@ -10,10 +10,12 @@
           :to="localePath('/')"
           class="sf-header__logo"
         >
-          <SfImage
-            src="/icons/logo.svg"
+          <nuxt-img
+            src="/icons/logo_icao8u.svg"
             alt="Vue Storefront Next"
             class="sf-header__logo-image"
+            width="35"
+            height="34"
           />
         </nuxt-link>
       </template>
diff --git a/packages/theme/static/icons/logo.svg b/packages/theme/static/icons/logo_icao8u
similarity index 100%
rename from packages/theme/static/icons/logo.svg
rename to packages/theme/static/icons/logo_icao8u

From 6433f51fc19c0eeba3e123057c229ecdde924a8f Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 09:21:14 +0100
Subject: [PATCH 08/24] feat(theme): changed empty cart icon to use nuxt-img

---
 packages/theme/components/AppHeader.vue                   | 2 --
 packages/theme/components/CartSidebar.vue                 | 8 ++++----
 .../icons/{empty-cart.svg => empty-cart_x0qael.svg}       | 0
 .../theme/static/icons/{logo_icao8u => logo_icao8u.svg}   | 0
 4 files changed, 4 insertions(+), 6 deletions(-)
 rename packages/theme/static/icons/{empty-cart.svg => empty-cart_x0qael.svg} (100%)
 rename packages/theme/static/icons/{logo_icao8u => logo_icao8u.svg} (100%)

diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index ef89f5783..04424399a 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/packages/theme/components/AppHeader.vue
@@ -157,7 +157,6 @@
 <script>
 import {
   SfHeader,
-  SfImage,
   SfIcon,
   SfButton,
   SfBadge,
@@ -199,7 +198,6 @@ import SearchResults from '~/components/SearchResults.vue';
 export default defineComponent({
   components: {
     SfHeader,
-    SfImage,
     StoreSwitcher,
     SfIcon,
     SfButton,
diff --git a/packages/theme/components/CartSidebar.vue b/packages/theme/components/CartSidebar.vue
index 8f344715c..df858a66c 100644
--- a/packages/theme/components/CartSidebar.vue
+++ b/packages/theme/components/CartSidebar.vue
@@ -166,10 +166,12 @@
           class="empty-cart"
         >
           <div class="empty-cart__banner">
-            <SfImage
+            <nuxt-img
               alt="Empty bag"
               class="empty-cart__image"
-              src="/icons/empty-cart.svg"
+              src="/icons/empty-cart_x0qael.svg"
+              width="211"
+              height="143"
             />
             <SfHeading
               title="Your cart is empty"
@@ -240,7 +242,6 @@ import {
   SfProperty,
   SfPrice,
   SfCollectedProduct,
-  SfImage,
   SfQuantitySelector,
   SfBadge,
 } from '@storefront-ui/vue';
@@ -272,7 +273,6 @@ export default defineComponent({
     SfProperty,
     SfPrice,
     SfCollectedProduct,
-    SfImage,
     SfQuantitySelector,
     SfBadge,
     CouponCode,
diff --git a/packages/theme/static/icons/empty-cart.svg b/packages/theme/static/icons/empty-cart_x0qael.svg
similarity index 100%
rename from packages/theme/static/icons/empty-cart.svg
rename to packages/theme/static/icons/empty-cart_x0qael.svg
diff --git a/packages/theme/static/icons/logo_icao8u b/packages/theme/static/icons/logo_icao8u.svg
similarity index 100%
rename from packages/theme/static/icons/logo_icao8u
rename to packages/theme/static/icons/logo_icao8u.svg

From 053235bcabdb6afcc404cb2d456f3ab19bf12a00 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 09:39:24 +0100
Subject: [PATCH 09/24] feat(theme): added nuxt-img to instagram feed, updated
 image names

---
 packages/theme/components/AppHeader.vue       |  2 +-
 packages/theme/components/CartSidebar.vue     |  2 +-
 packages/theme/components/InstagramFeed.vue   | 50 ++++++-------------
 .../{empty-cart_x0qael.svg => empty-cart.svg} |  0
 .../icons/{logo_icao8u.svg => logo.svg}       |  0
 5 files changed, 18 insertions(+), 36 deletions(-)
 rename packages/theme/static/icons/{empty-cart_x0qael.svg => empty-cart.svg} (100%)
 rename packages/theme/static/icons/{logo_icao8u.svg => logo.svg} (100%)

diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index 04424399a..ed46990ef 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/packages/theme/components/AppHeader.vue
@@ -11,7 +11,7 @@
           class="sf-header__logo"
         >
           <nuxt-img
-            src="/icons/logo_icao8u.svg"
+            src="/icons/logo.svg"
             alt="Vue Storefront Next"
             class="sf-header__logo-image"
             width="35"
diff --git a/packages/theme/components/CartSidebar.vue b/packages/theme/components/CartSidebar.vue
index df858a66c..3eb25f304 100644
--- a/packages/theme/components/CartSidebar.vue
+++ b/packages/theme/components/CartSidebar.vue
@@ -169,7 +169,7 @@
             <nuxt-img
               alt="Empty bag"
               class="empty-cart__image"
-              src="/icons/empty-cart_x0qael.svg"
+              src="/icons/empty-cart.svg"
               width="211"
               height="143"
             />
diff --git a/packages/theme/components/InstagramFeed.vue b/packages/theme/components/InstagramFeed.vue
index e2b1caf70..67743d4e0 100644
--- a/packages/theme/components/InstagramFeed.vue
+++ b/packages/theme/components/InstagramFeed.vue
@@ -7,86 +7,70 @@
     <div class="grid grid-images">
       <div class="grid__row">
         <div class="grid__col">
-          <SfImage
+          <nuxt-img
             v-if="isMobile"
             src="/homepage/imageAm.webp"
             alt="katherina_trn"
             :width="160"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
-          <SfImage
+          />
+          <nuxt-img
             v-else
             src="/homepage/imageAd.webp"
             alt="katherina_trn"
             :width="470"
             :height="470"
-          >
-            katherina_trn
-          </SfImage>
+          />
         </div>
         <div class="grid__col small">
-          <SfImage
+          <nuxt-img
             v-if="isMobile"
             src="/homepage/imageBm.webp"
             alt="katherina_trn"
             :width="160"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
-          <SfImage
+          />
+          <nuxt-img
             v-else
             src="/homepage/imageCd.webp"
             alt="katherina_trn"
             :width="470"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
+          />
         </div>
       </div>
       <div class="grid__row">
         <div class="grid__col small">
-          <SfImage
+          <nuxt-img
             v-if="isMobile"
             src="/homepage/imageCm.webp"
             alt="katherina_trn"
             :width="160"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
-          <SfImage
+          />
+          <nuxt-img
             v-else
             src="/homepage/imageBd.webp"
             alt="katherina_trn"
             :width="470"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
+          />
         </div>
         <div class="grid__col">
-          <SfImage
+          <nuxt-img
             v-if="isMobile"
             src="/homepage/imageDm.webp"
             alt="katherina_trn"
             :width="160"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
-          <SfImage
+          />
+          <nuxt-img
             v-else
             src="/homepage/imageDd.webp"
             alt="katherina_trn"
             :width="470"
             :height="470"
-          >
-            katherina_trn
-          </SfImage>
+          />
         </div>
       </div>
     </div>
@@ -95,7 +79,6 @@
 <script>
 import {
   SfSection,
-  SfImage,
 } from '@storefront-ui/vue';
 import {
   mapMobileObserver,
@@ -107,7 +90,6 @@ export default defineComponent({
   name: 'InstagramFeed',
   components: {
     SfSection,
-    SfImage,
   },
   computed: {
     ...mapMobileObserver(),
diff --git a/packages/theme/static/icons/empty-cart_x0qael.svg b/packages/theme/static/icons/empty-cart.svg
similarity index 100%
rename from packages/theme/static/icons/empty-cart_x0qael.svg
rename to packages/theme/static/icons/empty-cart.svg
diff --git a/packages/theme/static/icons/logo_icao8u.svg b/packages/theme/static/icons/logo.svg
similarity index 100%
rename from packages/theme/static/icons/logo_icao8u.svg
rename to packages/theme/static/icons/logo.svg

From b57bf5c44454bcf16fee443c3d83eb18da0c4b83 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 09:43:28 +0100
Subject: [PATCH 10/24] feat(theme): changed error image on search results to
 use nuxt-img

---
 packages/theme/components/SearchResults.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/theme/components/SearchResults.vue b/packages/theme/components/SearchResults.vue
index 4de0e0e6f..037045e23 100644
--- a/packages/theme/components/SearchResults.vue
+++ b/packages/theme/components/SearchResults.vue
@@ -182,11 +182,12 @@
           key="no-results"
           class="before-results"
         >
-          <SfImage
+          <nuxt-img
             src="/error/error.svg"
             class="before-results__picture"
             alt="error"
-            loading="lazy"
+            width="412"
+            height="412"
           />
           <p class="before-results__paragraph">
             {{ $t('You haven’t searched for items yet') }}
@@ -213,7 +214,6 @@ import {
   SfScrollable,
   SfMenuItem,
   SfButton,
-  SfImage,
 } from '@storefront-ui/vue';
 import {
   ref,
@@ -233,7 +233,6 @@ export default defineComponent({
     SfScrollable,
     SfMenuItem,
     SfButton,
-    SfImage,
   },
   props: {
     visible: {

From a02fb04c59d5541a516c67bdd1554d3a95f1ebd8 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 09:47:53 +0100
Subject: [PATCH 11/24] feat(theme): update store switcher to use nuxt-img
 instead of SfImage

---
 packages/theme/components/StoreSwitcher.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/theme/components/StoreSwitcher.vue b/packages/theme/components/StoreSwitcher.vue
index 80fd9e564..53a2a3ba4 100644
--- a/packages/theme/components/StoreSwitcher.vue
+++ b/packages/theme/components/StoreSwitcher.vue
@@ -9,9 +9,10 @@
           <span>{{ storeConfig.store_name }}</span>
         </template>
         <template #icon>
-          <SfImage
+          <nuxt-img
             :src="`/icons/langs/${storeConfigGetters.getLocale(storeConfig)}.webp`"
             width="20"
+            height="20"
             alt="Flag"
             class="language__flag"
           />
@@ -45,9 +46,10 @@
                 <span>{{ storeConfigGetters.getName(store) }}</span>
               </template>
               <template #icon>
-                <SfImage
+                <nuxt-img
                   :src="`/icons/langs/${storeConfigGetters.getLocale(store)}.webp`"
                   width="20"
+                  height="20"
                   alt="Flag"
                   class="language__flag"
                 />
@@ -68,7 +70,6 @@ import {
   storeGetters,
 } from '@vue-storefront/magento';
 import {
-  SfImage,
   SfButton,
   SfList,
   SfBottomModal,
@@ -84,7 +85,6 @@ import { useHandleChanges } from '~/helpers/magentoConfig/handleChanges';
 export default defineComponent({
   name: 'StoreSwitcher',
   components: {
-    SfImage,
     SfButton,
     SfList,
     SfBottomModal,

From f89a049748ecb9d924bbf5eeaac7a6e6f90e615e Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 10:23:05 +0100
Subject: [PATCH 12/24] feat(theme): added nuxt-img to wishlist sidebar

---
 packages/theme/components/WishlistSidebar.vue | 17 ++++++++++-------
 packages/theme/composables/useImage/index.ts  |  2 +-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/theme/components/WishlistSidebar.vue b/packages/theme/components/WishlistSidebar.vue
index 4a041b801..a2b461e50 100644
--- a/packages/theme/components/WishlistSidebar.vue
+++ b/packages/theme/components/WishlistSidebar.vue
@@ -61,8 +61,8 @@
                     localePath(`/p/${wishlistGetters.getItemSku(product)}${productGetters.getSlug(product.product, product.product.categories[0])}`)
                   "
                 >
-                  <SfImage
-                    :src="wishlistGetters.getItemImage(product)"
+                  <nuxt-img
+                    :src="getMagentoImage(wishlistGetters.getItemImage(product))"
                     :alt="wishlistGetters.getItemName(product)"
                     :width="140"
                     :height="200"
@@ -118,10 +118,12 @@
           class="empty-wishlist"
         >
           <div class="empty-wishlist__banner">
-            <SfImage
+            <nuxt-img
               src="/icons/empty-cart.svg"
               alt="Empty bag"
               class="empty-wishlist__icon"
+              width="211"
+              height="143"
             />
             <SfHeading
               title="Your bag is empty"
@@ -151,7 +153,6 @@ import {
   SfProperty,
   SfPrice,
   SfCollectedProduct,
-  SfImage,
   SfLink,
 } from '@storefront-ui/vue';
 import { computed, defineComponent } from '@nuxtjs/composition-api';
@@ -161,8 +162,7 @@ import {
   wishlistGetters,
   productGetters,
 } from '@vue-storefront/magento';
-import { onSSR } from '@vue-storefront/core';
-import { useUiState } from '~/composables';
+import { useUiState, useImage } from '~/composables';
 
 export default defineComponent({
   name: 'WishlistSidebar',
@@ -174,7 +174,6 @@ export default defineComponent({
     SfProperty,
     SfPrice,
     SfCollectedProduct,
-    SfImage,
     SfLink,
   },
   setup() {
@@ -188,6 +187,8 @@ export default defineComponent({
     const getAttributes = (product) => product?.product?.configurable_options || [];
     const getBundles = (product) => product?.product?.items?.map((b) => b.title).flat() || [];
 
+    const { getMagentoImage, imageSizes } = useImage();
+
     return {
       getAttributes,
       getBundles,
@@ -201,6 +202,8 @@ export default defineComponent({
       wishlistGetters,
       wishlist,
       productGetters,
+      getMagentoImage,
+      imageSizes
     };
   },
 });
diff --git a/packages/theme/composables/useImage/index.ts b/packages/theme/composables/useImage/index.ts
index 15931615e..a88e83b8e 100644
--- a/packages/theme/composables/useImage/index.ts
+++ b/packages/theme/composables/useImage/index.ts
@@ -20,7 +20,7 @@ const useImage = () => {
 
   return {
     getMagentoImage,
-    imageSizes
+    imageSizes,
   };
 };
 

From 93dfeb2dbd92b338028e919655372076988ae26e Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 10:36:33 +0100
Subject: [PATCH 13/24] feat(theme): added nuxt-img to MobileStoreBanner

---
 packages/theme/components/MobileStoreBanner.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/theme/components/MobileStoreBanner.vue b/packages/theme/components/MobileStoreBanner.vue
index 18144fd72..afd7dc81f 100644
--- a/packages/theme/components/MobileStoreBanner.vue
+++ b/packages/theme/components/MobileStoreBanner.vue
@@ -12,7 +12,7 @@
           aria-label="Go to Apple Product"
           @click="() => {}"
         >
-          <img
+          <nuxt-img
             src="/homepage/apple.png"
             width="174"
             height="57"
@@ -23,7 +23,7 @@
           aria-label="Go to Google Product"
           @click="() => {}"
         >
-          <img
+          <nuxt-img
             src="/homepage/google.png"
             width="174"
             height="57"

From e10c8f73902b60a701c9c4d678a500164b074cbd Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 10:41:46 +0100
Subject: [PATCH 14/24] feat(theme): added nuxt-img to grouoped product
 selector

---
 packages/theme/components/MobileStoreBanner.vue       |  4 ++--
 .../components/Products/GroupedProductSelector.vue    | 11 +++++++----
 packages/theme/components/WishlistSidebar.vue         |  2 +-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/theme/components/MobileStoreBanner.vue b/packages/theme/components/MobileStoreBanner.vue
index afd7dc81f..70067b920 100644
--- a/packages/theme/components/MobileStoreBanner.vue
+++ b/packages/theme/components/MobileStoreBanner.vue
@@ -16,7 +16,7 @@
             src="/homepage/apple.png"
             width="174"
             height="57"
-          >
+          />
         </SfButton>
         <SfButton
           class="banner-app__button sf-button--pure"
@@ -27,7 +27,7 @@
             src="/homepage/google.png"
             width="174"
             height="57"
-          >
+          />
         </SfButton>
       </div>
     </template>
diff --git a/packages/theme/components/Products/GroupedProductSelector.vue b/packages/theme/components/Products/GroupedProductSelector.vue
index 138c022ee..e592ed472 100644
--- a/packages/theme/components/Products/GroupedProductSelector.vue
+++ b/packages/theme/components/Products/GroupedProductSelector.vue
@@ -8,10 +8,11 @@
         :key="index"
         class="grouped_items--item"
       >
-        <SfImage
-          :src="productGetters.getProductThumbnailImage(groupedItem.product)"
+        <nuxt-img
+          :src="getMagentoImage(productGetters.getProductThumbnailImage(groupedItem.product))"
           :alt="productGetters.getName(groupedItem.product)"
           :width="60"
+          :height="60"
         />
         <div>
           <p>{{ productGetters.getName(groupedItem.product) }}</p>
@@ -42,19 +43,18 @@ import {
   SfPrice,
   SfButton,
   SfQuantitySelector,
-  SfImage,
 } from '@storefront-ui/vue';
 import { productGetters, useCart } from '@vue-storefront/magento';
 import {
   computed, watch, ref, defineComponent,
 } from '@nuxtjs/composition-api';
 import { productData } from '~/helpers/product/productData';
+import { useImage } from '~/composables';
 
 export default defineComponent({
   name: 'GroupedProductSelector',
   components: {
     SfList,
-    SfImage,
     SfPrice,
     SfButton,
     SfQuantitySelector,
@@ -105,6 +105,8 @@ export default defineComponent({
       deep: true,
     });
 
+    const { getMagentoImage } = useImage();
+
     return {
       addToCart,
       groupedItems,
@@ -112,6 +114,7 @@ export default defineComponent({
       productLoading,
       product,
       productGetters,
+      getMagentoImage,
     };
   },
 });
diff --git a/packages/theme/components/WishlistSidebar.vue b/packages/theme/components/WishlistSidebar.vue
index a2b461e50..bab241cdc 100644
--- a/packages/theme/components/WishlistSidebar.vue
+++ b/packages/theme/components/WishlistSidebar.vue
@@ -203,7 +203,7 @@ export default defineComponent({
       wishlist,
       productGetters,
       getMagentoImage,
-      imageSizes
+      imageSizes,
     };
   },
 });

From cdc464eb3e8c58cbfb40e29435ab6b14577f54da Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 11:04:15 +0100
Subject: [PATCH 15/24] feat(theme): added nuxt-img to payment component

---
 packages/theme/enums/imageEnums.js        |  4 ++++
 packages/theme/pages/Checkout/Payment.vue | 13 +++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/theme/enums/imageEnums.js b/packages/theme/enums/imageEnums.js
index 216a7547e..44e9bf02d 100644
--- a/packages/theme/enums/imageEnums.js
+++ b/packages/theme/enums/imageEnums.js
@@ -7,4 +7,8 @@ module.exports = {
     width: 140,
     height: 200,
   },
+  cartItem: {
+    width: 100,
+    height: 100,
+  },
 };
diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue
index c7ed39b48..4a582e0d6 100644
--- a/packages/theme/pages/Checkout/Payment.vue
+++ b/packages/theme/pages/Checkout/Payment.vue
@@ -25,9 +25,11 @@
         class="table__row"
       >
         <SfTableData class="table__image">
-          <SfImage
-            :src="cartGetters.getItemImage(product)"
+          <nuxt-img
+            :src="getMagentoImage(cartGetters.getItemImage(product))"
             :alt="cartGetters.getItemName(product)"
+            :width="imageSizes.cartItem.width"
+            :height="imageSizes.cartItem.height"
           />
         </SfTableData>
         <SfTableData class="table__data table__description table__data">
@@ -160,7 +162,6 @@ import {
   SfCheckbox,
   SfButton,
   SfDivider,
-  SfImage,
   SfPrice,
   SfProperty,
   SfLink,
@@ -179,6 +180,7 @@ import {
   cartGetters,
 } from '@vue-storefront/magento';
 import getShippingMethodPrice from '~/helpers/checkout/getShippingMethodPrice';
+import { useImage } from '~/composables';
 
 export default defineComponent({
   name: 'ReviewOrderAndPayment',
@@ -188,7 +190,6 @@ export default defineComponent({
     SfCheckbox,
     SfButton,
     SfDivider,
-    SfImage,
     SfPrice,
     SfProperty,
     SfLink,
@@ -221,6 +222,8 @@ export default defineComponent({
     const hasDiscounts = computed(() => discounts.value.length > 0);
     const discountsAmount = computed(() => -1 * discounts.value.reduce((a, el) => el.value + a, 0));
 
+    const { getMagentoImage, imageSizes } = useImage();
+
     return {
       cart,
       cartGetters,
@@ -238,6 +241,8 @@ export default defineComponent({
       totals: computed(() => cartGetters.getTotals(cart.value)),
       getAttributes,
       getBundles,
+      getMagentoImage,
+      imageSizes,
     };
   },
 });

From 2c99dc380d2ae67b996249f367b259f03d71f0d0 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 11:36:34 +0100
Subject: [PATCH 16/24] docs: added docs for external images providers

---
 docs/guide/configuration.md                  | 79 +++++++++++++++++++-
 packages/theme/composables/useImage/index.ts |  7 ++
 2 files changed, 85 insertions(+), 1 deletion(-)

diff --git a/docs/guide/configuration.md b/docs/guide/configuration.md
index 5015ec053..9d2b44adb 100644
--- a/docs/guide/configuration.md
+++ b/docs/guide/configuration.md
@@ -15,6 +15,9 @@ MAGENTO_GRAPHQL=https://{YOUR_SITE_FRONT_URL}/graphql # Define Magento GraphQL e
 MAGENTO_EXTERNAL_CHECKOUT=false # Flag if VSF will use External Checkout
 MAGENTO_EXTERNAL_CHECKOUT_URL=https://{YOUR_SITE_FRONT_URL} # External checkout URL
 MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync # External Checkout synchronization path
+MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL} # base url of your Magento instance
+IMAGE_PROVIDER={YOUR_IMAGE_PROVIDER} # your image provider, for example cloudinary, default is ipx
+IMAGE_PROVIDER_BASE_URL={YOUR_IMAGE_PROVIDER_BASE_URL} # base url provided from your image provider. It's used by nuxt-img to fetch images
 ```
 
 ## Configuration file
@@ -35,7 +38,10 @@ Then on the `config` folder create a file `dev.json` with your configurations.
   "externalCheckoutUrl": "https://{YOUR_SITE_FRONT_URL}", // External checkout URL
   "externalCheckoutSyncPath": "/vue/cart/sync", // External Checkout synchronization path
   "nuxtAppEnvironment": "development",  // Define nuxt application environment
-  "nuxtAppPort": 3000 // Define nuxt port
+  "nuxtAppPort": 3000, // Define nuxt port
+  "imageProvider": "ipx", // define image provider
+  "magentoBaseUrl": "https://magento2-instance.vuestorefront.io/", // define your Magento base URL
+  "imageProviderBaseUrl": "https://res-4.cloudinary.com/{YOUR_CLOUD_ID}/image/upload/" // define image provider base url - this is example from cloudinary
 }
 ```
 
@@ -71,3 +77,74 @@ So for this configuration you need to have two Magento store views with correspo
 There are two steps to translate whole storefront:
 1. Add translations in Magento for products and categories if necessary
 2. Add translations to files in the `lang` directory
+
+
+## Image Providers
+Thanks to the [nuxt-img](https://image.nuxtjs.org/) you can use external image providers.
+
+By default, we use the `ipx` provider. that means the images are fetched from Magento, and from `static` directory.
+
+### How to configure external image provider
+
+1. Configure ENV variables
+   1. `MAGENTO_BASE_URL` - base URL of Magento shop. It's used by the `useImage` composable to extract image's path from full Magento URL.
+   2. `IMAGE_PROVIDER` - for example: `cloudinary`. List of available providers is [here](https://image.nuxtjs.org/getting-started/providers)
+   3. `IMAGE_PROVIDER_BASE_URL` - the base url of your project in for example cloudinary or other image providers
+2. Sync your Magento images with external provider
+   1. For example if you have anb image in Magento with path `{YOUR_MAGENTO_BASE_URL}o/media/catalog/product/w/g/wg02-bk-0.jpg`
+   you should have corresponding image in your external provider: `media/catalog/product/w/g/wg02-bk-0.jpg`
+3. Sync your local images with external provider
+   1. Upload content of `static` directory to your external media library
+
+### The useImage composable
+
+Magento GraphQL API returns an URL to cached images, for example: `https://magento2-instance.vuestorefront.io/media/catalog/product/cache/d3f55929541f2d022ca06067148d0eae/w/g/wg02-bk-0.jpg`.
+When you basically download all images from your server (from media) directory, paths are different, they does not include `cache/***/` part.
+
+Because of that, we created the `useImage` hook, which provides `getMagentoImage(fullImageUrl: string)` method.
+That methods returns an URL to image, without magento base url, and cache part. Then you can use it to get images from external providers.
+
+
+When you want to use this composable you need to:
+
+1. import it in component
+`import { useImage } from '~/composables';`
+2. Export `getMagentoImage to a template
+```javascript
+// component body (typically a setup() function)
+const { getMagentoImage } = useImage();
+
+return {
+   ... // other things like computed properties, methods and so on
+   getMagentoImage
+}
+```
+3. Use the `getMagentoImage` method in template like this:
+```vue
+<nuxt-img
+  :src="getMagentoImage(wishlistGetters.getItemImage(product))"
+  :alt="wishlistGetters.getItemName(product)"
+  :width="140"
+  :height="200"
+/>
+```
+
+### ImageSizes enum
+There is helper object in `enums/imageEnums.js` file that export configuration for various image types:
+```javascript
+module.exports = {
+  productCard: {
+    width: 216,
+    height: 268,
+  },
+  productCardHorizontal: {
+    width: 140,
+    height: 200,
+  },
+  cartItem: {
+    width: 100,
+    height: 100,
+  },
+};
+
+```
diff --git a/packages/theme/composables/useImage/index.ts b/packages/theme/composables/useImage/index.ts
index a88e83b8e..14d2c5143 100644
--- a/packages/theme/composables/useImage/index.ts
+++ b/packages/theme/composables/useImage/index.ts
@@ -5,6 +5,13 @@ const useImage = () => {
   // @ts-ignore
   const { $vsf } = useContext();
 
+  /**
+   * Extract image path from Magento URL.
+   *
+   * @param fullImageUrl {string}
+   *
+   * @return {string}
+   */
   const getMagentoImage = (fullImageUrl: string) => {
     const { imageProvider, magentoBaseUrl } = $vsf.$magento.config;
 

From f5a4fa0fcaade22323ad8199504b46182cd2c39f Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 13:03:02 +0100
Subject: [PATCH 17/24] build(cloud): updated vuestorefront cloud docker file
 and added new args

---
 .vuestorefrontcloud/docker/Dockerfile | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/.vuestorefrontcloud/docker/Dockerfile b/.vuestorefrontcloud/docker/Dockerfile
index 6717226d8..db298d2a2 100644
--- a/.vuestorefrontcloud/docker/Dockerfile
+++ b/.vuestorefrontcloud/docker/Dockerfile
@@ -10,6 +10,9 @@ ARG MAGENTO_EXTERNAL_CHECKOUT_URL
 ARG MAGENTO_EXTERNAL_CHECKOUT
 ARG MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH
 ARG STORE_URL
+ARG MAGENTO_BASE_URL
+ARG IMAGE_PROVIDER
+ARG IMAGE_PROVIDER_BASE_URL
 
 ENV MAGENTO_GRAPHQL=${MAGENTO_GRAPHQL}
 ENV MAGENTO_EXTERNAL_CHECKOUT_URL=${MAGENTO_EXTERNAL_CHECKOUT_URL}
@@ -20,6 +23,9 @@ ENV LAST_COMMIT=${COMMIT}
 ENV STORE_ENV=production
 ENV NUXT_APP_ENV=production
 ENV NUXT_APP_PORT=3000
+ARG MAGENTO_BASE_URL=https://magento2-instance.vuestorefront.io/
+ARG IMAGE_PROVIDE=${IMAGE_PROVIDER}
+ARG IMAGE_PROVIDER_BASE_URL=${IMAGE_PROVIDER_BASE_URL}
 
 
 RUN npm install -g npm-cli-login \

From 816d9033fb280124806f0bd01f27ba8e52644a7c Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 13:42:53 +0100
Subject: [PATCH 18/24] build: updated deploy gh action to add image env
 vatiables

---
 .github/workflows/deploy-vue-storefront-cloud.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/deploy-vue-storefront-cloud.yml b/.github/workflows/deploy-vue-storefront-cloud.yml
index b72bd0865..0f1a869ff 100644
--- a/.github/workflows/deploy-vue-storefront-cloud.yml
+++ b/.github/workflows/deploy-vue-storefront-cloud.yml
@@ -36,6 +36,8 @@ jobs:
           MAGENTO_EXTERNAL_CHECKOUT: ${{ secrets.MAGENTO_EXTERNAL_CHECKOUT }}
           MAGENTO_EXTERNAL_CHECKOUT_URL: ${{ secrets.MAGENTO_EXTERNAL_CHECKOUT_URL }}
           MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH: ${{ secrets.MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH }}
+          IMAGE_PROVIDER: ${{ secrets.IMAGE_PROVIDER }}
+          IMAGE_PROVIDER_BASE_URL: ${{ secrets.IMAGE_PROVIDER_BASE_URL }}
   deploy:
     runs-on: ubuntu-latest
     needs: build

From 57a6d132b2cb3a7aeb823df5336ecb75851f9c24 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 13:52:14 +0100
Subject: [PATCH 19/24] docs(configuration): updated docs for image providers

---
 docs/guide/configuration.md | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/docs/guide/configuration.md b/docs/guide/configuration.md
index 9d2b44adb..b4239b262 100644
--- a/docs/guide/configuration.md
+++ b/docs/guide/configuration.md
@@ -90,10 +90,19 @@ By default, we use the `ipx` provider. that means the images are fetched from Ma
    1. `MAGENTO_BASE_URL` - base URL of Magento shop. It's used by the `useImage` composable to extract image's path from full Magento URL.
    2. `IMAGE_PROVIDER` - for example: `cloudinary`. List of available providers is [here](https://image.nuxtjs.org/getting-started/providers)
    3. `IMAGE_PROVIDER_BASE_URL` - the base url of your project in for example cloudinary or other image providers
-2. Sync your Magento images with external provider
+2. Configure your provider in `nuxt.config.js`. Here is the example:
+```javascript
+image: {
+  provider: config.get('imageProvider'),
+  magekit: {
+    baseURL: config.get('imageProviderBaseUrl'),
+  }
+},
+```
+3. Sync your Magento images with external provider
    1. For example if you have anb image in Magento with path `{YOUR_MAGENTO_BASE_URL}o/media/catalog/product/w/g/wg02-bk-0.jpg`
    you should have corresponding image in your external provider: `media/catalog/product/w/g/wg02-bk-0.jpg`
-3. Sync your local images with external provider
+4. Sync your local images with external provider
    1. Upload content of `static` directory to your external media library
 
 ### The useImage composable

From 7e283b05d52ef765f754c49da4224b6dba1ce19d Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 14:21:44 +0100
Subject: [PATCH 20/24] build: added missed buildargs

---
 .github/workflows/deploy-vue-storefront-cloud.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/deploy-vue-storefront-cloud.yml b/.github/workflows/deploy-vue-storefront-cloud.yml
index 0f1a869ff..fe24d98fa 100644
--- a/.github/workflows/deploy-vue-storefront-cloud.yml
+++ b/.github/workflows/deploy-vue-storefront-cloud.yml
@@ -25,7 +25,7 @@ jobs:
           password: ${{ secrets.CLOUD_PASSWORD }}
           dockerfile: .vuestorefrontcloud/docker/Dockerfile
           buildoptions: --compress
-          buildargs: NPM_EMAIL,NPM_PASS,NPM_USER,NPM_REGISTRY,STORE_URL,MAGENTO_GRAPHQL,MAGENTO_EXTERNAL_CHECKOUT,MAGENTO_EXTERNAL_CHECKOUT_URL,MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH
+          buildargs: NPM_EMAIL,NPM_PASS,NPM_USER,NPM_REGISTRY,STORE_URL,MAGENTO_GRAPHQL,MAGENTO_EXTERNAL_CHECKOUT,MAGENTO_EXTERNAL_CHECKOUT_URL,MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH,IMAGE_PROVIDER,IMAGE_PROVIDER_BASE_URL
         env:
           NPM_EMAIL: ${{ secrets.NPM_EMAIL }}
           NPM_PASS: ${{ secrets.CLOUD_PASSWORD }}

From ed3286556e31446834490eaa09903049c889b9d3 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 14:37:17 +0100
Subject: [PATCH 21/24] build: fixed dockerfile

---
 .vuestorefrontcloud/docker/Dockerfile | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.vuestorefrontcloud/docker/Dockerfile b/.vuestorefrontcloud/docker/Dockerfile
index db298d2a2..ebf738191 100644
--- a/.vuestorefrontcloud/docker/Dockerfile
+++ b/.vuestorefrontcloud/docker/Dockerfile
@@ -23,9 +23,9 @@ ENV LAST_COMMIT=${COMMIT}
 ENV STORE_ENV=production
 ENV NUXT_APP_ENV=production
 ENV NUXT_APP_PORT=3000
-ARG MAGENTO_BASE_URL=https://magento2-instance.vuestorefront.io/
-ARG IMAGE_PROVIDE=${IMAGE_PROVIDER}
-ARG IMAGE_PROVIDER_BASE_URL=${IMAGE_PROVIDER_BASE_URL}
+ENV MAGENTO_BASE_URL=https://magento2-instance.vuestorefront.io/
+ENV IMAGE_PROVIDE=${IMAGE_PROVIDER}
+ENV IMAGE_PROVIDER_BASE_URL=${IMAGE_PROVIDER_BASE_URL}
 
 
 RUN npm install -g npm-cli-login \

From 27b1ebe99dc56fd67082bcf74eef341ad78fec80 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 15:12:12 +0100
Subject: [PATCH 22/24] build: fixed typo in docker file

---
 .vuestorefrontcloud/docker/Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vuestorefrontcloud/docker/Dockerfile b/.vuestorefrontcloud/docker/Dockerfile
index ebf738191..0d92503de 100644
--- a/.vuestorefrontcloud/docker/Dockerfile
+++ b/.vuestorefrontcloud/docker/Dockerfile
@@ -24,7 +24,7 @@ ENV STORE_ENV=production
 ENV NUXT_APP_ENV=production
 ENV NUXT_APP_PORT=3000
 ENV MAGENTO_BASE_URL=https://magento2-instance.vuestorefront.io/
-ENV IMAGE_PROVIDE=${IMAGE_PROVIDER}
+ENV IMAGE_PROVIDER=${IMAGE_PROVIDER}
 ENV IMAGE_PROVIDER_BASE_URL=${IMAGE_PROVIDER_BASE_URL}
 
 

From 006d9cd788b5c53256710f5caf5c626fa9a5b5d2 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Fri, 21 Jan 2022 15:32:32 +0100
Subject: [PATCH 23/24] build: updated config

---
 packages/theme/config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/theme/config.js b/packages/theme/config.js
index b3d3cfbf4..7aeeca021 100644
--- a/packages/theme/config.js
+++ b/packages/theme/config.js
@@ -70,7 +70,7 @@ const config = convict({
   imageProviderBaseUrl: {
     doc: 'Image provider base URL',
     format: String,
-    default: process.env.IMAGE_PROVIDER_BASE_URL || 'https://magento2-instance.vuestorefront.io/',
+    default: process.env.IMAGE_PROVIDER_BASE_URL,
     env: 'IMAGE_PROVIDER_BASE_URL',
   },
 });

From 7281459d9ace02423bff3f52a8a33790af17728a Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Mon, 24 Jan 2022 08:50:43 +0100
Subject: [PATCH 24/24] test: add unit tests for the useImage composable

---
 .../useImage/__tests__/useImage.spec.js       | 47 +++++++++++++++++++
 packages/theme/composables/useImage/index.ts  |  1 -
 packages/theme/test-utils.js                  |  5 ++
 3 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 packages/theme/composables/useImage/__tests__/useImage.spec.js

diff --git a/packages/theme/composables/useImage/__tests__/useImage.spec.js b/packages/theme/composables/useImage/__tests__/useImage.spec.js
new file mode 100644
index 000000000..ad29f2b6c
--- /dev/null
+++ b/packages/theme/composables/useImage/__tests__/useImage.spec.js
@@ -0,0 +1,47 @@
+import { useContext } from '@nuxtjs/composition-api';
+import useImage from '../index';
+
+jest.mock('@nuxtjs/composition-api', () => {
+  return {
+    useContext: jest.fn(),
+  };
+});
+
+describe('useImage composable', () => {
+  const testURL = 'https://mymagento.dev/media/image.png';
+
+  it('return given URL without modifications if custom image provider is not set', () => {
+    useContext.mockReturnValue({
+      $vsf: {
+        $magento: {
+          config: {
+            imageProvider: 'ipx',
+          },
+        },
+      },
+    });
+
+    const { getMagentoImage } = useImage();
+    const image = getMagentoImage(testURL);
+
+    expect(image).toEqual(image);
+  });
+
+  it('return modified URL when custom image provider is set', () => {
+    useContext.mockReturnValue({
+      $vsf: {
+        $magento: {
+          config: {
+            imageProvider: 'cloudinary',
+            magentoBaseUrl: 'https://mymagento.dev/'
+          },
+        },
+      },
+    });
+
+    const { getMagentoImage } = useImage();
+    const image = getMagentoImage(testURL);
+
+    expect(image).toEqual('media/image.png');
+  });
+});
diff --git a/packages/theme/composables/useImage/index.ts b/packages/theme/composables/useImage/index.ts
index 14d2c5143..4562477c3 100644
--- a/packages/theme/composables/useImage/index.ts
+++ b/packages/theme/composables/useImage/index.ts
@@ -4,7 +4,6 @@ import imageSizes from '~/enums/imageEnums';
 const useImage = () => {
   // @ts-ignore
   const { $vsf } = useContext();
-
   /**
    * Extract image path from Magento URL.
    *
diff --git a/packages/theme/test-utils.js b/packages/theme/test-utils.js
index 4aaaf2823..eb0f16821 100644
--- a/packages/theme/test-utils.js
+++ b/packages/theme/test-utils.js
@@ -23,6 +23,11 @@ const customRender = (component, options = {}, callback = null) => render(compon
     },
     ...options?.mocks,
   },
+  stubs: {
+    NuxtImg: {
+      template: '<img src="image-stub.png" class="nuxt-img" alt="image"/>',
+    },
+  },
   ...options,
 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 }, callback);