From b668643e14a70f8904a6ce1bf60441dc4ac7ca78 Mon Sep 17 00:00:00 2001
From: Baroshem <jakub.andrzejewski.dev@gmail.com>
Date: Thu, 8 Aug 2024 13:19:09 +0200
Subject: [PATCH 1/4] feat-#226: add upload widget utility functions

---
 package.json                               |   4 +-
 pnpm-lock.yaml                             |  28 ++--
 src/runtime/components/CldUploadWidget.vue | 141 +++++++++++----------
 3 files changed, 91 insertions(+), 82 deletions(-)

diff --git a/package.json b/package.json
index c4d808a..33caad8 100644
--- a/package.json
+++ b/package.json
@@ -48,8 +48,8 @@
     "stackblitz": "cd .stackblitz && yarn && yarn dev"
   },
   "dependencies": {
-    "@cloudinary-util/url-loader": "^5.3.1",
-    "@cloudinary-util/types": "1.0.2",
+    "@cloudinary-util/url-loader": "^5.6.0",
+    "@cloudinary-util/types": "1.2.0",
     "@nuxt/kit": "^3.11.2",
     "@unpic/vue": "^0.0.48",
     "defu": "^6.1.4"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a847878..4e1b2f5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,11 +6,11 @@ settings:
 
 dependencies:
   '@cloudinary-util/types':
-    specifier: 1.0.2
-    version: 1.0.2
+    specifier: 1.2.0
+    version: 1.2.0
   '@cloudinary-util/url-loader':
-    specifier: ^5.3.1
-    version: 5.3.1
+    specifier: ^5.6.0
+    version: 5.6.0
   '@nuxt/kit':
     specifier: ^3.11.2
     version: 3.11.2(rollup@3.29.4)
@@ -427,25 +427,25 @@ packages:
       mime: 3.0.0
     dev: true
 
-  /@cloudinary-util/types@1.0.2:
-    resolution: {integrity: sha512-j3xUfN4uMFDMSvoQeOMxqKYsGZovlRFr8niOQXfcqoHp7NVBiJm8oy6y2HDGQhxH63irmFt8VtzJEnYwGYsGXg==}
+  /@cloudinary-util/types@1.2.0:
+    resolution: {integrity: sha512-2Mo5juB1HV+GmVLq2+bU0Yg5FB6r+csbHyDN6njc0AqkEkp+AW+Q6kYbbTYkT7zk3x9tBWfKn3lfR7wUCwowJw==}
     dev: false
 
-  /@cloudinary-util/types@1.0.5:
-    resolution: {integrity: sha512-QySi6Q138yg/qrD7f6yscH9T+/8VwUfF9AiwFPMS89uI5wnSG9nhC+93a/8iUpgk9ujTDVqE8+TqYAbxvF0BMA==}
+  /@cloudinary-util/types@1.2.0-beta.1:
+    resolution: {integrity: sha512-zdMPqadGhRWwSZQcgsUoouJhr2Dnpc4p1ytGLtnEmVFNvwDhYMR6ER3xLP5FoSNzPx10SoWfNl6UWQKInkk+iQ==}
     dev: false
 
-  /@cloudinary-util/url-loader@5.3.1:
-    resolution: {integrity: sha512-cYgnazu7cLjRaajGmhyVfMxjrOz4EaSQsWK1/utV4K5kknUUhu8vUovGunDQJbEGmBWB/TUt7zmwpdUAQ+pe4g==}
+  /@cloudinary-util/url-loader@5.6.0:
+    resolution: {integrity: sha512-oWTXaaBralKLfk9tD2fWaTfwflx9Acug6L3GO72sLPxIssg+SyeNDiIrNwIFRx6SkFR74bWWNqjp2yu135gaDQ==}
     dependencies:
-      '@cloudinary-util/types': 1.0.5
-      '@cloudinary-util/util': 3.0.2
+      '@cloudinary-util/types': 1.2.0-beta.1
+      '@cloudinary-util/util': 3.2.0
       '@cloudinary/url-gen': 1.15.0
       zod: 3.22.4
     dev: false
 
-  /@cloudinary-util/util@3.0.2:
-    resolution: {integrity: sha512-EMmspJLVFn9hX92DaK/yuSzSUXF/BJ88crzN8vT1qCaJMMWKapGNo2HZ6YNgG69PP/Jngdk0mTINDU+GP3A1CA==}
+  /@cloudinary-util/util@3.2.0:
+    resolution: {integrity: sha512-VJBqAT3W0HQ9kyMagv+EzXkM/VYR9Ks01ewGxsS8T8b2N0NZFPAhYKeU2H9fOXSl6BVrD6aVYjJZAoT8pfQIyA==}
     dev: false
 
   /@cloudinary/transformation-builder-sdk@1.13.3:
diff --git a/src/runtime/components/CldUploadWidget.vue b/src/runtime/components/CldUploadWidget.vue
index 5b97ad9..bcc5227 100644
--- a/src/runtime/components/CldUploadWidget.vue
+++ b/src/runtime/components/CldUploadWidget.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
 import { ref, watch } from 'vue'
-import { type ConfigOptions } from '@cloudinary-util/url-loader'
+import {
+  type ConfigOptions,
+  generateSignatureCallback,
+  generateUploadWidgetResultCallback,
+  getUploadWidgetOptions,
+  UPLOAD_WIDGET_EVENTS,
+} from '@cloudinary-util/url-loader'
+import type { CloudinaryUploadWidgetResults } from '@cloudinary-util/types'
 import { useRuntimeConfig } from '#imports'
 
 export interface CldUploadWidgetProps {
@@ -167,8 +174,6 @@ function triggerOnIdle(callback: any) {
   return setTimeout(() => callback(), 1)
 }
 
-const WIDGET_WATCHED_EVENTS = ['success']
-
 const props = defineProps<CldUploadWidgetProps>()
 
 const {
@@ -197,10 +202,8 @@ const {
 const cloudinary = ref()
 const widget = ref()
 
-const signed = !!signatureEndpoint
-
-const error = ref(undefined)
-const results = ref<CldUploadWidgetResults | undefined>(undefined)
+const error = ref()
+const results = ref<CloudinaryUploadWidgetResults>()
 const isScriptLoading = ref(true)
 
 // When creating a signed upload, you need to provide both your Cloudinary API Key
@@ -233,23 +236,72 @@ const instanceMethods = {
   'upload-added': onUploadAdded,
 }
 
-const uploadOptions = {
-  cloudName: useRuntimeConfig().public.cloudinary.cloudName,
-  uploadPreset:
-    uploadPreset || useRuntimeConfig().public.cloudinary.uploadPreset,
-  apiKey: useRuntimeConfig().public.cloudinary.apiKey,
-  ...options,
-  ...instanceMethods,
-  ...config,
-}
+const uploadSignature
+  = signatureEndpoint
+  && generateSignatureCallback({
+    signatureEndpoint: String(signatureEndpoint),
+    fetch,
+  })
 
-if (signed) {
-  uploadOptions.uploadSignature = generateSignature
+const uploadOptions = getUploadWidgetOptions(
+  {
+    uploadPreset:
+      uploadPreset || useRuntimeConfig().public.cloudinary.uploadPreset,
+    apiKey: useRuntimeConfig().public.cloudinary.apiKey,
+    uploadSignature,
+    ...options,
+  },
+  {
+    cloud: {
+      cloudName: useRuntimeConfig().public.cloudinary.cloudName,
+    },
+    ...options,
+    ...instanceMethods,
+    ...config,
+  },
+)
+
+const resultsCallback = generateUploadWidgetResultCallback({
+  onError: (uploadError) => {
+    error.value = uploadError
+
+    if (typeof onError === 'function') {
+      onError(uploadError, {
+        widget: widget.value.current,
+        ...instanceMethods,
+      })
+    }
+  },
+  onResult: (uploadResult) => {
+    if (typeof uploadResult?.event !== 'string') return
+
+    results.value = uploadResult
+
+    const widgetEvent = UPLOAD_WIDGET_EVENTS[
+      uploadResult.event
+    ] as keyof typeof props
+
+    if (
+      typeof widgetEvent === 'string'
+      && typeof props[widgetEvent] === 'function'
+    ) {
+      // eslint-disable-next-line @typescript-eslint/ban-types
+      const callback = props[widgetEvent] as Function
+      callback(uploadResult, {
+        widget: widget.value.current,
+        ...instanceMethods,
+      })
+    }
 
-  if (!uploadOptions.apiKey) {
-    console.warn(`Missing dependency: Signed Upload requires an API key`)
-  }
-}
+    const widgetEventAction = `${widgetEvent}Action` as keyof typeof props
+
+    if (widgetEventAction && typeof props[widgetEventAction] === 'function') {
+      // eslint-disable-next-line @typescript-eslint/ban-types
+      const action = props[widgetEventAction] as Function
+      action(uploadResult)
+    }
+  },
+})
 
 if (props.tags?.length) {
   uploadOptions.showAdvancedOptions = true
@@ -305,56 +357,13 @@ function handleOnLoad() {
   })
 }
 
-/**
- * generateSignature
- * @description Makes a request to an endpoint to sign Cloudinary parameters as part of widget creation
- */
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-function generateSignature(callback: Function, paramsToSign: object) {
-  if (typeof signatureEndpoint === 'undefined') {
-    throw new TypeError(
-      'Failed to generate signature: signatureEndpoint undefined.',
-    )
-  }
-  fetch(signatureEndpoint, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      paramsToSign,
-    }),
-  })
-    .then(r => r.json())
-    .then(({ signature }) => {
-      callback(signature)
-    })
-}
-
 /**
  * createWidget
  * @description Creates a new instance of the Cloudinary widget and stores in a ref
  */
 
 function createWidget() {
-  return cloudinary.value?.createUploadWidget(
-    uploadOptions,
-    (uploadError: any, uploadResult: any) => {
-      // The callback is a bit more chatty than failed or success so
-      // only trigger when one of those are the case. You can additionally
-      // create a separate handler such as onEvent and trigger it on
-      // ever occurrence
-
-      if (typeof uploadError !== 'undefined') {
-        error.value = uploadError
-      }
-
-      if (WIDGET_WATCHED_EVENTS.includes(uploadResult?.event)) {
-        results.value = uploadResult
-      }
-    },
-  )
+  return cloudinary.value.createUploadWidget(uploadOptions, resultsCallback)
 }
 
 function invokeInstanceMethod(method: string) {

From 100cceae34361f2dfd2e3b6030a78fbdac360a02 Mon Sep 17 00:00:00 2001
From: Baroshem <jakub.andrzejewski.dev@gmail.com>
Date: Thu, 8 Aug 2024 14:56:14 +0200
Subject: [PATCH 2/4] feat: image replace bg

---
 .../2.components/CldImage/2.configuration.md  |  41 ++--
 .../2.components/CldImage/3.examples.md       |  12 +-
 playground/app.vue                            |  55 +++--
 src/runtime/components/CldImage.vue           | 192 +++++++++---------
 4 files changed, 151 insertions(+), 149 deletions(-)

diff --git a/docs/content/2.components/CldImage/2.configuration.md b/docs/content/2.components/CldImage/2.configuration.md
index 90b5f51..2040d3e 100644
--- a/docs/content/2.components/CldImage/2.configuration.md
+++ b/docs/content/2.components/CldImage/2.configuration.md
@@ -25,22 +25,23 @@ CldImage extends the Upnic Image component using Cloudinary tech. This means all
 
 The CldImage component exposes many of Cloudinary's transformations in an easy-to-use way right inside of Nuxt.
 
-| Prop                  | Type                    | Default   | Example                 | More                                                                                       |
-| --------------------- | ----------------------- | --------- | ----------------------- | ------------------------------------------------------------------------------------------ |
-| angle                 | number                  | `-`       | `"45"`                  | [Link](https://cloudinary.com/documentation/transformation_reference#a_angle?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)              |
-| background            | string                  | `-`       | `"blue"`                | [Link](https://cloudinary.com/documentation/transformation_reference#b_background?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)         |
-| crop                  | string                  | `"limit"` | `"thumb"`               | [Link](https://cloudinary.com/documentation/transformation_reference#c_crop_resize?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)        |
-| enhance               | boolean                 | `-`       | `"true"`                | [Link](https://cloudinary.com/documentation/transformation_reference#e_enhance?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)            |
-| fillBackground (Beta) | `boolean/object`        | `-`       | `{{ gravity: 'east' }}` | [Link](https://cloudinary.com/documentation/transformation_reference#b_gen_fill?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)           |
-| gravity               | string                  | `auto`    | `"faces"`               | [Link](https://cloudinary.com/documentation/transformation_reference#g_gravity?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)            |
-| loop                  | `boolean/number`        | `-`       | `true`                  | [Link](https://cloudinary.com/documentation/transformation_reference#e_loop?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)               |
-| recolor               | `array/object`          | `-`       | `['duck', 'blue']`      | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_recolor?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)        |
-| remove                | `string/array/object`   | `-`       | `apple`                 | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_remove?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)         |
-| removeBackground      | `boolean/string`        | `false`   | `true`                  | [Link](https://cloudinary.com/documentation/transformation_reference#e_background_removal?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
-| replace               | `array/object`          | `-`       | `['apple', 'banana']`   | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_replace?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)        |
-| restore               | boolean                 | `-`       | `true`                  | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_restore?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)        |
-| zoom                  | string                  | `-`       | `0.5`                   | [Link](https://cloudinary.com/documentation/transformation_reference#z_zoom?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)               |
-| zoompan               | `boolean/string/object` | `-`       | `true`                  | [Link](https://cloudinary.com/documentation/transformation_reference#e_zoompan?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)            |
+| Prop                  | Type                    | Default   | Example                                             | More                                                                                                                                                                          |
+| --------------------- | ----------------------- | --------- | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| angle                 | number                  | `-`       | `"45"`                                              | [Link](https://cloudinary.com/documentation/transformation_reference#a_angle?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)                  |
+| background            | string                  | `-`       | `"blue"`                                            | [Link](https://cloudinary.com/documentation/transformation_reference#b_background?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)             |
+| crop                  | string                  | `"limit"` | `"thumb"`                                           | [Link](https://cloudinary.com/documentation/transformation_reference#c_crop_resize?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)            |
+| enhance               | boolean                 | `-`       | `"true"`                                            | [Link](https://cloudinary.com/documentation/transformation_reference#e_enhance?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)                |
+| fillBackground (Beta) | `boolean/object`        | `-`       | `{{ gravity: 'east' }}`                             | [Link](https://cloudinary.com/documentation/transformation_reference#b_gen_fill?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)               |
+| gravity               | string                  | `auto`    | `"faces"`                                           | [Link](https://cloudinary.com/documentation/transformation_reference#g_gravity?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)                |
+| loop                  | `boolean/number`        | `-`       | `true`                                              | [Link](https://cloudinary.com/documentation/transformation_reference#e_loop?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)                   |
+| recolor               | `array/object`          | `-`       | `['duck', 'blue']`                                  | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_recolor?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)            |
+| remove                | `string/array/object`   | `-`       | `apple`                                             | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_remove?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)             |
+| removeBackground      | `boolean/string`        | `false`   | `true`                                              | [Link](https://cloudinary.com/documentation/transformation_reference#e_background_removal?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)     |
+| replace               | `array/object`          | `-`       | `['apple', 'banana']`                               | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_replace?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)            |
+| restore               | boolean                 | `-`       | `true`                                              | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_restore?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)            |
+| replaceBackground     | `boolean/string/object` | `-`       | `true/'fish tank'/{ prompt: 'fish tank', seed: 3 }` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_background_replace?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) |
+| zoom                  | string                  | `-`       | `0.5`                                               | [Link](https://cloudinary.com/documentation/transformation_reference#z_zoom?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)                   |
+| zoompan               | `boolean/string/object` | `-`       | `true`                                              | [Link](https://cloudinary.com/documentation/transformation_reference#e_zoompan?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)                |
 
 ## General Props
 
@@ -76,8 +77,8 @@ Following props can be passed to the CldImage component to make it work in more
 
 All effect props are disabled by default.
 
-| Prop Name          | Type          | Example                                              | More                                                                                        |
-| ------------------ | ------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| Prop Name          | Type          | Example                                              | More                                                                                                                                                                       |
+| ------------------ | ------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | art                | string        | `"al_dente"`                                         | [Link](https://cloudinary.com/documentation/transformation_reference#e_art?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)                 |
 | autoBrightness     | bool/string   | `true`, `"80"`                                       | [Link](https://cloudinary.com/documentation/transformation_reference#e_auto_brightness?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)     |
 | autoColor          | bool/string   | `true`, `"80"`                                       | [Link](https://cloudinary.com/documentation/transformation_reference#e_auto_color?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)          |
@@ -87,11 +88,11 @@ All effect props are disabled by default.
 | blur               | bool/string   | `true`, `"800"`                                      | [Link](https://cloudinary.com/documentation/transformation_reference#e_blur?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)                |
 | blurFaces          | bool/string   | `true`, `"800"`                                      | [Link](https://cloudinary.com/documentation/transformation_reference#e_blur_faces?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)          |
 | blurRegion         | bool/string   | `true`, `"1000,h_425,w_550,x_600,y_400"`             | [Link](https://cloudinary.com/documentation/transformation_reference#e_blur_region?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)         |
-| border             | string        | `"5px_solid_purple"`                                 | `-`                                                                                         |
+| border             | string        | `"5px_solid_purple"`                                 | `-`                                                                                                                                                                        |
 | brightness         | bool/string   | `true`, `"100"`                                      | [Link](https://cloudinary.com/documentation/transformation_reference#e_brightness?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)          |
 | brightnessHSB      | bool/string   | `true`, `"100"`                                      | [Link](https://cloudinary.com/documentation/transformation_reference#e_brightness_hsb?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)      |
 | cartoonify         | bool/string   | `true`, `"70:80"`                                    | [Link](https://cloudinary.com/documentation/transformation_reference#e_cartoonify?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)          |
-| color              | string        | `"blue"`                                             | `-`                                                                                         |
+| color              | string        | `"blue"`                                             | `-`                                                                                                                                                                        |
 | colorize           | string        | `"35,co_darkviolet"`                                 | [Link](https://cloudinary.com/documentation/transformation_reference#e_colorize?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)            |
 | contrast           | bool/string   | `true`, `"100"`, `"level_-70"`                       | [Link](https://cloudinary.com/documentation/transformation_reference#e_contrast?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)            |
 | distort            | string        | `"150:340:1500:10:1500:1550:50:1000"`, `"arc:180.0"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_distort?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary)             |
diff --git a/docs/content/2.components/CldImage/3.examples.md b/docs/content/2.components/CldImage/3.examples.md
index 826556e..0fa5066 100644
--- a/docs/content/2.components/CldImage/3.examples.md
+++ b/docs/content/2.components/CldImage/3.examples.md
@@ -103,11 +103,21 @@ remove='mountain'
 `replace`: Replaces an object in an image using Generative AI
 
 ```html
-replace=['turtle', 'shark']
+:replace="['turtle', 'shark']""
 ```
 
 :image-with-replace{style="text-align: center; margin: 0 auto"}
 
+### Replace Background
+
+`replaceBackground`: Replace background of the image by using AI
+
+```html
+:replaceBackground="{ prompt: 'fish tank', seed: 3 }""
+```
+
+:cld-image{src="images/sneakers" width="1200" height="1200" alt="test" replaceBackground style="text-align: center; margin: 0 auto"}
+
 ### Restore
 
 `restore`: Restores an image using Generative AI
diff --git a/playground/app.vue b/playground/app.vue
index 46919f9..bbd7316 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -1,40 +1,38 @@
 <script lang="ts" setup>
 // Usage of `useCldImageUrl` composable
-const { url } = useCldImageUrl({ options: { src: '/cld-sample-5.jpg' } })
-console.log(url)
+const { url } = useCldImageUrl({ options: { src: "/cld-sample-5.jpg" } });
+console.log(url);
 
 const { url: videoUrl } = useCldVideoUrl({
-  options: { src: 'videos/mountain-stars' },
-})
-console.log(videoUrl)
+  options: { src: "videos/mountain-stars" },
+});
+console.log(videoUrl);
 
 const mediaAssets = [
-  { tag: 'electric_car_product_gallery_demo' }, // by default mediaType: "image"
-  { tag: 'electric_car_product_gallery_demo', mediaType: 'video' },
-  { tag: 'electric_car_360_product_gallery_demo', mediaType: 'spin' },
-]
+  { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
+  { tag: "electric_car_product_gallery_demo", mediaType: "video" },
+  { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
+];
 
-const buttonId = 'open-btn'
+const buttonId = "open-btn";
 
-const cldVideoRef = ref()
+const cldVideoRef = ref();
 
 const chapters = {
-  0: 'Chapter 1',
-  6: 'Chapter 2',
-  9: 'Chapter 3',
-}
+  0: "Chapter 1",
+  6: "Chapter 2",
+  9: "Chapter 3",
+};
 
 const colors = {
-  accent: '#ff0000',
-  base: '#00ff00',
-  text: '#0000ff',
-}
+  accent: "#ff0000",
+  base: "#00ff00",
+  text: "#0000ff",
+};
 </script>
 
 <template>
-  <button :id="buttonId">
-    Select Image or Video
-  </button>
+  <button :id="buttonId">Select Image or Video</button>
   <CldMediaLibrary
     api-key="12345"
     :button-id="buttonId"
@@ -45,10 +43,7 @@ const colors = {
     cloud-name="demo"
     :button-id="buttonId"
   />
-  <CldOgImage
-    src="cld-sample-2"
-    twitter-title="test"
-  />
+  <CldOgImage src="cld-sample-2" twitter-title="test" />
   <CldVideoPlayer
     ref="cldVideoRef"
     width="1620"
@@ -65,12 +60,7 @@ const colors = {
     upload-preset="nuxt-cloudinary-unsigned"
     :tags="['sad', 'music']"
   >
-    <button
-      type="button"
-      @click="open"
-    >
-      Upload an Image
-    </button>
+    <button type="button" @click="open">Upload an Image</button>
   </CldUploadWidget>
   <CldUploadButton upload-preset="nuxt-cloudinary-unsigned">
     Upload
@@ -84,6 +74,7 @@ const colors = {
     priority
     sizes="(max-width: 600px) 480px,
          800px"
+    :replaceBackground="{ prompt: 'fish tank', seed: 3 }"
   />
   <CldImage
     src="cld-sample-5"
diff --git a/src/runtime/components/CldImage.vue b/src/runtime/components/CldImage.vue
index 8301704..ef887e2 100644
--- a/src/runtime/components/CldImage.vue
+++ b/src/runtime/components/CldImage.vue
@@ -3,159 +3,159 @@
 // Come back to this after https://github.com/nuxt/nuxt/issues/20936 is fixed
 // import type { AssetOptions } from "@cloudinary-util/url-loader";
 // import type { ConfigOptions } from "@cloudinary-util/url-loader";
-import { ref } from 'vue'
-import { Image } from '@unpic/vue'
-import type { ConstructUrlProps } from '@cloudinary-util/url-loader'
-import { useCldImageUrl } from '../composables/useCldImageUrl'
+import { ref } from "vue";
+import { Image } from "@unpic/vue";
+import type { ConstructUrlProps } from "@cloudinary-util/url-loader";
+import { useCldImageUrl } from "../composables/useCldImageUrl";
 
 interface ImageOptionsFillBackground {
-  crop?: string
-  gravity?: string
-  prompt?: string
+  crop?: string;
+  gravity?: string;
+  prompt?: string;
 }
 
 interface AssetOptions {
-  assetType?: string
-  crop?: string
-  deliveryType?: string
-  effects?: Array<any>
-  flags?: Array<string> | object
-  format?: string
-  gravity?: string
-  height?: string | number
-  overlays?: Array<any>
-  quality?: number | string
-  rawTransformations?: string[]
-  removeBackground?: boolean
-  sanitize?: boolean
-  seoSuffix?: string
-  src: string
-  text?: any
-  namedTransformations?: Array<string>
-  underlay?: string
-  underlays?: Array<any>
-  version?: number | string
-  width?: string | number
-  zoom?: string
+  assetType?: string;
+  crop?: string;
+  deliveryType?: string;
+  effects?: Array<any>;
+  flags?: Array<string> | object;
+  format?: string;
+  gravity?: string;
+  height?: string | number;
+  overlays?: Array<any>;
+  quality?: number | string;
+  rawTransformations?: string[];
+  removeBackground?: boolean;
+  sanitize?: boolean;
+  seoSuffix?: string;
+  src: string;
+  text?: any;
+  namedTransformations?: Array<string>;
+  underlay?: string;
+  underlays?: Array<any>;
+  version?: number | string;
+  width?: string | number;
+  zoom?: string;
 }
 
-type ImageOptionsRecolorPrompt = string | Array<string>
+type ImageOptionsRecolorPrompt = string | Array<string>;
 
 interface ImageOptionsRecolor {
-  prompt?: ImageOptionsRecolorPrompt
-  to?: string
-  multiple?: boolean
+  prompt?: ImageOptionsRecolorPrompt;
+  to?: string;
+  multiple?: boolean;
 }
 
 interface ImageOptionsZoomPan {
-  loop: string | boolean
-  options: string
+  loop: string | boolean;
+  options: string;
 }
 
-type ImageOptionsRemovePrompt = string | Array<string>
+type ImageOptionsRemovePrompt = string | Array<string>;
 
 interface ImageOptionsRemove {
-  prompt?: ImageOptionsRemovePrompt
-  region?: [300, 200, 1900, 3500]
-  multiple?: boolean
-  removeShadow?: boolean
+  prompt?: ImageOptionsRemovePrompt;
+  region?: [300, 200, 1900, 3500];
+  multiple?: boolean;
+  removeShadow?: boolean;
 }
 
 interface ImageOptionsGenerativeReplace {
-  to: string
-  from: string
-  preserveGeometry?: boolean
+  to: string;
+  from: string;
+  preserveGeometry?: boolean;
 }
 interface ImageOptions extends AssetOptions {
-  zoompan?: string | boolean | ImageOptionsZoomPan
-  fillBackground?: boolean | ImageOptionsFillBackground
-  recolor?: ImageOptionsRecolorPrompt | ImageOptionsRecolor
-  remove?: ImageOptionsRemovePrompt | ImageOptionsRemove
-  replace?: Array<string | boolean> | ImageOptionsGenerativeReplace
-  restore?: boolean
+  zoompan?: string | boolean | ImageOptionsZoomPan;
+  fillBackground?: boolean | ImageOptionsFillBackground;
+  recolor?: ImageOptionsRecolorPrompt | ImageOptionsRecolor;
+  remove?: ImageOptionsRemovePrompt | ImageOptionsRemove;
+  replace?: Array<string | boolean> | ImageOptionsGenerativeReplace;
+  restore?: boolean;
+  replaceBackground?: boolean | string | { prompt: string; seed: number };
 }
 
 export interface CldImageProps extends ImageOptions {
-  loading?: 'eager' | 'lazy'
-  fetchPriority?: 'high' | 'low' | 'auto'
+  loading?: "eager" | "lazy";
+  fetchPriority?: "high" | "low" | "auto";
   // Adding below as required props to promote good patterns in developing images
-  alt: string
-  width: string | number
-  height: string | number
+  alt: string;
+  width: string | number;
+  height: string | number;
   // Cloudinary URL Loader props
   // Cannot use `ConfigOptions` due to the same issue as mentioned at the top
-  config?: any
+  config?: any;
   // Unpic props
-  layout?: 'constrained' | 'fullWidth' | 'fixed'
-  priority?: boolean
-  background?: 'auto' | string
+  layout?: "constrained" | "fullWidth" | "fixed";
+  priority?: boolean;
+  background?: "auto" | string;
   // Cloudinary missing effect props
-  blur?: string | number
-  pixelate?: boolean
-  grayscale?: boolean
-  tint?: string | number
-  opacity?: string | number
-  shear?: string
-  border?: string
+  blur?: string | number;
+  pixelate?: boolean;
+  grayscale?: boolean;
+  tint?: string | number;
+  opacity?: string | number;
+  shear?: string;
+  border?: string;
   loaderOptions?: {
-    width: number | string
-  }
+    width: number | string;
+  };
 }
 
-const props = defineProps<CldImageProps>()
+const props = defineProps<CldImageProps>();
 
-const { config, loaderOptions, ...options } = props
+const { config, loaderOptions, ...options } = props;
 
-const { url } = useCldImageUrl({ options, config } as ConstructUrlProps)
+const { url } = useCldImageUrl({ options, config } as ConstructUrlProps);
 
 const transformUrl = () => {
   const options = {
     ...props,
-  }
+  };
 
-  options.width
-    = typeof options.width === 'string'
+  options.width =
+    typeof options.width === "string"
       ? Number.parseInt(options.width)
-      : options.width
-  options.height
-    = typeof options.height === 'string'
+      : options.width;
+  options.height =
+    typeof options.height === "string"
       ? Number.parseInt(options.height)
-      : options.height
+      : options.height;
 
-  const { url } = useCldImageUrl({ options, config } as ConstructUrlProps)
+  const { url } = useCldImageUrl({ options, config } as ConstructUrlProps);
 
-  return url
-}
+  return url;
+};
 
-const imgKey = ref('image-key')
+const imgKey = ref("image-key");
 
 const handleError = async (payload: Event) => {
-  const result = await pollForProcessingImage(payload)
+  const result = await pollForProcessingImage(payload);
 
-  if (result) imgKey.value = `${imgKey.value}-${Math.random()}`
-}
+  if (result) imgKey.value = `${imgKey.value}-${Math.random()}`;
+};
 
 const pollForProcessingImage = async (options: Event): Promise<boolean> => {
-  const { src } = options.target as EventTarget & { src: string }
+  const { src } = options.target as EventTarget & { src: string };
   try {
     await new Promise((resolve, reject) => {
       fetch(src).then((res) => {
         if (!res.ok) {
-          reject(res)
-          return
+          reject(res);
+          return;
         }
-        resolve(res)
-      })
-    })
-  }
-  catch (e: any) {
+        resolve(res);
+      });
+    });
+  } catch (e: any) {
     if (e.status === 423) {
-      return await pollForProcessingImage(options)
+      return await pollForProcessingImage(options);
     }
-    return false
+    return false;
   }
-  return true
-}
+  return true;
+};
 </script>
 
 <template>

From 660d1062cafb4adf4e844f71d71b5fe820cd76c3 Mon Sep 17 00:00:00 2001
From: Baroshem <jakub.andrzejewski.dev@gmail.com>
Date: Fri, 9 Aug 2024 10:58:44 +0200
Subject: [PATCH 3/4] feat: lint

---
 playground/app.vue                  |  56 ++++----
 src/runtime/components/CldImage.vue | 193 ++++++++++++++--------------
 2 files changed, 130 insertions(+), 119 deletions(-)

diff --git a/playground/app.vue b/playground/app.vue
index bbd7316..0343b1e 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -1,38 +1,40 @@
 <script lang="ts" setup>
 // Usage of `useCldImageUrl` composable
-const { url } = useCldImageUrl({ options: { src: "/cld-sample-5.jpg" } });
-console.log(url);
+const { url } = useCldImageUrl({ options: { src: '/cld-sample-5.jpg' } })
+console.log(url)
 
 const { url: videoUrl } = useCldVideoUrl({
-  options: { src: "videos/mountain-stars" },
-});
-console.log(videoUrl);
+  options: { src: 'videos/mountain-stars' },
+})
+console.log(videoUrl)
 
 const mediaAssets = [
-  { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
-  { tag: "electric_car_product_gallery_demo", mediaType: "video" },
-  { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
-];
+  { tag: 'electric_car_product_gallery_demo' }, // by default mediaType: "image"
+  { tag: 'electric_car_product_gallery_demo', mediaType: 'video' },
+  { tag: 'electric_car_360_product_gallery_demo', mediaType: 'spin' },
+]
 
-const buttonId = "open-btn";
+const buttonId = 'open-btn'
 
-const cldVideoRef = ref();
+const cldVideoRef = ref()
 
 const chapters = {
-  0: "Chapter 1",
-  6: "Chapter 2",
-  9: "Chapter 3",
-};
+  0: 'Chapter 1',
+  6: 'Chapter 2',
+  9: 'Chapter 3',
+}
 
 const colors = {
-  accent: "#ff0000",
-  base: "#00ff00",
-  text: "#0000ff",
-};
+  accent: '#ff0000',
+  base: '#00ff00',
+  text: '#0000ff',
+}
 </script>
 
 <template>
-  <button :id="buttonId">Select Image or Video</button>
+  <button :id="buttonId">
+    Select Image or Video
+  </button>
   <CldMediaLibrary
     api-key="12345"
     :button-id="buttonId"
@@ -43,7 +45,10 @@ const colors = {
     cloud-name="demo"
     :button-id="buttonId"
   />
-  <CldOgImage src="cld-sample-2" twitter-title="test" />
+  <CldOgImage
+    src="cld-sample-2"
+    twitter-title="test"
+  />
   <CldVideoPlayer
     ref="cldVideoRef"
     width="1620"
@@ -60,7 +65,12 @@ const colors = {
     upload-preset="nuxt-cloudinary-unsigned"
     :tags="['sad', 'music']"
   >
-    <button type="button" @click="open">Upload an Image</button>
+    <button
+      type="button"
+      @click="open"
+    >
+      Upload an Image
+    </button>
   </CldUploadWidget>
   <CldUploadButton upload-preset="nuxt-cloudinary-unsigned">
     Upload
@@ -74,7 +84,7 @@ const colors = {
     priority
     sizes="(max-width: 600px) 480px,
          800px"
-    :replaceBackground="{ prompt: 'fish tank', seed: 3 }"
+    :replace-background="{ prompt: 'fish tank', seed: 3 }"
   />
   <CldImage
     src="cld-sample-5"
diff --git a/src/runtime/components/CldImage.vue b/src/runtime/components/CldImage.vue
index ef887e2..2c47283 100644
--- a/src/runtime/components/CldImage.vue
+++ b/src/runtime/components/CldImage.vue
@@ -3,159 +3,160 @@
 // Come back to this after https://github.com/nuxt/nuxt/issues/20936 is fixed
 // import type { AssetOptions } from "@cloudinary-util/url-loader";
 // import type { ConfigOptions } from "@cloudinary-util/url-loader";
-import { ref } from "vue";
-import { Image } from "@unpic/vue";
-import type { ConstructUrlProps } from "@cloudinary-util/url-loader";
-import { useCldImageUrl } from "../composables/useCldImageUrl";
+import { ref } from 'vue'
+import { Image } from '@unpic/vue'
+import type { ConstructUrlProps } from '@cloudinary-util/url-loader'
+import { useCldImageUrl } from '../composables/useCldImageUrl'
 
 interface ImageOptionsFillBackground {
-  crop?: string;
-  gravity?: string;
-  prompt?: string;
+  crop?: string
+  gravity?: string
+  prompt?: string
 }
 
 interface AssetOptions {
-  assetType?: string;
-  crop?: string;
-  deliveryType?: string;
-  effects?: Array<any>;
-  flags?: Array<string> | object;
-  format?: string;
-  gravity?: string;
-  height?: string | number;
-  overlays?: Array<any>;
-  quality?: number | string;
-  rawTransformations?: string[];
-  removeBackground?: boolean;
-  sanitize?: boolean;
-  seoSuffix?: string;
-  src: string;
-  text?: any;
-  namedTransformations?: Array<string>;
-  underlay?: string;
-  underlays?: Array<any>;
-  version?: number | string;
-  width?: string | number;
-  zoom?: string;
+  assetType?: string
+  crop?: string
+  deliveryType?: string
+  effects?: Array<any>
+  flags?: Array<string> | object
+  format?: string
+  gravity?: string
+  height?: string | number
+  overlays?: Array<any>
+  quality?: number | string
+  rawTransformations?: string[]
+  removeBackground?: boolean
+  sanitize?: boolean
+  seoSuffix?: string
+  src: string
+  text?: any
+  namedTransformations?: Array<string>
+  underlay?: string
+  underlays?: Array<any>
+  version?: number | string
+  width?: string | number
+  zoom?: string
 }
 
-type ImageOptionsRecolorPrompt = string | Array<string>;
+type ImageOptionsRecolorPrompt = string | Array<string>
 
 interface ImageOptionsRecolor {
-  prompt?: ImageOptionsRecolorPrompt;
-  to?: string;
-  multiple?: boolean;
+  prompt?: ImageOptionsRecolorPrompt
+  to?: string
+  multiple?: boolean
 }
 
 interface ImageOptionsZoomPan {
-  loop: string | boolean;
-  options: string;
+  loop: string | boolean
+  options: string
 }
 
-type ImageOptionsRemovePrompt = string | Array<string>;
+type ImageOptionsRemovePrompt = string | Array<string>
 
 interface ImageOptionsRemove {
-  prompt?: ImageOptionsRemovePrompt;
-  region?: [300, 200, 1900, 3500];
-  multiple?: boolean;
-  removeShadow?: boolean;
+  prompt?: ImageOptionsRemovePrompt
+  region?: [300, 200, 1900, 3500]
+  multiple?: boolean
+  removeShadow?: boolean
 }
 
 interface ImageOptionsGenerativeReplace {
-  to: string;
-  from: string;
-  preserveGeometry?: boolean;
+  to: string
+  from: string
+  preserveGeometry?: boolean
 }
 interface ImageOptions extends AssetOptions {
-  zoompan?: string | boolean | ImageOptionsZoomPan;
-  fillBackground?: boolean | ImageOptionsFillBackground;
-  recolor?: ImageOptionsRecolorPrompt | ImageOptionsRecolor;
-  remove?: ImageOptionsRemovePrompt | ImageOptionsRemove;
-  replace?: Array<string | boolean> | ImageOptionsGenerativeReplace;
-  restore?: boolean;
-  replaceBackground?: boolean | string | { prompt: string; seed: number };
+  zoompan?: string | boolean | ImageOptionsZoomPan
+  fillBackground?: boolean | ImageOptionsFillBackground
+  recolor?: ImageOptionsRecolorPrompt | ImageOptionsRecolor
+  remove?: ImageOptionsRemovePrompt | ImageOptionsRemove
+  replace?: Array<string | boolean> | ImageOptionsGenerativeReplace
+  restore?: boolean
+  replaceBackground?: boolean | string | { prompt: string, seed: number }
 }
 
 export interface CldImageProps extends ImageOptions {
-  loading?: "eager" | "lazy";
-  fetchPriority?: "high" | "low" | "auto";
+  loading?: 'eager' | 'lazy'
+  fetchPriority?: 'high' | 'low' | 'auto'
   // Adding below as required props to promote good patterns in developing images
-  alt: string;
-  width: string | number;
-  height: string | number;
+  alt: string
+  width: string | number
+  height: string | number
   // Cloudinary URL Loader props
   // Cannot use `ConfigOptions` due to the same issue as mentioned at the top
-  config?: any;
+  config?: any
   // Unpic props
-  layout?: "constrained" | "fullWidth" | "fixed";
-  priority?: boolean;
-  background?: "auto" | string;
+  layout?: 'constrained' | 'fullWidth' | 'fixed'
+  priority?: boolean
+  background?: 'auto' | string
   // Cloudinary missing effect props
-  blur?: string | number;
-  pixelate?: boolean;
-  grayscale?: boolean;
-  tint?: string | number;
-  opacity?: string | number;
-  shear?: string;
-  border?: string;
+  blur?: string | number
+  pixelate?: boolean
+  grayscale?: boolean
+  tint?: string | number
+  opacity?: string | number
+  shear?: string
+  border?: string
   loaderOptions?: {
-    width: number | string;
-  };
+    width: number | string
+  }
 }
 
-const props = defineProps<CldImageProps>();
+const props = defineProps<CldImageProps>()
 
-const { config, loaderOptions, ...options } = props;
+const { config, loaderOptions, ...options } = props
 
-const { url } = useCldImageUrl({ options, config } as ConstructUrlProps);
+const { url } = useCldImageUrl({ options, config } as ConstructUrlProps)
 
 const transformUrl = () => {
   const options = {
     ...props,
-  };
+  }
 
-  options.width =
-    typeof options.width === "string"
+  options.width
+    = typeof options.width === 'string'
       ? Number.parseInt(options.width)
-      : options.width;
-  options.height =
-    typeof options.height === "string"
+      : options.width
+  options.height
+    = typeof options.height === 'string'
       ? Number.parseInt(options.height)
-      : options.height;
+      : options.height
 
-  const { url } = useCldImageUrl({ options, config } as ConstructUrlProps);
+  const { url } = useCldImageUrl({ options, config } as ConstructUrlProps)
 
-  return url;
-};
+  return url
+}
 
-const imgKey = ref("image-key");
+const imgKey = ref('image-key')
 
 const handleError = async (payload: Event) => {
-  const result = await pollForProcessingImage(payload);
+  const result = await pollForProcessingImage(payload)
 
-  if (result) imgKey.value = `${imgKey.value}-${Math.random()}`;
-};
+  if (result) imgKey.value = `${imgKey.value}-${Math.random()}`
+}
 
 const pollForProcessingImage = async (options: Event): Promise<boolean> => {
-  const { src } = options.target as EventTarget & { src: string };
+  const { src } = options.target as EventTarget & { src: string }
   try {
     await new Promise((resolve, reject) => {
       fetch(src).then((res) => {
         if (!res.ok) {
-          reject(res);
-          return;
+          reject(res)
+          return
         }
-        resolve(res);
-      });
-    });
-  } catch (e: any) {
+        resolve(res)
+      })
+    })
+  }
+  catch (e: any) {
     if (e.status === 423) {
-      return await pollForProcessingImage(options);
+      return await pollForProcessingImage(options)
     }
-    return false;
+    return false
   }
-  return true;
-};
+  return true
+}
 </script>
 
 <template>

From 8aeea7afe94758fff4a950a2a5e06c31af5193d4 Mon Sep 17 00:00:00 2001
From: Baroshem <jakub.andrzejewski.dev@gmail.com>
Date: Fri, 9 Aug 2024 11:04:46 +0200
Subject: [PATCH 4/4] chore: bump to 3.1.0

---
 .stackblitz/package.json |  2 +-
 .stackblitz/yarn.lock    | 48 ++++++++++++++++++++--------------------
 docs/package.json        |  2 +-
 docs/pnpm-lock.yaml      | 32 +++++++++++++--------------
 package.json             |  2 +-
 5 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/.stackblitz/package.json b/.stackblitz/package.json
index 21eb8c6..5123fb9 100644
--- a/.stackblitz/package.json
+++ b/.stackblitz/package.json
@@ -11,6 +11,6 @@
     "nuxt": "^3.11.2"
   },
   "dependencies": {
-    "@nuxtjs/cloudinary": "^3.0.1"
+    "@nuxtjs/cloudinary": "^3.1.0"
   }
 }
diff --git a/.stackblitz/yarn.lock b/.stackblitz/yarn.lock
index d352de2..12f64d7 100644
--- a/.stackblitz/yarn.lock
+++ b/.stackblitz/yarn.lock
@@ -569,30 +569,30 @@
   dependencies:
     mime "^3.0.0"
 
-"@cloudinary-util/types@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@cloudinary-util/types/-/types-1.0.2.tgz#3ebc14f01f3c113183ad47cc5a9c69e65d06f762"
-  integrity sha512-j3xUfN4uMFDMSvoQeOMxqKYsGZovlRFr8niOQXfcqoHp7NVBiJm8oy6y2HDGQhxH63irmFt8VtzJEnYwGYsGXg==
+"@cloudinary-util/types@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@cloudinary-util/types/-/types-1.2.0.tgz#c67ee4c4948236327872239165bf798eeeb899c5"
+  integrity sha512-2Mo5juB1HV+GmVLq2+bU0Yg5FB6r+csbHyDN6njc0AqkEkp+AW+Q6kYbbTYkT7zk3x9tBWfKn3lfR7wUCwowJw==
 
-"@cloudinary-util/types@1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@cloudinary-util/types/-/types-1.0.5.tgz#0325881338b3c390b4ad27f5484e95cdb0c4f9b7"
-  integrity sha512-QySi6Q138yg/qrD7f6yscH9T+/8VwUfF9AiwFPMS89uI5wnSG9nhC+93a/8iUpgk9ujTDVqE8+TqYAbxvF0BMA==
+"@cloudinary-util/types@1.2.0-beta.1":
+  version "1.2.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@cloudinary-util/types/-/types-1.2.0-beta.1.tgz#ba3461e97a26ba8d9d0d733dd983f504a3db0303"
+  integrity sha512-zdMPqadGhRWwSZQcgsUoouJhr2Dnpc4p1ytGLtnEmVFNvwDhYMR6ER3xLP5FoSNzPx10SoWfNl6UWQKInkk+iQ==
 
-"@cloudinary-util/url-loader@^5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-5.3.1.tgz#2898ea4f75a968a5857046d54bd589f228d04848"
-  integrity sha512-cYgnazu7cLjRaajGmhyVfMxjrOz4EaSQsWK1/utV4K5kknUUhu8vUovGunDQJbEGmBWB/TUt7zmwpdUAQ+pe4g==
+"@cloudinary-util/url-loader@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-5.6.0.tgz#778c9b09faa02edd19702e742c931ce9927a7790"
+  integrity sha512-oWTXaaBralKLfk9tD2fWaTfwflx9Acug6L3GO72sLPxIssg+SyeNDiIrNwIFRx6SkFR74bWWNqjp2yu135gaDQ==
   dependencies:
-    "@cloudinary-util/types" "1.0.5"
-    "@cloudinary-util/util" "3.0.2"
+    "@cloudinary-util/types" "1.2.0-beta.1"
+    "@cloudinary-util/util" "3.2.0"
     "@cloudinary/url-gen" "1.15.0"
     zod "^3.22.4"
 
-"@cloudinary-util/util@3.0.2":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@cloudinary-util/util/-/util-3.0.2.tgz#a86334eeec9912cf90054f5688a7d10fca9fe952"
-  integrity sha512-EMmspJLVFn9hX92DaK/yuSzSUXF/BJ88crzN8vT1qCaJMMWKapGNo2HZ6YNgG69PP/Jngdk0mTINDU+GP3A1CA==
+"@cloudinary-util/util@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@cloudinary-util/util/-/util-3.2.0.tgz#cdfb15ca0f04063203109ffbf3a5bc6de7f94c2b"
+  integrity sha512-VJBqAT3W0HQ9kyMagv+EzXkM/VYR9Ks01ewGxsS8T8b2N0NZFPAhYKeU2H9fOXSl6BVrD6aVYjJZAoT8pfQIyA==
 
 "@cloudinary/transformation-builder-sdk@^1.10.0":
   version "1.12.0"
@@ -1169,13 +1169,13 @@
     vite-plugin-checker "^0.6.4"
     vue-bundle-renderer "^2.0.0"
 
-"@nuxtjs/cloudinary@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-3.0.1.tgz#3678c6ba77d5d5f8a0d442915bb26da0b13a33da"
-  integrity sha512-PCmo4m7d4Tiybn0bIPOEf+Bv3xk3BF8w7YgV9BfE7RxuqQBYEk+zR249Mb6ezOZ8PMzr5pYzmL3b5nudpn09Gg==
+"@nuxtjs/cloudinary@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-3.1.0.tgz#d2a0261fd751f9c9bebe31556e5fbbe001aa5dc7"
+  integrity sha512-RTMVY34dIwiYsyfNsIDuN/LgJ5A/kt5XCWO0fLOjDCA6oW822HrxIwIkxRM8zd8T4VoVKIzZvyiXZNXMfKaoZw==
   dependencies:
-    "@cloudinary-util/types" "1.0.2"
-    "@cloudinary-util/url-loader" "^5.3.1"
+    "@cloudinary-util/types" "1.2.0"
+    "@cloudinary-util/url-loader" "^5.6.0"
     "@nuxt/kit" "^3.11.2"
     "@unpic/vue" "^0.0.48"
     defu "^6.1.4"
diff --git a/docs/package.json b/docs/package.json
index c32c5b2..d260b69 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -17,6 +17,6 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@nuxtjs/cloudinary": "^3.0.1"
+    "@nuxtjs/cloudinary": "^3.1.0"
   }
 }
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index 31b5fe0..286592d 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@nuxtjs/cloudinary':
-        specifier: ^3.0.1
-        version: 3.0.1(typescript@5.4.5)
+        specifier: ^3.1.0
+        version: 3.1.0(typescript@5.4.5)
     devDependencies:
       '@iconify-json/ph':
         specifier: ^1.1.10
@@ -443,25 +443,25 @@ packages:
       mime: 3.0.0
     dev: true
 
-  /@cloudinary-util/types@1.0.2:
-    resolution: {integrity: sha512-j3xUfN4uMFDMSvoQeOMxqKYsGZovlRFr8niOQXfcqoHp7NVBiJm8oy6y2HDGQhxH63irmFt8VtzJEnYwGYsGXg==}
+  /@cloudinary-util/types@1.2.0:
+    resolution: {integrity: sha512-2Mo5juB1HV+GmVLq2+bU0Yg5FB6r+csbHyDN6njc0AqkEkp+AW+Q6kYbbTYkT7zk3x9tBWfKn3lfR7wUCwowJw==}
     dev: false
 
-  /@cloudinary-util/types@1.0.5:
-    resolution: {integrity: sha512-QySi6Q138yg/qrD7f6yscH9T+/8VwUfF9AiwFPMS89uI5wnSG9nhC+93a/8iUpgk9ujTDVqE8+TqYAbxvF0BMA==}
+  /@cloudinary-util/types@1.2.0-beta.1:
+    resolution: {integrity: sha512-zdMPqadGhRWwSZQcgsUoouJhr2Dnpc4p1ytGLtnEmVFNvwDhYMR6ER3xLP5FoSNzPx10SoWfNl6UWQKInkk+iQ==}
     dev: false
 
-  /@cloudinary-util/url-loader@5.3.1:
-    resolution: {integrity: sha512-cYgnazu7cLjRaajGmhyVfMxjrOz4EaSQsWK1/utV4K5kknUUhu8vUovGunDQJbEGmBWB/TUt7zmwpdUAQ+pe4g==}
+  /@cloudinary-util/url-loader@5.6.0:
+    resolution: {integrity: sha512-oWTXaaBralKLfk9tD2fWaTfwflx9Acug6L3GO72sLPxIssg+SyeNDiIrNwIFRx6SkFR74bWWNqjp2yu135gaDQ==}
     dependencies:
-      '@cloudinary-util/types': 1.0.5
-      '@cloudinary-util/util': 3.0.2
+      '@cloudinary-util/types': 1.2.0-beta.1
+      '@cloudinary-util/util': 3.2.0
       '@cloudinary/url-gen': 1.15.0
       zod: 3.23.8
     dev: false
 
-  /@cloudinary-util/util@3.0.2:
-    resolution: {integrity: sha512-EMmspJLVFn9hX92DaK/yuSzSUXF/BJ88crzN8vT1qCaJMMWKapGNo2HZ6YNgG69PP/Jngdk0mTINDU+GP3A1CA==}
+  /@cloudinary-util/util@3.2.0:
+    resolution: {integrity: sha512-VJBqAT3W0HQ9kyMagv+EzXkM/VYR9Ks01ewGxsS8T8b2N0NZFPAhYKeU2H9fOXSl6BVrD6aVYjJZAoT8pfQIyA==}
     dev: false
 
   /@cloudinary/transformation-builder-sdk@1.13.3:
@@ -1804,11 +1804,11 @@ packages:
       - vue-tsc
     dev: true
 
-  /@nuxtjs/cloudinary@3.0.1(typescript@5.4.5):
-    resolution: {integrity: sha512-PCmo4m7d4Tiybn0bIPOEf+Bv3xk3BF8w7YgV9BfE7RxuqQBYEk+zR249Mb6ezOZ8PMzr5pYzmL3b5nudpn09Gg==}
+  /@nuxtjs/cloudinary@3.1.0(typescript@5.4.5):
+    resolution: {integrity: sha512-RTMVY34dIwiYsyfNsIDuN/LgJ5A/kt5XCWO0fLOjDCA6oW822HrxIwIkxRM8zd8T4VoVKIzZvyiXZNXMfKaoZw==}
     dependencies:
-      '@cloudinary-util/types': 1.0.2
-      '@cloudinary-util/url-loader': 5.3.1
+      '@cloudinary-util/types': 1.2.0
+      '@cloudinary-util/url-loader': 5.6.0
       '@nuxt/kit': 3.12.2
       '@unpic/vue': 0.0.48(typescript@5.4.5)
       defu: 6.1.4
diff --git a/package.json b/package.json
index 33caad8..6aed8e9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/cloudinary",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Cloudinary module for Nuxt",
   "license": "MIT",
   "type": "module",