HomePageHero
HomePage
These components compose the restaurant directory's landing page. The Hero component drives the primary search experience; the listing grids (FeaturedRestaurants, PopularThisWeek, NewRestaurants) each accept a restaurants array from the page's async data calls. Static editorial blocks (SpecialOffers, Testimonials, Showcase) require no props and use internal data. The Stats subcomponent is rendered inside the Hero automatically using domainInfo.stats.
The auto-registered app/pages/index.vue page wires all of these together and uses the useDomain() composable to fetch data.
Components
<XRdHomePageHero />
Full-screen parallax hero with a background image, overlay, and an embedded search card. The search card contains cuisine and location select menus. Below the card, XRdHomePageStats is automatically rendered using domainInfo.stats. Config is read from useAppConfig().xRestaurants.
<XRdHomePageHero
:domain-info="domainInfo"
:featured-restaurants="featuredRestaurants"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
domainInfo | object | — | Domain data object; domainInfo.stats feeds the stats subcomponent and domainInfo config feeds background image, title, description, placeholders |
featuredRestaurants | array | [] | Passed through for downstream use; not rendered directly in the hero body |
AI Context
category: HomePage
package: "@xenterprises/nuxt-x-restaurants"
components:
- XRdHomePageHero
use-when: >
Building the restaurant directory home page hero section with integrated
cuisine/location search and live stats display.
typical-page-section: Top of home page, primary search experience.