Composables

Nuxt apps receive these imports from @lupinum/nuxt-photo. Explicit imports use @lupinum/nuxt-photo/app.

useLightbox()

Reads the nearest provider and returns actions plus readonly state.

const { photos, activeIndex, activePhoto, isOpen, open, openById, close, next, prev, toggleZoom } =
  useLightbox()

Call it inside a provider subtree. It throws when no provider exists.

provideLightbox()

Creates and provides one lightbox runtime for advanced compositions.

const controller = provideLightbox(photos, {
  transition: 'auto',
  imageAdapter,
  minZoom: 1,
  resolveSlide,
})

Do not call it inside a ready-made lightbox override. The parent component already owns the provider.

responsive()

Creates a container-width resolver with breakpoint metadata.

const spacing = responsive({ 0: 4, 640: 8, 1024: 12 })

The greatest breakpoint less than or equal to the current width wins.

resolveResponsiveParameter()

Resolves a static value or responsive function:

resolveResponsiveParameter(spacing, 720, 8)

useContainerWidth()

Measures an element with ResizeObserver and supports SSR seeding and breakpoint snapping.

const containerRef = ref<HTMLElement | null>(null)
const { containerWidth } = useContainerWidth(containerRef, {
  defaultContainerWidth: 960,
  breakpoints: [640, 960, 1280],
})

Use it for custom layouts. PhotoAlbum already measures its own container.

usePhotoLabels()

Returns the complete active label set. It merges labels provided through PhotoDefaultsKey or nuxtPhoto.labels with the built-in English defaults. Use it when a custom lightbox built from primitives renders its own controls.

const labels = usePhotoLabels()