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, defaultDietaryTags, getDietaryTag, getItemTags, formatPrice } = useMenuCard()
Returns
| Key | Type | Description |
|---|---|---|
config | ComputedRef<MenuCardConfig> | Resolved menu card config with defaults applied. See below for the full shape. |
defaultDietaryTags | DietaryTag[] | The built-in fallback dietary tag list (vegetarian, vegan, gluten-free, halal, spicy). |
getDietaryTag | (id: string) => DietaryTag | undefined | Looks up a dietary tag definition (label, icon, color) by its id. |
getItemTags | (item: MenuItem) => DietaryTag[] | Returns the resolved tag definitions for all tag ids on a menu item. |
formatPrice | (price: number, currency?: string) => string | Formats a numeric price as ${currency}${price.toFixed(2)}. Defaults currency to '$'. |
MenuCardConfig shape
| Key | Type | Default | Description |
|---|---|---|---|
showImage | boolean | true | Show menu item image. |
showDescription | boolean | true | Show menu item description. |
showTags | boolean | true | Show dietary tag badges. |
showSpiceLevel | boolean | false | Show spice level indicator. |
showCalories | boolean | false | Show calories count. |
showPrepTime | boolean | false | Show preparation time. |
imageAspect | 'square' | 'video' | 'wide' | 'video' | Image aspect ratio for the default variant. |
variant | 'default' | 'compact' | 'horizontal' | 'default' | Layout variant. |
dietaryTags | DietaryTag[] | 5 defaults | Custom dietary tag definitions. |
Configuration
useMenuCard reads from appConfig.xRestaurants.menuCard:
// app.config.ts
export default defineAppConfig({
xRestaurants: {
menuCard: {
showImage: true,
showDescription: true,
showTags: true,
showSpiceLevel: false,
showCalories: false,
showPrepTime: false,
variant: "default", // 'default' | 'compact' | 'horizontal'
imageAspect: "video", // 'square' | 'video' | 'wide'
dietaryTags: [
{ id: "vegetarian", label: "Vegetarian", icon: "i-heroicons-leaf", color: "green" },
{ id: "vegan", label: "Vegan", icon: "i-heroicons-sparkles", color: "emerald" },
{ id: "gluten-free",label: "Gluten-Free",icon: "i-heroicons-shield-check", color: "amber" },
{ id: "halal", label: "Halal", icon: "i-heroicons-check-badge", color: "teal" },
{ id: "spicy", label: "Spicy", icon: "i-heroicons-fire", color: "red" },
],
},
},
})
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.