Landing page
content/index.md is your site's home page. It renders full-width without the docs sidebar, so it gets its own set of section components on top of the regular Markdown and Nuxt UI components.
Start from this playground's own index.md — it's a working example of everything below.
Frontmatter
---
title: A Nuxt layer for content-driven documentation
description: Markdown served at request time, ISR-cached, revalidated on push.
navigation: false
---Set navigation: false so the landing page doesn't appear in the docs sidebar. title and description (or seo.title / seo.description) feed the meta tags and the OG image.
content/index.md. Docs pages have their own set — see Components.Hero
Use Nuxt UI's UPageHero with the u- prefix:
::u-page-hero
#title
Docs that ship without a redeploy.
#description
Write Markdown, push, done.
#links
:::u-button
---
to: /getting-started/introduction
size: lg
trailing-icon: i-lucide-arrow-right
---
Get started
:::
::Hero demo
::landing-hero-demo renders a fake editor with a source.md tab (highlighted Markdown) and a preview tab (the same Markdown rendered live):
::landing-hero-demo
---
playground: https://comark.dev/playground
source: |
# Hello world
Write **Markdown**, see it rendered.
---
::| Prop | Type | Purpose |
|---|---|---|
source | string (required) | Markdown shown in the source tab and rendered in the preview tab. |
playground | string | URL for the "Open in playground" header button. |
Feature grid
::landing-features is a centered section wrapping a grid of :::landing-feature-card tiles:
::landing-features
#headline
Features
#title
Everything a docs site needs
#default
:::landing-feature-card{icon="i-lucide-zap"}
#title
Instant content
#description
Content pushes go live in production without a redeploy.
:::
:::landing-feature-card{icon="i-lucide-git-branch" color="var(--ui-primary)"}
#title
Versioned previews
#description
Preview any branch at `/tree/branch` or commit at `/blob/sha`.
:::
::landing-features — props: id (optional anchor). Slots: headline, title, description, and the default slot for the cards.
landing-feature-card — props:
| Prop | Type | Purpose |
|---|---|---|
icon | string | Icon shown above the title. |
to | string | Makes the card a link. |
color | string | CSS color for the card's hover glow. |
Slots: title, description.
Tabs
::landing-tabs renders a two-column section: a vertical tab list on one side and one panel per tab on the other. Panels fill the dynamic code-0, code-1, ... slots, in the same order as items:
::landing-tabs
---
items:
- icon: i-lucide-file-text
title: Write Markdown
description: Plain files in your repo.
- icon: i-lucide-rocket
title: Push to deploy
description: Live without a rebuild.
---
#headline
Workflow
#title
From commit to page
#code-0
```md [content/index.md]
# Hello
```
#code-1
```bash [Terminal]
git push
```
::| Prop | Type | Purpose |
|---|---|---|
items | { icon?, title, description? }[] (required) | One entry per tab. |
reverse | boolean | Flips the column order. |
Slots: headline, title, description, code-0 … code-n.
Logo stack
::landing-stack renders an eyebrow label above a grid of linked logos:
::landing-stack
---
items:
- icon: i-simple-icons-nuxt
label: Nuxt
to: https://nuxt.com
- icon: i-simple-icons-vercel
label: Vercel
to: https://vercel.com
---
Built with
::The default slot is the label text, rendered as // Built with //.
FAQ
::landing-faq renders an accordion and emits matching FAQPage JSON-LD so the questions can appear in search results:
::landing-faq
---
items:
- label: Do I need to redeploy when content changes?
content: No. Content is fetched at request time and revalidated on push.
- label: Can I preview a branch?
content: Yes, any branch renders at /tree/branch-name.
---
#headline
FAQ
#title
Frequently asked questions
::Props: items ({ label, content }[], required; content is parsed as Markdown) and id (optional anchor). Slots: headline, title.
Call to action
::landing-cta closes the page with a bordered panel:
::landing-cta
#title
Ready to ship docs faster?
#description
Install the layer and push your first page.
#links
:::u-button{to="/getting-started/installation" size="lg"}
Get started
:::
::Props: id (optional anchor). Slots: title, description, links.
Structured data
Beyond the FAQ JSON-LD, the landing page can emit a schema.org SoftwareApplication identity. Configure it once in app.config.ts under docs.schemaOrg; nothing is emitted when unset.