Shared
MenuCard
Multi-variant menu item card (default, compact, horizontal) with dietary tags and add-to-order action.
Shared
These components are used across the full layer. XRdMenuCard is the richest shared component, supporting three layout variants and integrating with the useMenuCard() composable for config and dietary tag resolution.
Components
<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) |
Emits
| 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
category: Shared
package: "@xenterprises/nuxt-x-restaurants"
components:
- XRdMenuCard
use-when: >
Rendering menu items in any context across the restaurant directory.
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.