Product
ProductGallery
Image gallery with main display and thumbnail strip for product images.
ProductGallery
An image gallery with a main display area and clickable thumbnail strip. Supports v-model for selected image index and configurable thumbnail position.
Preview
Usage
<CProductGallery :images="product.gallery" />
With v-model
<script setup>
const selectedImage = ref(0)
</script>
<CProductGallery v-model="selectedImage" :images="product.gallery" />
Thumbnails on the Left
<CProductGallery :images="product.gallery" thumbnail-position="start" />
Without Thumbnails
<CProductGallery :images="product.gallery" :show-thumbnails="false" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | Image[] | required | Array of product images |
modelValue | number | 0 | Selected image index |
showThumbnails | boolean | true | Show thumbnail strip |
thumbnailPosition | 'bottom' | 'start' | 'bottom' | Thumbnail strip position |
zoomable | boolean | false | Enable zoom on hover |
ui | Partial<{...}> | — | Per-instance theme overrides |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | number | Selected image index changed |
Slots
| Slot | Scoped Props | Description |
|---|---|---|
main | { image, index } | Custom main image display |
thumbnails | { images, selected, select } | Custom thumbnail strip |
Example: Custom Main Image
<CProductGallery :images="product.gallery">
<template #main="{ image }">
<NuxtImg :src="image.url" :alt="image.alt" class="rounded-2xl" />
</template>
</CProductGallery>
Theme
export default defineAppConfig({
ui: {
productGallery: {
slots: {
root: 'flex flex-col gap-3',
main: 'rounded-xl overflow-hidden bg-elevated aspect-square',
mainImage: 'size-full object-contain',
thumbnails: 'flex gap-2 overflow-x-auto',
thumbnail: 'size-16 rounded-lg overflow-hidden ring ring-default cursor-pointer',
thumbnailActive: 'ring-2 ring-primary',
},
},
},
})