Filter Components

The filter system has two layers. XRdFiltersAsideFilters is the primary, production-ready panel that reads its groups from useFilters() app config — it handles desktop sidebar layout, mobile toggle button, collapsible groups, checkbox/radio/range group types, and a clear-all action. XRdFilters (index.vue) is a lighter accordion-only variant using the same composable.

The standalone filter cards (LocationFilter, CuisineFilter, PriceFilter, RatingFilter, AmenitiesFilter, DietaryFilter) are v-model components you can compose freely outside the sidebar.

XRdFiltersActiveFilters renders active filter chips by reading from useFilters() and emits remove and clear events.

Components

<XRdFilters />

Accordion-based filter panel. Uses the useFilters() composable internally to access available locations, cuisines, amenities, and dietary options. Renders location, cuisine, price, amenity, and dietary sections via UAccordion.

<XRdFilters />

Props

None. All state is managed via the useFilters() composable.

<XRdFiltersAsideFilters />

Full sidebar filter panel with mobile/desktop responsive layout. Reads filter group configuration from useFilters(). On desktop, renders as a sticky aside; on mobile, shows a toggle button. Groups support checkbox, radio, and range types and can be collapsed.

<XRdFiltersAsideFilters />

Props

None. Configuration is driven by the useFilters() composable config, including title, fixed layout mode, showClearAll, and groups.

<XRdFiltersActiveFilters />

Renders a wrapping flex row of UBadge chips for each active filter value. Each chip shows the group label and value label with a remove button. Optionally shows a "Clear all" button when more than one filter is active.

<XRdFiltersActiveFilters
  :show-clear-all="true"
  @remove="(groupId, value) => handleRemove(groupId, value)"
  @clear="handleClearAll"
/>

Props

Events

<XRdFiltersLocationFilter />

Standalone checkbox list card for selecting one or more location strings.

<XRdFiltersLocationFilter
  v-model="selectedLocations"
  :locations="['Downtown', 'Midtown', 'Uptown']"
/>

Props

<XRdFiltersCuisineFilter />

Standalone checkbox list card for selecting one or more cuisine types.

<XRdFiltersCuisineFilter
  v-model="selectedCuisines"
  :cuisines="[{ id: 'italian', label: 'Italian' }, { id: 'thai', label: 'Thai' }]"
/>

Props

<XRdFiltersPriceFilter />

Checkbox card for price level selection. Renders four options: $, $$, $$$, $$$$ mapped to numeric values 1–4.

<XRdFiltersPriceFilter v-model="selectedPriceLevels" />

Props

<XRdFiltersRatingFilter />

Radio card for minimum rating selection. Options: Any Rating, 3+, 4+, 5 stars.

<XRdFiltersRatingFilter v-model="minRating" />

Props

<XRdFiltersAmenitiesFilter />

Checkbox card for amenity selection. Each amenity can optionally include an icon.

<XRdFiltersAmenitiesFilter
  v-model="selectedAmenities"
  :amenities="[
    { id: 'wifi', label: 'Free WiFi', icon: 'i-lucide-wifi' },
    { id: 'parking', label: 'Parking', icon: 'i-lucide-car' }
  ]"
/>

Props

<XRdFiltersDietaryFilter />

Checkbox card for dietary preference selection. Defaults to vegetarian, vegan, gluten-free, halal if no options are provided.

<XRdFiltersDietaryFilter
  v-model="selectedDietary"
  :options="['vegetarian', 'vegan', 'gluten-free', 'halal']"
/>

Props

AI Context

package: "@xenterprises/nuxt-x-restaurants"
prefix: XRd
category: Filters
components:
  - XRdFilters
  - XRdFiltersAsideFilters
  - XRdFiltersActiveFilters
  - XRdFiltersLocationFilter
  - XRdFiltersCuisineFilter
  - XRdFiltersPriceFilter
  - XRdFiltersRatingFilter
  - XRdFiltersAmenitiesFilter
  - XRdFiltersDietaryFilter
use-when: >
  Building a restaurant explore/search page with filterable listings.
  Use XRdFiltersAsideFilters as the primary sidebar panel alongside an active
  chip row (XRdFiltersActiveFilters) for the full filtering UX.
  Use individual filter cards (LocationFilter, CuisineFilter, etc.) when you
  need granular control or want to embed filters inline rather than in a sidebar.
  All standalone filter cards are v-model compatible.
  Filter state is centralized via the useFilters() composable.