nuxt-x-restaurants

Restaurant directory layer for Nuxt 4. Provides 48+ auto-imported XRD-prefixed components, 5 composables, and 17 auto-registered routes. Extends nuxt-x-marketing for shared marketing components.

Installation

npm install @xenterprises/nuxt-x-restaurants

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ["@xenterprises/nuxt-x-restaurants"],
});

What This Layer Provides

Components (prefix: XRD)

• Layout — XRDNavbar, XRDFooter
• Homepage (13) — XRDHomePageHero, XRDHomePageFeaturedRestaurants, XRDHomePageNewRestaurants, XRDHomePagePopularThisWeek, XRDHomePageSpecialOffers, XRDHomePageLatestStories, XRDHomePageLocalDiningGuide, XRDHomePageShowcase, XRDHomePageGrid, XRDHomePageStats, XRDHomePageTestimonials, XRDHomePageFAQ, XRDHomePageFeatures
• Filters (9) — XRDFilters, XRDFiltersAsideFilters, XRDFiltersActiveFilters, XRDFiltersCuisineFilter, XRDFiltersPriceFilter, XRDFiltersRatingFilter, XRDFiltersLocationFilter, XRDFiltersAmenitiesFilter, XRDFiltersDietaryFilter
• Profile (22) — XRDProfileHero, XRDProfileCard, XRDProfileBreadcrumb, XRDProfileNavigation, XRDProfileAbout, XRDProfileDescription, XRDProfileContact, XRDProfileContactInfo, XRDProfileHours, XRDProfileMap, XRDProfileCuisine, XRDProfileDietary, XRDProfileAmenities, XRDProfileMenuSection, XRDProfileMenuItem, XRDProfileReviews, XRDProfileReviewsItem, XRDProfileSidebar, XRDProfileSocial, XRDProfileFAQ, XRDProfilePromotions, XRDProfileNewsletter
• Utility — XRDStarRating, XRDMenuCard

Composables

• useDomain — API endpoint management for restaurant data
• useRestaurantFilters — filter state with URL sync
• useFilters — generic filter logic with custom handler registration
• useMenuCard — menu card configuration from app.config.ts
• useRestaurant — individual restaurant data fetching

Pages (Auto-Registered)

Composable Reference

useDomain()

API endpoint management. Returns methods: getInfo(), getRestaurants(), getRestaurantBySlug(), getRestaurantMenuBySlug(), getRestaurantReviewsBySlug(), getRestaurantPhotosBySlug(), getRestaurantsSearch(), getRestaurantsFeatured(), getRestaurantsNew(), getRestaurantsRandom(), getRestaurantsTopRated(), getSitemap().

useRestaurantFilters()

Filter state with URL query parameter sync. Returns filteredRestaurants, toggle methods for cuisine/location/price/amenity/dietary/rating, clearAllFilters(), hasActiveFilters, activeFilterCount.

useRestaurant(slug)

Individual restaurant data. Returns: getRestaurant(), getRestaurantSchema(), getRestaurantReviews(), getRestaurantFAQs(), getRestaurantMenu(), getRestaurantPhotos().

useMenuCard()

Menu card configuration from app.config.ts. Returns config, getDietaryTag(), getItemTags(), formatPrice().

Configuration (app.config.ts)

export default defineAppConfig({
  xRestaurants: {
    name: "My Restaurant Directory",
    domain: "mysite.com",
    logo: "/logos/my-logo.webp",
    navbar: {
      links: [
        { label: "Explore", to: "/restaurants" },
        { label: "Articles", to: "/articles" },
      ],
    },
    homePage: {
      hero: {
        title: "Find the Best Dining",
        description: "Explore top-rated restaurants...",
        backgroundImage: "https://...",
      },
      featured: {
        title: "Featured Places",
        viewAllLink: "/restaurants",
      },
    },
    menuCard: {
      showImage: true,
      showDescription: true,
      showTags: true,
      variant: "default", // "default" | "compact" | "horizontal"
      imageAspect: "video", // "square" | "video" | "wide"
      dietaryTags: [
        { id: "vegetarian", label: "Vegetarian", icon: "i-heroicons-leaf", color: "green" },
      ],
    },
    filters: {
      title: "Filters",
      showClearAll: true,
    },
  },
});

Environment Variables

How It Works

The layer extends nuxt-x-marketing for shared marketing components. useDomain() builds API URLs from runtimeConfig.public.apiEndpoint + the domain in app.config.ts. All restaurant data (listings, menus, reviews, photos) is fetched from this API.

useRestaurantFilters() manages filter state via useState (SSR-safe) with URL query parameter sync. Filters are AND across groups, OR within groups. The restaurants/[slug].vue layout fetches data once via useAsyncData and provides it to child pages via provide/inject, avoiding duplicate API calls. Articles and features use Nuxt Content v3 markdown files.

AI Context

package: "@xenterprises/nuxt-x-restaurants"
type: nuxt-layer
prefix: XRD
use-when: >
  Building a restaurant directory site with Nuxt 4. Provides 48+ XRD-prefixed
  components for listing, filtering, and profile pages, 5 composables for API
  integration (useDomain, useRestaurantFilters, useFilters, useMenuCard,
  useRestaurant), and 17 auto-registered routes. Extends nuxt-x-marketing for
  shared layout components. Requires NUXT_PUBLIC_API_ENDPOINT to be set.