Components

CldProductGallery

The CldProductGallery creates a product gallery element that uses an instance of the Cloudinary Product Gallery Widget to give you an easy way to add product gallery component to your Nuxt app.

Basic Usage

<script setup lang="ts">
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" },
];
</script>

<template>
  <CldProductGallery :media-assets="mediaAssets" />
</template>

Props

CldProductGallery accepts several customization props listed below:

Prop NameTypeExample
cloudNamestring"demo"
mediaAssetsarray[{ tag: 'electric_car_product_gallery_demo', mediaType: 'video' }]
displayPropsobject{ mode: "expanded", columns: 2 }
aspectRatiostring"4:3"
imageBreakpointnumber200
carouselStylestring"indicators"
indicatorPropsobject{ color: "red" }
carouselLocationstring"right"
borderColorstring"red"
borderWidthnumber5
transitionstring"fade"
zoombooleanfalse
paramsobject{}

For all other available props checkout Cloudinary Product Gallery Docs and make sure to pass them to the component as params like following:

<script setup lang="ts">
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 params = {
  sortProps: {
    source: "public_id",
    direction: "asc",
    videoBreakpoint: 200,
    carouselOffset: 6
  }
}
</script>

<template>
  <CldProductGallery
    :media-assets="mediaAssets"
    :params="params"
  />
</template>

CldOgImage

CldUploadButton