X Enterprises
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

KeyTypeDescription
filteredRestaurantsRef<Restaurant[]>Reactive array of restaurants matching all active filters.
toggleCuisine(value: string) => voidToggles a cuisine filter value on or off.
toggleLocation(value: string) => voidToggles a location filter value on or off.
togglePrice(value: string) => voidToggles a price range filter value on or off.
toggleAmenity(value: string) => voidToggles an amenity filter value on or off.
toggleDietary(value: string) => voidToggles a dietary filter value on or off.
toggleRating(value: string) => voidToggles a rating filter value on or off.
clearAllFilters() => voidResets all active filters and clears URL query parameters.
hasActiveFiltersComputedRef<boolean>true when at least one filter is active.
activeFilterCountComputedRef<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.
Copyright © 2026