Merge branch 'main' of https://github.com/nuxt-modules/cloudinary

playground/app.vue

@@ -1,37 +1,20 @@
 <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);
 </script>
 
 <template>
  <!-- Usage of `CldOgImage.vue` component -->
- <CldOgImage
- src="cld-sample-2"
- twitter-title="test"
- />
+ <CldOgImage src="cld-sample-2" twitter-title="test" />
  <!-- Usage of `CldVideoPlayer.vue` component -->
- <CldVideoPlayer
- width="1620"
- height="1080"
- src="videos/mountain-stars"
- />
+ <CldVideoPlayer width="1620" height="1080" src="videos/mountain-stars" />
  <!-- 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>
  <!-- Usage of `CldImage.vue` component -->
@@ -41,7 +24,9 @@ console.log(url)
  height="987"
  alt="Sample Product"
  crop="fill"
- sizes="sm:100vw md:50vw lg:400px"
+ loading="lazy"
+ sizes="(max-width: 600px) 480px,
+ 800px"
  />
  <CldImage
  src="cld-sample-5"
@@ -53,7 +38,7 @@ console.log(url)
  {
  position: {
  gravity: 'north',
- y: 60
+ y: 60,
  },
  text: {
  color: 'rgb:52a4ff80',
@@ -65,12 +50,12 @@ console.log(url)
  lineSpacing: -100,
  stroke: true,
  border: '20px_solid_rgb:2d0eff99',
- }
+ },
  },
  {
  position: {
  gravity: 'south',
- y: 60
+ y: 60,
  },
  text: {
  color: 'rgb:52a4ff80',
@@ -82,8 +67,8 @@ console.log(url)
  lineSpacing: -100,
  stroke: true,
  border: '20px_solid_rgb:2d0eff99',
- }
- }
+ },
+ },
  ]"
  />
 </template>

src/runtime/components/CldOgImage.vue

@@ -122,7 +122,7 @@ const { url: twitterImageUrl } = useCldImageUrl({
 });
 
 const computedTwitterTitle = computed(
- () => props.twitterTitle || currentRoute.meta?.title || " "
+ () => props.twitterTitle || currentRoute.value.meta?.title || " "
 );
 </script>