nuxt-x-marketing
BlogDetail
Full blog post layout with hero, prose content slot, tags, author bio, prev/next navigation, and sticky sidebar.
BlogDetail
Full article reading layout. Place your prose content in the default slot. Automatically renders a sticky sidebar on desktop with a table of contents and a newsletter CTA (overridable via the sidebar slot).
Components
<XMarkBlogDetail />
Full article reading layout. Place your prose content in the default slot. Automatically renders a sticky sidebar on desktop with a table of contents and a newsletter CTA (overridable via the sidebar slot).
<XMarkBlogDetail
:post="post"
:previous-post="previousPost"
:next-post="nextPost"
:toc="[
{ id: 'intro', text: 'Introduction', depth: 2 },
{ id: 'setup', text: 'Setup', depth: 2 },
{ id: 'config', text: 'Configuration', depth: 3 },
]"
>
<!-- Rendered prose content -->
<ContentRenderer :value="post" />
<template #sidebar>
<XMarkNewsletterForm variant="compact" title="Weekly digest" />
</template>
</XMarkBlogDetail>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
post | Object | Example post | Full post object including title, description, date, readingTime, category, author, img, tags |
previousPost | Object | null | Previous post { title, slug } |
nextPost | Object | null | Next post { title, slug } |
toc | Array | [] | Table of contents [{ id, text, depth }] |
Slots
| Slot | Description |
|---|---|
default | The article prose content |
sidebar | Override the sticky sidebar content |
AI Context
category: Blog
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkBlogDetail
use-when: >
Building the individual blog post page (/blog/[slug]). Provides the full
reading layout with prose area, sticky sidebar, prev/next navigation,
and author bio.
typical-page-section: /blog/[slug] full-page layout.