Shared Components
Shared Components
These four components are used across the full layer. XRdNavbar and XRdFooter are typically placed in the layout file. XRdStarRating is a utility display component usable anywhere a rating needs to be shown. XRdMenuCard is the richest shared component, supporting three layout variants and integrating with the useMenuCard() composable for config and dietary tag resolution.
Components
<XRdNavbar />
Site-wide header built on UHeader. Logo image and text, nav links, and mobile drawer are all driven by useAppConfig().xRestaurants. Nav link active state is derived from the current route.
<!-- app.vue or layout file -->
<XRdNavbar />
Props
None. Configuration is read entirely from appConfig.xRestaurants:
| Config key | Description |
|---|---|
xRestaurants.logo | Logo image URL |
xRestaurants.logo.icon | Fallback icon name (default: i-lucide-map-pin) |
xRestaurants.logo.text | Logo text |
xRestaurants.name | Fallback site name |
xRestaurants.navbar.signInLabel | Sign in button label |
xRestaurants.navbar.links | Array of { label, to } nav link objects |
<XRdFooter />
Dark (bg-gray-900) full-width footer with a 4-column layout: brand + social icons, Quick Links, a Cuisines column, and a newsletter subscription form. Link targets are currently hardcoded to the default restaurant directory routes.
<!-- app.vue or layout file -->
<XRdFooter />
Props
None.
<XRdStarRating />
Renders a row of 5 star icons (filled, half, or empty) with an optional numeric rating label and review count. Uses i-lucide-star and i-lucide-star-half-2 icons.
<XRdStarRating
:rating="4.7"
:count="128"
:show-rating="true"
:show-count="true"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
rating | number | 0 | Numeric rating value (0–5, supports decimals for half stars) |
count | number | 0 | Total review count displayed in parentheses |
showRating | boolean | true | Whether to show the numeric rating value next to the stars |
showCount | boolean | false | Whether to show the review count next to the stars |
<XRdMenuCard />
Versatile menu item card supporting three display variants controlled by the useMenuCard() composable config (or overridden via the config prop). Uses dietary tag icons with color-coded classes and a formatted price string.
Variants:
default— vertical card with image, name, price, description, tag badges, calories, and prep timecompact— single-row item with name, price, and a+add buttonhorizontal— side-by-side image + content layout
<!-- Default variant from composable config -->
<XRdMenuCard :item="menuItem" />
<!-- Override to compact variant -->
<XRdMenuCard
:item="menuItem"
:config="{ variant: 'compact' }"
@click="handleItemClick"
@add="handleAddToOrder"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
item | MenuItem | required | Menu item object with name, price, description?, image?, calories?, prepTime?, available?, featured?, currency?, tags? |
config | Partial<MenuCardConfig> | undefined | Optional override for card config (variant, showImage, showDescription, showTags, showCalories, showPrepTime, imageAspect) |
Events
| Event | Payload | Description |
|---|---|---|
click | MenuItem | Emitted when the card is clicked |
add | MenuItem | Emitted when the + add button is clicked (compact/default variants) |
AI Context
package: "@xenterprises/nuxt-x-restaurants"
prefix: XRd
category: Shared
components:
- XRdNavbar
- XRdFooter
- XRdStarRating
- XRdMenuCard
use-when: >
XRdNavbar and XRdFooter belong in the Nuxt layout file (app.vue or layouts/default.vue).
XRdStarRating can replace any inline star rendering across listing cards, profile heroes,
and review items — it handles half-star logic automatically.
XRdMenuCard is the preferred component for rendering menu items in any context;
choose the variant (default/compact/horizontal) via the config prop or by setting
menuCard config in useAppConfig().xRestaurants. Use compact for dense menu lists
and horizontal for featured item showcases.