Composables

useFilters

Generic filter composable for menu items and other list data — reads groups from app config, supports custom filter handlers and a shared mobile drawer state.

useFilters

Generic filter composable that powers the menu filter UI. It reads appConfig.xRestaurants.filters for group definitions and shared state, then exposes utilities to update, toggle, check, and apply filters to an items array. Built-in default handlers exist for search, category, dietary, and sort filter IDs; you can register additional custom handlers with registerFilterHandler().

State is held in useState (x-restaurant-filters / x-restaurant-mobile-filters) so multiple components share the same filter selections.

Usage

const {
  config,
  activeFilters,
  hasActiveFilters,
  activeFiltersCount,
  isMobileFiltersOpen,
  updateFilter,
  toggleCheckbox,
  isCheckboxSelected,
  clearAllFilters,
  filterItems,
  registerFilterHandler,
} = useFilters()

// Register a custom filter handler for a custom filter group ID
registerFilterHandler("spiceLevel", (items, value) => {
  const levels = value as number[]
  if (!levels?.length) return items
  return items.filter(item => levels.includes(item.spiceLevel ?? 0))
})

const visible = filterItems(menuItems)

Returns

Key	Type	Description
`config`	`ComputedRef<FiltersConfig>`	Resolved filters config from `appConfig.xRestaurants.filters` (with defaults: `groups: []`, `showClearAll: true`, `mobileBreakpoint: 'lg'`, `title: 'Filters'`, `fixed: false`).
`activeFilters`	`Ref<ActiveFilters>`	Reactive map of `groupId → FilterValue`.
`hasActiveFilters`	`ComputedRef<boolean>`	`true` when any group has a non-empty value.
`activeFiltersCount`	`ComputedRef<number>`	Total number of active filter values across all groups.
`isMobileFiltersOpen`	`Ref<boolean>`	Shared open/closed state for the mobile filter drawer.
`updateFilter`	`(groupId: string, value: FilterValue) => void`	Replaces the value for the given group.
`toggleCheckbox`	`(groupId: string, value: string \| number) => void`	Adds/removes `value` from a checkbox group's array.
`isCheckboxSelected`	`(groupId: string, value: string \| number) => boolean`	`true` if `value` is in the group's array.
`clearAllFilters`	`() => void`	Resets `activeFilters` to `{}`.
`filterItems`	`(items: MenuItem[]) => MenuItem[]`	Applies active filters (custom handler first, default handler fallback) to the items array.
`registerFilterHandler`	`(filterId: string, handler: (items, value) => items) => void`	Registers a custom filter handler for a given filter group ID.

Built-in default handlers

`filterId`	Behavior
`search`	Case-insensitive substring match against `item.name` and `item.description`.
`category`	Keeps items whose `category` is in the active array.
`dietary`	Keeps items where any active tag is present in `item.tags`.
`sort`	Sorts by `name`, `price-asc`, or `price-desc`.

AI Context

composable: useFilters
package: "@xenterprises/nuxt-x-restaurants"
use-when: >
  Driving the menu filter UI for menu lists, or any list of items that needs
  the same group/check/range UI. Use registerFilterHandler() to add custom
  group behaviour beyond the built-in search/category/dietary/sort handlers.
  For the restaurants listing page prefer the higher-level
  useRestaurantFilters() composable.

Edit this pageorReport an issue

useRestaurantFilters

Manages restaurant listing filter state with SSR-safe URL sync, derived option lists, and lazy-fetched results.

useMenuCard

Reads menu card configuration from app.config.ts and exposes helpers for dietary tags, item tags, and price formatting.