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/types@1.0.1":
+  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/package.json

@@ -17,6 +17,6 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@nuxtjs/cloudinary": "^2.6.0"
+    "@nuxtjs/cloudinary": "^2.7.2"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/cloudinary",
-  "version": "2.6.0",
+  "version": "2.7.2",
   "description": "Cloudinary module for Nuxt",
   "license": "MIT",
   "type": "module",

src/runtime/components/CldProductGallery.vue

@@ -10,12 +10,12 @@ type MediaType = "image" | "video" | "spin";
 type ProductGalleryProps = {
   cloudName?: string;
   mediaAssets: {
-    tage: string;
+    tag: string;
     mediaType?: MediaType;
   }[];
   displayProps?: {
     mode: string;
-    columns: number
+    columns: number;
   }[];
   aspectRatio?: string;
   imageBreakpoint?: number;
@@ -29,8 +29,8 @@ type ProductGalleryProps = {
   transition?: string;
   zoom?: boolean;
   // Other params listed https://cloudinary.com/documentation/product_gallery_reference#widget_parameters
-  params?: Record<string, any>
-}
+  params?: Record<string, any>;
+};
 
 const props = defineProps<ProductGalleryProps>();
 

src/runtime/components/CldVideoPlayer.vue

@@ -71,7 +71,7 @@ export type CldVideoPlayerProps = Pick<
   quality?: string | number;
   width: string | number;
   config?: ConfigOptions;
-  pictureInPictureToggle: boolean;
+  pictureInPictureToggle?: boolean;
 };
 
 const props = withDefaults(defineProps<CldVideoPlayerProps>(), {