1# Landing Page Layout
2 
3Build public-facing pages — landing, blog, changelog, pricing — using the Header + Main + Footer shell with Page components.
4 
5## When to use
6 
7- Marketing sites, product pages, company sites
8- Blog and content pages
9- Pricing, changelog, portfolio pages
10- Any public-facing page that isn't a dashboard or documentation
11 
12## App shell
13 
14```vue [app.vue]
15<script setup lang="ts">
16import type { NavigationMenuItem } from '@nuxt/ui'
17 
18const items = computed<NavigationMenuItem[]>(() => [{
19  label: 'Features',
20  to: '#features'
21}, {
22  label: 'Pricing',
23  to: '/pricing'
24}, {
25  label: 'Blog',
26  to: '/blog'
27}])
28</script>
29 
30<template>
31  <UApp>
32    <UHeader>
33      <template #title>
34        <Logo class="h-6 w-auto" />
35      </template>
36 
37      <UNavigationMenu :items="items" />
38 
39      <template #right>
40        <UColorModeButton />
41        <UButton label="Sign in" color="neutral" variant="ghost" />
42        <UButton label="Get started" />
43      </template>
44 
45      <template #body>
46        <UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
47      </template>
48    </UHeader>
49 
50    <UMain>
51      <NuxtPage />
52    </UMain>
53 
54    <UFooter>
55      <template #left>
56        <p class="text-muted text-sm">Copyright © {{ new Date().getFullYear() }}</p>
57      </template>
58      <template #right>
59        <UButton icon="i-simple-icons-github" color="neutral" variant="ghost" to="https://github.com" target="_blank" />
60      </template>
61    </UFooter>
62  </UApp>
63</template>
64```
65 
66### Common mistakes
67 
68- Forgetting the `#body` slot on `UHeader` — this is the mobile menu content. Without it, mobile users have no navigation.
69- Using `variant="solid"` for both header and hero buttons — the header button should be lower weight than the hero CTA.
70 
71## Landing page
72 
73```vue [pages/index.vue]
74<template>
75  <UPageHero
76    title="Build faster with Nuxt UI"
77    description="A comprehensive Vue UI component library."
78    :links="[
79      { label: 'Get started', to: '/docs', icon: 'i-lucide-square-play' },
80      { label: 'Learn more', color: 'neutral', variant: 'subtle', trailingIcon: 'i-lucide-arrow-right' }
81    ]"
82    orientation="horizontal"
83  >
84    <img src="/hero-image.png" alt="App screenshot" class="rounded-lg shadow-2xl ring ring-default" />
85  </UPageHero>
86 
87  <UPageSection
88    id="features"
89    headline="Features"
90    title="Everything you need"
91    description="A comprehensive suite of components and utilities."
92    :features="[
93      { title: 'Accessible', description: 'Built on Reka UI with full ARIA support.', icon: 'i-lucide-accessibility' },
94      { title: 'Customizable', description: 'Tailwind Variants theming with full control.', icon: 'i-lucide-palette' },
95      { title: 'Responsive', description: 'Mobile-first components.', icon: 'i-lucide-monitor-smartphone' }
96    ]"
97  />
98 
99  <UPageCTA
100    title="Trusted by thousands of developers"
101    description="Join the community and start building today."
102    :links="[
103      { label: 'Get started', color: 'neutral' },
104      { label: 'Star on GitHub', color: 'neutral', variant: 'subtle', trailingIcon: 'i-lucide-arrow-right' }
105    ]"
106  />
107 
108  <UPageSection id="pricing" headline="Pricing" title="Simple, transparent pricing">
109    <UPricingPlans
110      :plans="[
111        { title: 'Free', price: '$0', description: 'For personal projects', features: ['10 components', 'Community support'] },
112        { title: 'Pro', price: '$99', description: 'For teams', features: ['All components', 'Priority support'], highlight: true },
113        { title: 'Enterprise', price: 'Custom', description: 'For large teams', features: ['Custom components', 'Dedicated support'] }
114      ]"
115    />
116  </UPageSection>
117</template>
118```
119 
120## Key components
121 
122- `UPageHero` — hero with title, description, links, and optional media. Use `orientation="horizontal"` for side-by-side layout.
123- `UPageSection` — content section with headline, title, description, and `features` grid. Use `id` for anchor links.
124- `UPageCTA` — call to action block.
125- `UPageGrid` / `UPageCard` — card grid for features, testimonials, etc.
126- `UPageFeature` — individual feature item.
127- `UPageLogos` — logo wall for social proof.
128- `UPricingPlans` / `UPricingTable` — pricing cards and comparison tables.
129- `UFooterColumns` — multi-column footer with link groups (used inside `UFooter`).
130 
131## Variations
132 
133### Alternating feature sections
134 
135```vue
136<UPageSection title="Feature A" orientation="horizontal">
137  <img src="/feature-a.png" />
138</UPageSection>
139 
140<UPageSection title="Feature B" orientation="horizontal" reverse>
141  <img src="/feature-b.png" />
142</UPageSection>
143```
144 
145### Blog listing
146 
147```vue [pages/blog/index.vue]
148<script setup lang="ts">
149const { data: posts } = await useAsyncData('posts', () => queryCollection('posts').all())
150</script>
151 
152<template>
153  <UPage>
154    <UPageHero title="Blog" description="The latest news and updates." />
155    <UPageBody>
156      <UContainer>
157        <UBlogPosts>
158          <UBlogPost v-for="post in posts" :key="post.path" v-bind="post" :to="post.path" />
159        </UBlogPosts>
160      </UContainer>
161    </UPageBody>
162  </UPage>
163</template>
164```
165 
166### Changelog
167 
168```vue [pages/changelog.vue]
169<script setup lang="ts">
170const { data: versions } = await useAsyncData('versions', () => queryCollection('changelog').all())
171</script>
172 
173<template>
174  <UPage>
175    <UPageHero title="Changelog" />
176    <UPageBody>
177      <UContainer>
178        <UChangelogVersions>
179          <UChangelogVersion v-for="version in versions" :key="version.path" v-bind="version" />
180        </UChangelogVersions>
181      </UContainer>
182    </UPageBody>
183  </UPage>
184</template>
185```
186