Composables
useMenuCard
Reads menu card configuration from app.config.ts and exposes helpers for dietary tags, item tags, and price formatting.
useMenuCard
Menu card configuration composable. Reads appConfig.xRestaurants.menuCard and exposes the config alongside helper utilities used internally by XRDMenuCard and XRDProfileMenuItem. Use it directly when building custom menu UI that should honour the same app config settings.
Usage
const { config, getDietaryTag, getItemTags, formatPrice } = useMenuCard()
Returns
| Key | Type | Description |
|---|---|---|
config | MenuCardConfig | Full menu card config from appConfig.xRestaurants.menuCard (variant, imageAspect, showImage, showDescription, showTags, dietaryTags). |
getDietaryTag | (id: string) => DietaryTag | undefined | Looks up a dietary tag definition (label, icon, color) by its id string. |
getItemTags | (item: MenuItem) => DietaryTag[] | Returns the resolved tag definitions for all tag ids on a menu item. |
formatPrice | (price: number) => string | Formats a numeric price according to locale/currency settings. |
Configuration
useMenuCard reads from appConfig.xRestaurants.menuCard:
// app.config.ts
export default defineAppConfig({
xRestaurants: {
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' },
],
},
},
})
AI Context
composable: useMenuCard
package: "@xenterprises/nuxt-x-restaurants"
use-when: >
Rendering menu items with dietary tags and price formatting that should
respect app config settings. Used internally by XRDMenuCard and
XRDProfileMenuItem. Also use when building a custom menu card component
that must share the same config as the built-in components.