Merge branch 'main' into chore/3.0.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/content/1.getting-started.md

@@ -62,10 +62,11 @@ Configure Nuxt Cloudinary easily with the `cloudinary` property.
 export default {
   cloudinary: {
     cloudName: 'fesfese4324',
-    uploadPreset?: string,
-    apiKey?: string,
+    uploadPreset?: 'my-custom-preset',
+    apiKey?: '12345',
     analytics?: true,
-    config?: CloudinaryConfigurationOptions,
+    cloud?: {},
+    url?: {},
   }
 }
 ```
@@ -94,11 +95,17 @@ For example: `12345`. Used with `CldMediaLibrary` component.
 
 Enabling Cloudinary analytics.
 
-### `config`
+### `cloud`
 
-- Default: `process.env.CLOUDINARY_CLOUD_NAME`
+- 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: `-`
 
-Cloudinary URL Loader configuration that will be passed to `useCldImageUrl` composable.
+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
 

docs/content/3.composables/2.useCldVideoUrl.md

@@ -0,0 +1,28 @@
+---
+description:
+---
+
+This composable is using [@cloudinary-util/url-loader](https://github.com/colbyfayock/cloudinary-util/tree/main/packages/url-loader) under the hood to generate the Cloudinary URL with certain optimizations.
+
+## Usage
+
+Configuration for `useCldVideoUrl` is the same as [useCldImageUrl](usecldimageurl).
+
+```vue
+<script lang="ts" setup>
+const { url } = useCldVideoUrl({
+  options: {
+    src: "/videos/mountain-stars",
+  },
+});
+</script>
+```
+
+ The only difference is getCldVideoUrl provides the following default settings:
+
+| Option Name | Type   | Default   |
+| ----------- | ------ | --------- |
+| assetType   | string | `"video"` |
+
+Additionally, the transformations do not have access to image-specific transformations.
+Find more configuration settings over at [useCldImageUrl](usecldimageurl#configuration) configuration.

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",

playground/app.vue

@@ -3,6 +3,11 @@
 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" },
@@ -34,6 +39,7 @@ const cldVideoRef = ref();
     width="1620"
     height="1080"
     src="videos/mountain-stars"
+    :config="{ url: { cname: 'test' } }"
     pictureInPictureToggle
   />
   <!-- Usage of `CldUploadWidget.vue` component -->

playground/nuxt.config.ts

@@ -2,5 +2,7 @@ export default defineNuxtConfig({
   modules: ['../src/module'],
   cloudinary: {
     cloudName: 'nuxt-cloudinary',
+    url: {},
+    cloud: {}
   }
 })

src/module.ts

@@ -6,7 +6,7 @@ import {
 } from "@nuxt/kit";
 import { fileURLToPath } from "url";
 import { defu } from "defu";
-import { CloudinaryConfigurationOptions } from "@cloudinary-util/url-loader";
+import { ConfigOptions } from '@cloudinary-util/url-loader'
 
 export type ModuleOptions = {
   cloudName?: string;

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>();