@xenterprises/nuxt-x-restaurants

Nuxt layer for building restaurant directory websites with comprehensive listing, search, and profile components.

Features

• 50+ Components - Complete UI library for restaurant directories
• Restaurant Profiles - Full-featured restaurant detail pages
• Search & Filters - Advanced filtering by cuisine, price, rating, amenities, dietary options
• Homepage Components - Hero, featured listings, testimonials, FAQs
• Nuxt UI v4 - Built on Nuxt UI components
• Tailwind CSS v4 - Modern styling
• Nuxt Content v3 - Content management integration
• SEO Ready - Built-in SEO support via @nuxtjs/seo

Installation

npm install @xenterprises/nuxt-x-restaurants

Add to your nuxt.config.ts:

export default defineNuxtConfig({
  extends: ['@xenterprises/nuxt-x-restaurants'],
})

Components

All components use the XRD (X Restaurant Directory) prefix and are auto-imported.

Layout

| Component | Description | |-----------|-------------| | XRDNavbar | Site navigation header | | XRDFooter | Site footer |

Homepage

| Component | Description | |-----------|-------------| | XRDHomePageHero | Landing page hero section | | XRDHomePageFeaturedRestaurants | Featured restaurant showcase | | XRDHomePageNewRestaurants | Recently added restaurants | | XRDHomePagePopularThisWeek | Trending restaurants | | XRDHomePageSpecialOffers | Promotions and deals | | XRDHomePageLatestStories | Blog/news integration | | XRDHomePageLocalDiningGuide | Location-based recommendations | | XRDHomePageShowcase | Restaurant showcase grid | | XRDHomePageGrid | General grid layout | | XRDHomePageStats | Directory statistics | | XRDHomePageTestimonials | User testimonials | | XRDHomePageFAQ | Frequently asked questions | | XRDHomePageFeatures | Feature highlights |

Filters

| Component | Description | |-----------|-------------| | XRDFilters | Main filter container | | XRDFiltersAsideFilters | Sidebar filter panel | | XRDFiltersActiveFilters | Active filter pills | | XRDFiltersCuisineFilter | Cuisine type filter | | XRDFiltersPriceFilter | Price range filter | | XRDFiltersRatingFilter | Star rating filter | | XRDFiltersLocationFilter | Location/area filter | | XRDFiltersAmenitiesFilter | Amenities filter | | XRDFiltersDietaryFilter | Dietary options filter |

Restaurant Profile

| Component | Description | |-----------|-------------| | XRDProfileHero | Profile hero with images | | XRDProfileCard | Restaurant summary card | | XRDProfileBreadcrumb | Navigation breadcrumb | | XRDProfileNavigation | Profile section navigation | | XRDProfileAbout | About section | | XRDProfileDescription | Full description | | XRDProfileContact | Contact information | | XRDProfileContactInfo | Contact details display | | XRDProfileHours | Operating hours | | XRDProfileMap | Location map | | XRDProfileCuisine | Cuisine tags | | XRDProfileDietary | Dietary options display | | XRDProfileAmenities | Amenities list | | XRDProfileMenuSection | Menu category section | | XRDProfileMenuItem | Individual menu item | | XRDProfileReviews | Reviews section | | XRDProfileReviewsItem | Single review display | | XRDProfileSidebar | Profile sidebar | | XRDProfileSocial | Social media links | | XRDProfileFAQ | Restaurant FAQ | | XRDProfilePromotions | Special offers | | XRDProfileNewsletter | Newsletter signup |

Utilities

| Component | Description | |-----------|-------------| | XRDStarRating | Star rating display | | XRDMenuCard | Menu item card |

Usage

Basic Layout

<template>
  <div class="min-h-screen flex flex-col">
    <XRDNavbar />

    <main class="flex-grow">
      <NuxtPage />
    </main>

    <XRDFooter />
  </div>
</template>

Homepage Example

<template>
  <div>
    <XRDHomePageHero
      title="Discover the Best Restaurants"
      subtitle="Find your next dining experience"
      :search="true"
    />

    <XRDHomePageFeaturedRestaurants :restaurants="featured" />

    <XRDHomePagePopularThisWeek :restaurants="popular" />

    <XRDHomePageTestimonials :testimonials="testimonials" />

    <XRDHomePageFAQ :items="faqItems" />
  </div>
</template>

<script setup>
const { data: featured } = await useAsyncData('featured', () =>
  queryCollection('restaurants')
    .where('featured', '=', true)
    .limit(6)
    .find()
)
</script>

Search Page with Filters

<template>
  <div class="container mx-auto px-4 py-8">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
      <aside class="lg:col-span-1">
        <XRDFiltersAsideFilters
          v-model:cuisine="filters.cuisine"
          v-model:price="filters.price"
          v-model:rating="filters.rating"
          v-model:location="filters.location"
        />
      </aside>

      <main class="lg:col-span-3">
        <XRDFiltersActiveFilters :filters="filters" @clear="clearFilters" />

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <XRDProfileCard
            v-for="restaurant in restaurants"
            :key="restaurant.id"
            :restaurant="restaurant"
          />
        </div>
      </main>
    </div>
  </div>
</template>

Restaurant Profile Page

<template>
  <div>
    <XRDProfileBreadcrumb :restaurant="restaurant" />

    <XRDProfileHero :images="restaurant.images" />

    <div class="container mx-auto px-4 py-8">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <main class="lg:col-span-2">
          <XRDProfileNavigation />

          <XRDProfileAbout :restaurant="restaurant" />

          <XRDProfileMenuSection
            v-for="section in restaurant.menu"
            :key="section.name"
            :section="section"
          />

          <XRDProfileReviews :reviews="restaurant.reviews" />
        </main>

        <aside class="lg:col-span-1">
          <XRDProfileSidebar :restaurant="restaurant" />
        </aside>
      </div>
    </div>
  </div>
</template>

Content Structure

content/
  restaurants/
    the-italian-place.md
    sushi-bar.md

Restaurant Frontmatter

---
name: The Italian Place
slug: the-italian-place
description: Authentic Italian cuisine in the heart of downtown
cuisine:
  - Italian
  - Mediterranean
priceRange: $$
rating: 4.5
reviewCount: 127
address: 123 Main Street, Downtown
phone: (555) 123-4567
website: https://theitalianplace.com
hours:
  monday: 11:00 AM - 10:00 PM
  tuesday: 11:00 AM - 10:00 PM
  # ...
amenities:
  - Outdoor Seating
  - WiFi
  - Reservations
dietary:
  - Vegetarian Options
  - Gluten-Free Options
images:
  - /images/restaurants/italian-1.jpg
  - /images/restaurants/italian-2.jpg
featured: true
---

Full description of the restaurant...

Dependencies

This layer includes:

• @nuxt/content v3+
• @nuxt/ui v4+
• @nuxtjs/seo
• @xenterprises/nuxt-x-marketing
• nuxt-easy-lightbox

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

License

MIT