Filters
FiltersAsideFilters
Desktop sidebar + mobile modal filter panel with configurable filter groups.
Filters
The filter system has two layers. XRDFiltersAsideFilters is the primary, production-ready panel that reads its groups from useFilters() app config.
Components
<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
The component is typically used with no props — configuration is read from the useFilters() composable (title, fixed, showClearAll, groups). The two props below are escape hatches for controlled-mode and config-override use cases.
| Prop | Type | Default | Description |
|---|---|---|---|
config | Partial<FiltersConfig> | — | Override filters config from props instead of app.config. |
modelValue | ActiveFilters | — | External active filters state for controlled mode (use with @update:modelValue). |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | ActiveFilters | Emitted on filter change in controlled mode. |
change | ActiveFilters | Same payload — alias event. |
AI Context
category: Filters
package: "@xenterprises/nuxt-x-restaurants"
components:
- XRDFiltersAsideFilters
use-when: >
Building the primary sidebar filter panel for the restaurant explore page.
Handles desktop sticky aside, mobile toggle/modal, collapsible groups,
and checkbox/radio/range filter types via the useFilters() composable.