Composables
useRestaurantFilters
Manages restaurant filter state with SSR-safe URL query parameter sync and AND/OR filter logic.
useRestaurantFilters
Filter state composable for the restaurants listing page. State is held in useState (SSR-safe) and kept in sync with URL query parameters. Filters are AND-combined across groups (e.g. cuisine AND price) and OR-combined within a group (e.g. Italian OR Japanese).
Usage
const {
filteredRestaurants,
toggleCuisine,
toggleLocation,
togglePrice,
toggleAmenity,
toggleDietary,
toggleRating,
clearAllFilters,
hasActiveFilters,
activeFilterCount,
} = useRestaurantFilters()
Returns
| Key | Type | Description |
|---|---|---|
filteredRestaurants | Ref<Restaurant[]> | Reactive array of restaurants matching all active filters. |
toggleCuisine | (value: string) => void | Toggles a cuisine filter value on or off. |
toggleLocation | (value: string) => void | Toggles a location filter value on or off. |
togglePrice | (value: string) => void | Toggles a price range filter value on or off. |
toggleAmenity | (value: string) => void | Toggles an amenity filter value on or off. |
toggleDietary | (value: string) => void | Toggles a dietary filter value on or off. |
toggleRating | (value: string) => void | Toggles a rating filter value on or off. |
clearAllFilters | () => void | Resets all active filters and clears URL query parameters. |
hasActiveFilters | ComputedRef<boolean> | true when at least one filter is active. |
activeFilterCount | ComputedRef<number> | Total number of currently active filter values. |
AI Context
composable: useRestaurantFilters
package: "@xenterprises/nuxt-x-restaurants"
use-when: >
Building or customising the restaurants listing page filter UX. Used
internally by XRDFilters, XRDFiltersAsideFilters, and XRDFiltersActiveFilters.
Also use when you need to read filteredRestaurants reactively or clear filters
programmatically from outside the filter panel.
