X Enterprises
Pages

Restaurants Listing

The /restaurants route — full restaurant listing with sidebar filters, active filter display, and pagination.

Restaurants Listing

The /restaurants route renders the full restaurant directory listing. It composes the filter sidebar, active filter chips, and a paginated grid of XRDProfileCard components. Filter state is managed by useRestaurantFilters() and synced to URL query parameters so filtered views are shareable and bookmark-able.

Route

/restaurants

Components Used

ComponentRole
XRDFiltersRoot filter container — wraps aside and active filter display.
XRDFiltersAsideFiltersCollapsible sidebar with all filter groups.
XRDFiltersActiveFiltersHorizontally scrolling active filter chip row with individual clear buttons.
XRDFiltersCuisineFilterCuisine type filter group.
XRDFiltersPriceFilterPrice range filter group.
XRDFiltersRatingFilterMinimum rating filter group.
XRDFiltersLocationFilterNeighbourhood / location filter group.
XRDFiltersAmenitiesFilterAmenities filter group (parking, wifi, outdoor seating, etc.).
XRDFiltersDietaryFilterDietary options filter group (vegetarian, vegan, gluten-free, etc.).
XRDProfileCardIndividual restaurant card rendered for each result.

Data Fetching

useRestaurantFilters() runs two async fetches:

  1. restaurants-meta — a one-time useAsyncData call (useDomain().getRestaurants({ limit: 200 })) used to derive the available cuisines/locations/amenities option lists shown in the sidebar.
  2. filtered-restaurants — a useLazyAsyncData call (useDomain().getRestaurants(buildQuery())) that re-runs whenever updateUrl() is called, so changing filters triggers a fresh API request rather than pure client-side filtering. filteredRestaurants, totalCount, and pending are all derived from this fetch.

URL query keys (driven by updateUrl()): cuisines, locations, prices, rating, amenities, dietary. The page query is reset to undefined on every filter change.

AI Context

route: /restaurants
package: "@xenterprises/nuxt-x-restaurants"
use-when: >
  Rendering the main restaurant directory listing page with filters.
  Filter state is managed by useRestaurantFilters() and synced to URL
  query parameters (cuisines, locations, prices, rating, amenities, dietary).
  Two API calls back the page: a meta dataset for option lists and a
  lazy filtered-restaurants fetch that re-runs on every filter change.

Utility Pages

Supplementary routes — /popular, /explore, /about, /contact, /list-restaurant, /privacy, /terms, /sitemap, plus the /popular/:slug redirect.

Restaurant Profile

The /restaurants/:slug layout and overview child — fetches the restaurant profile once via useDomain().getRestaurantBySlug() and renders hero, navigation, sidebar, and child route content.

Copyright © 2026