Restaurant Photos
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.
| Component | Role |
|---|---|
UCard | Outer card wrapper. |
UModal | Fullscreen lightbox dialog. |
UCarousel | Arrow-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.
Restaurant Reviews
The /restaurants/:slug/reviews route — displays customer reviews with a client-side load-more pattern (10 per page).
Restaurant Articles
The /restaurants/:slug/articles route — lists all editorial articles from Nuxt Content, sorted by date (most recent first). Not filtered by restaurant.
