Merge pull request #150 from nuxt-modules/fix/sizes-in-playground

fix: sizes in playground
nuxt-modules · Aug 30, 2023 · 9af8ae3 · 9af8ae3
2 parents b9bd3eb + b2b3588
commit 9af8ae3
Showing 1 changed file with 15 additions and 30 deletions.
diff --git a/playground/app.vue b/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>