chore/2.7.0

.stackblitz/app.vue

@@ -1,44 +1,46 @@
 <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);
+
+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" },
+];
+
+const buttonId = "open-btn";
 </script>
 
 <template>
   <!-- Usage of `CldImage.vue` component -->
-  <CldImage
-    src="cld-sample-5"
-    width="987"
-    height="987"
-    alt="Sample Product"
-  />
+  <CldImage src="cld-sample-5" width="987" height="987" alt="Sample Product" />
   <CldVideoPlayer
     width="1620"
     height="1080"
     src="videos/mountain-stars"
+    picture-in-picture-toggle
   />
   <!-- Usage of `CldUploadWidget.vue` component -->
-  <CldUploadWidget
-    v-slot="{ open }"
-    upload-preset="nuxt-cloudinary-unsigned"
-  >
-    <button
-      type="button"
-      @click="open"
-    >
-      Upload an Image
-    </button>
+  <CldUploadWidget v-slot="{ open }" upload-preset="nuxt-cloudinary-unsigned">
+    <button type="button" @click="open">Upload an Image</button>
   </CldUploadWidget>
   <!-- Usage of `CldUploadButton.vue` component -->
-  <CldUploadButton
-    upload-preset="nuxt-cloudinary-unsigned"
-  >
+  <CldUploadButton upload-preset="nuxt-cloudinary-unsigned">
     Upload
   </CldUploadButton>
   <p>CldOgImage is here. Inspect the html meta to see the result</p>
   <CldOgImage
     src="cld-sample-2"
     twitter-title="test"
+    width="300"
+    height="300"
+    alt="test"
   />
   <CldImage
     src="cld-sample-5"
@@ -49,7 +51,7 @@ console.log(url)
       {
         position: {
           gravity: 'north',
-          y: 60
+          y: 60,
         },
         text: {
           color: 'rgb:52a4ff80',
@@ -61,12 +63,12 @@ console.log(url)
           lineSpacing: -100,
           stroke: true,
           border: '20px_solid_rgb:2d0eff99',
-        }
+        },
       },
       {
         position: {
           gravity: 'south',
-          y: 60
+          y: 60,
         },
         text: {
           color: 'rgb:52a4ff80',
@@ -78,8 +80,20 @@ console.log(url)
           lineSpacing: -100,
           stroke: true,
           border: '20px_solid_rgb:2d0eff99',
-        }
-      }
+        },
+      },
     ]"
   />
+
+  <button :id="buttonId">Select Image or Video</button>
+  <CldMediaLibrary
+    api-key="12345"
+    :button-id="buttonId"
+    style="height: 600px"
+  />
+  <CldProductGallery
+    :media-assets="mediaAssets"
+    cloud-name="demo"
+    :button-id="buttonId"
+  />
 </template>

.stackblitz/package.json

@@ -11,6 +11,6 @@
     "nuxt": "^3.8.0"
   },
   "dependencies": {
-    "@nuxtjs/cloudinary": "^2.6.0"
+    "@nuxtjs/cloudinary": "^2.7.2"
   }
 }

.stackblitz/yarn.lock

@@ -484,10 +484,15 @@
   dependencies:
     mime "^3.0.0"
 
-"@cloudinary-util/url-loader@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-4.2.0.tgz#8d686666b5214db1daefd392a115e8a708f968d7"
-  integrity sha512-fpCFqFPAN/f9Gt//25qLXNDYwy5EcOudRzDPOrsEBH6aMwEdFaJuPxvLiP0IP5MCihKji/XDr9QJQ9Wa+amNSA==
+"@cloudinary-util/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@cloudinary-util/types/-/types-1.0.1.tgz#1bbfc0cffaf5d543e13f9dd4864a9aebc6496394"
+  integrity sha512-aj/m3Sn5RSYKk6dAZJcjerKfVNrcCyL6v6pcDl4aNpQ3zSWMOvnIrzCidE9paaw1r+ZWonjNnhkA0anLdwRRfA==
+
+"@cloudinary-util/url-loader@^5.2.1":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-5.2.1.tgz#d663520b1dbf924d5d319dfc7819f27e4c5acb22"
+  integrity sha512-1GDPCnRYSGlnPqEdcvH/1h0puAYoF9tJazV/zNx3ptCN0PbwBWEw+ksZm6mCQF2cr9ofDE3B+C5YdPLLsvbuQQ==
   dependencies:
     "@cloudinary-util/util" "3.0.0"
     "@cloudinary/url-gen" "1.15.0"
@@ -1168,12 +1173,13 @@
     vite-plugin-checker "^0.6.2"
     vue-bundle-renderer "^2.0.0"
 
-"@nuxtjs/cloudinary@^2.6.0":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.6.0.tgz#ab27227e6877bef97ff1f3e7b34947f0e9942034"
-  integrity sha512-SU18YU0WUgLVECzjpMudfI5h2nVSlY73CPwKxR4p3TCX7lKzrXX02G7i7FDp7yZtOHD2a17UbFdD6a+KsKAetA==
+"@nuxtjs/cloudinary@^2.7.2":
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.7.2.tgz#74110eee3b7e4de159ae81baafa1437cfc5d2a6f"
+  integrity sha512-BreBrTM54X5PT7i7BiB9/VuFM4eKV7UhseKSgIRjCuWbf4AR2wCvXJV/FvW6ReYFx2JylhwWLbNWIcq9wT9FOA==
   dependencies:
-    "@cloudinary-util/url-loader" "^4.2.0"
+    "@cloudinary-util/types" "1.0.1"
+    "@cloudinary-util/url-loader" "^5.2.1"
     "@nuxt/kit" "^3.5.0"
     "@unpic/vue" "^0.0.42"
     defu "^6.1.2"

docs/content/1.getting-started.md

@@ -62,6 +62,11 @@ Configure Nuxt Cloudinary easily with the `cloudinary` property.
 export default {
   cloudinary: {
     cloudName: 'fesfese4324',
+    uploadPreset?: 'my-custom-preset',
+    apiKey?: '12345',
+    analytics?: true,
+    cloud?: {},
+    url?: {},
   }
 }
 ```
@@ -72,6 +77,36 @@ export default {
 
 Your unique Cloudinary Cloud Name. You can find it in the Cloudinary dashboard.
 
+### `uploadPreset`
+
+- Default: `-`
+
+For example: `my-upload-preset`. Used with `CldUploadWidget` and `CldUploadButton` components
+
+### `apiKey`
+
+- Default: `-`
+
+For example: `12345`. Used with `CldMediaLibrary` component.
+
+### `analytics`
+
+- Default: `true`
+
+Enabling Cloudinary analytics.
+
+### `cloud`
+
+- Default: `-`
+
+Top level configuration used for all composables and components. Check out all available options [here](https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters)
+
+### `url`
+
+- Default: `-`
+
+Top level configuration used for all composables and components. Check out all available options [here](https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters)
+
 ## NuxtCloudinary vs Nuxt Image
 
 You may be wondering what is the reason to have both Nuxt Cloudinary and Nuxt Image modules if they both have integration with Cloudinary and they tackle the aspect of optimized images.