Skip to main content

Why Nuxt Photo?

Decide whether one Nuxt-first photo system fits your albums, lightboxes, and image delivery.

Nuxt Photo combines responsive photo layouts with an accessible lightbox. It uses each image's known dimensions to produce useful server-rendered layout before the browser loads the image.

Try the real lightbox runtime

Open a photo, navigate, zoom, swipe, and close with Escape.

Desert landscape at golden hourDesert Light
Ocean waves reflecting lightOcean Glass
Canyon at duskEvening Canyon
Misty forestForest Haze
Mountain peak framed by treesAlpine Frame
Soft coastal sunsetSoft Coast
<PhotoAlbum
  :photos="photos"
  layout="rows"
  transition="auto"
/>

The example above runs the public Nuxt Photo components. Select a photo to test the lightbox, keyboard navigation, zoom, and focus restoration.

What it includes

  • Responsive rows, columns, and masonry albums.
  • A lightbox with keyboard, touch, zoom, focus, and reduced-motion behavior.
  • A shared collection for navigation across several albums.
  • A carousel with thumbnails and optional autoplay or lightbox behavior.
  • Optional Nuxt Image integration.
  • Slots and lower-level components for focused customization.

All components use the same PhotoItem data shape. Moving from an album to a carousel does not require a second image model.

When it is a good fit

Use Nuxt Photo when the application needs an album and lightbox that work together, especially when server-rendered layout stability matters. It is also useful when several photo sections must share one clear navigation order.

When to choose something smaller or broader

Choose a plain CSS grid when users do not need a lightbox, gestures, shared navigation, or calculated photo rows. Choose a broader media viewer when the project requires video, plugins, or a mixed-media model. Nuxt Photo 1.0 is intentionally limited to photos with known dimensions.

Compare Nuxt Photo with other approaches for the main trade-offs.

What you need to provide

Each photo needs a stable id, a src, and its real width and height. Nuxt Photo does not measure images in the browser because that would delay layout until after download. Add dimensions in your CMS, upload pipeline, or server-side ingestion process.

Ready to try it? Install the 1.0 beta.