Pages
Restaurant Menu
The /restaurants/:slug/menu route — renders the full menu grouped by section using XRDProfileMenuSection and XRDProfileMenuItem.
Restaurant Menu
The /restaurants/:slug/menu child page renders the restaurant's full menu, grouped into sections. Menu data is injected from the parent restaurants/[slug].vue layout (no additional API call). Each menu item is rendered with dietary tags and pricing via useMenuCard().
Route
/restaurants/:slug/menu
Components Used
| Component | Role |
|---|---|
XRDProfileMenuSection | Section container with section name and item list. |
XRDProfileMenuItem | Individual menu item with name, description, price, image, and dietary tags. |
XRDMenuCard | Alternative card layout for menu items (used when card variant is configured). |
Data Fetching
Menu data (MenuSection[]) is injected from the parent layout via inject. The parent fetched it using useRestaurant(slug).getRestaurantMenu() wrapped in useAsyncData. No direct API call is made in this child page.
Item rendering (dietary tags, price format, card variant) is controlled by useMenuCard() reading appConfig.xRestaurants.menuCard.
AI Context
route: /restaurants/:slug/menu
package: "@xenterprises/nuxt-x-restaurants"
use-when: >
Rendering the menu tab on a restaurant profile. Data is provided by
the parent layout via inject. Use useMenuCard() to customise item
display (variant, dietary tags, price formatting) via app.config.ts.