X Enterprises
Pages

Restaurant Photos

The /restaurants/:slug/photos route — photo gallery with UModal lightbox and UCarousel viewer.

Restaurant Photos

The /restaurants/:slug/photos child page renders the restaurant's photo gallery in a responsive 2-column grid (3-col on desktop). Clicking a photo opens a fullscreen UModal lightbox with a UCarousel viewer for navigation. Photos are normalised to a PhotoItem shape ({ id, url, src, image, alt, caption }); the page accepts either an array or a { photos, images } response object.

Route

/restaurants/:slug/photos

Components Used

The photos page uses @nuxt/ui primitives directly — no dedicated XRD-prefixed component is registered for the gallery grid itself.

ComponentRole
UCardOuter card wrapper.
UModalFullscreen lightbox dialog.
UCarouselArrow-keyed carousel viewer inside the lightbox.

Data Fetching

Photo data is fetched via useDomain().getRestaurantPhotosBySlug(slug) wrapped in useAsyncData (key restaurant-photos-${slug}). The page also injects the restaurant ref from the parent layout for the gallery title.


AI Context

route: /restaurants/:slug/photos
package: "@xenterprises/nuxt-x-restaurants"
use-when: >
  Rendering the photos tab on a restaurant profile. Photos are fetched
  via useDomain().getRestaurantPhotosBySlug(). The grid renders a 2-up
  responsive layout; clicking opens a UModal + UCarousel lightbox viewer.
Copyright © 2026