XRDFiltersVibeFilter

Filter component for the Vibe group in the listings page sidebar. Surfaces 12 standardized vibe ids across three subgroups.

Usage

<UAccordion :items="[{ label: 'Vibe', slot: 'vibe', value: 'vibe' }]">
  <template #vibe>
    <XRDFiltersVibeFilter />
  </template>
</UAccordion>

This component is already wired into XRDFilters (the sidebar index) — no manual setup required for the listing page.

Subgroups

The filter is rendered with three sub-headers:

• Good For — Date Night, Family, Business, Groups, Kids
• Atmosphere — Casual, Trendy, Intimate, Upscale
• Noise Level — Quiet, Moderate Noise, Lively

Each option is a checkbox. Multiple vibes combine with AND logic (a restaurant must have ALL selected vibes to appear in results).

Auto-hide for empty data

The component introspects the full restaurant list (via useRestaurantFilters().allRestaurants) and only shows vibes that at least one restaurant in the dataset has. So if your data doesn't include "Intimate" restaurants, that option won't appear.

AI Context

component: XRDFiltersVibeFilter
package: "@xenterprises/nuxt-x-restaurants"
use-when: >
  Adding vibe-based filtering (Good For / Atmosphere / Noise) to the
  listings sidebar. Combines with useVibes() for the standardized ids.
  Auto-hides options not present in the data. Combines selections with
  AND logic.