Photo

Render one strict photo, with an optional standalone lightbox.

Photo renders one PhotoItem as a figure. It can remain a plain image, open a one-photo lightbox, or connect to a parent PhotoGroup.

Minimal usage

app/pages/cover.vue

<script setup lang="ts">
import type { PhotoItem } from '@lupinum/nuxt-photo/app'

const cover: PhotoItem = {
  id: 'cover',
  src: '/photos/cover.jpg',
  width: 1280,
  height: 800,
  alt: 'Low hills under an evening sky',
}
</script>

<template>
  <Photo :photo="cover" lightbox />
</template>

Props

Prop	Type	Default	Description
`photo`	`PhotoItem`	-	Required. Photo to render. Invalid data throws.
`lightbox`	`boolean \| Component`	`undefined`	Enable or replace a standalone lightbox. Ignored inside `PhotoGroup`.
`lightboxIgnore`	`boolean`	`false`	Make this trigger inert inside `PhotoGroup` without changing the collection.
`imageAdapter`	`ImageAdapter`	provided/module default	Override image delivery for this photo.
`transition`	`LightboxTransitionOption`	`'auto'`	Standalone lightbox transition configuration.
`loading`	`'lazy' \| 'eager'`	`'lazy'`	Native image loading hint.
`imgClass`	`string`	-	Classes for the rendered image.
`captionClass`	`string`	-	Classes for the rendered caption.

Events

Photo emits no public events. It always validates its single photo strictly; validation="drop" is available only on collection components.

Slots

Slot	Props	Purpose
`slide`	`{ photo, index }`	Replace this photo's lightbox slide content.

Exposed template-ref API

Photo exposes no public template-ref controller.

Important behavior

Without lightbox or a parent group, the figure is not interactive.
With lightbox, the photo owns a standalone one-item viewer.
Inside PhotoGroup, stable photo ID connects the trigger to the group's collection and navigation order.
lightbox is a setup-time option. Remount Photo with a new key to add, remove, or replace the standalone lightbox.
transition, loading, classes, and the photo value remain reactive.

Plain image inside a group

vue

<PhotoGroup :photos="photos">
  <Photo :photo="photos[0]" />
  <Photo :photo="photos[1]" lightbox-ignore />
</PhotoGroup>

The second photo remains in programmatic group navigation, but its rendered thumbnail does not open the lightbox.

Choose a component compares the four ready-made components. PhotoGroup defines shared collection behavior.