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
| Component | Role |
|---|---|
XRDFilters | Root filter container — wraps aside and active filter display. |
XRDFiltersAsideFilters | Collapsible sidebar with all filter groups. |
XRDFiltersActiveFilters | Horizontally scrolling active filter chip row with individual clear buttons. |
XRDFiltersCuisineFilter | Cuisine type filter group. |
XRDFiltersPriceFilter | Price range filter group. |
XRDFiltersRatingFilter | Minimum rating filter group. |
XRDFiltersLocationFilter | Neighbourhood / location filter group. |
XRDFiltersAmenitiesFilter | Amenities filter group (parking, wifi, outdoor seating, etc.). |
XRDFiltersDietaryFilter | Dietary options filter group (vegetarian, vegan, gluten-free, etc.). |
XRDProfileCard | Individual restaurant card rendered for each result. |
Data Fetching
All restaurants are fetched once via useDomain().getRestaurants() wrapped in useAsyncData. useRestaurantFilters() then filters the full list reactively in the client without additional API calls. The filteredRestaurants computed ref drives the rendered card list.
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. The full dataset is fetched once; all filtering is
client-side and reactive.