Home
Home
The root route renders the full homepage experience. It composes XRDHomePage* section components in a vertically stacked layout driven by app.config.ts content configuration, and falls back to XRDComingSoon (on the bare layout) when the configured domain isn't found by the API or when xRestaurants.comingSoon.enabled is true.
Route
/
Components Used
The homepage wires these components in order. Each section component is rendered conditionally when its data is available, except LocalDiningGuide, Showcase, and FAQ which always render.
| Component | Role | Condition |
|---|---|---|
XRDHomePageHero | Full-width hero with cuisine/location search and live stats. | Always. |
XRDHomePageFeaturedRestaurants | 3-up grid of featured restaurants. | featuredRestaurants.length > 0. |
XRDHomePagePopularThisWeek | 3-up grid of trending restaurants. | popularRestaurants.length > 0. |
XRDHomePageNewRestaurants | 4-up grid of newly added restaurants. | newestRestaurants.length > 0. |
XRDHomePageLocalDiningGuide | Editorial SEO block from content/misc/homepage-seo. | Always (renders nothing if page missing). |
XRDHomePageLatestStories | 1 featured + 3 recent articles from content/articles. | stories.length > 0. |
XRDHomePageShowcase | Two-column "Discover Your Next Favorite Spot" CTA block. | Always. |
XRDHomePageFAQ | FAQ accordion from content/misc/faqs. | Always (renders nothing if page missing). |
XRDComingSoon | Full-screen coming-soon landing with newsletter signup. | When the API returns 404 for the domain or xRestaurants.comingSoon.enabled === true. |
Data Fetching
Homepage data is fetched in setup():
domain.getInfo()— wrapped intry/catch; a 404 setsdomainNotFound = truewhich triggers theXRDComingSoonfallback.Promise.allSettled([getRestaurantsFeatured(), getRestaurantsTopRated(), getNewestRestaurants(4)])— each result is used iffulfilled.queryCollection('articles').limit(4).all()— wraps intry/catchand falls back to[].
JSON-LD schema components from the marketing layer are also rendered when siteUrl and siteName are present: XSchemaWebSite (with a search box pointing at /restaurants?q={search_term_string}) and XSchemaOrganization.
useSiteMeta({...}) populates homepage SEO meta (title, description, OpenGraph, Twitter Card, canonical) in one call. It auto-injects siteName from appConfig.xRestaurants.name and siteUrl from appConfig.xSchema.siteUrl.
SEO meta
useSiteMeta({
title: heroTitle.value, // appConfig.xRestaurants.homePage.hero.title or fallback
description: heroDescription.value,
path: '/',
image: siteLogo.value, // appConfig.xSchema.siteLogo
})
The composable internally emits the same <title>, <meta>, OG, Twitter Card, and <link rel="canonical"> tags the previous hand-rolled useHead block did — but in one line per piece of metadata.
AI Context
route: /
package: "@xenterprises/nuxt-x-restaurants"
use-when: >
Rendering the site homepage. Sections are fetched from useDomain()
(featured, popular, newest) and queryCollection('articles'). All section
copy is configured via appConfig.xRestaurants.homePage. The page falls
back to XRDComingSoon (bare layout) when the domain returns 404 or
xRestaurants.comingSoon.enabled is true. SEO meta is built via useSiteMeta()
with XSchemaWebSite / XSchemaOrganization JSON-LD from the marketing layer.