nuxt-x-marketing
BlogSidebar
Blog sidebar with search, categories, tags, recent posts, and newsletter CTA slot.
BlogSidebar
Sticky blog sidebar. Renders a search input, category links (with active highlighting), tag cloud, recent posts, and a newsletter CTA. Emit search to handle the search query in the parent.
Components
<XMarkBlogSidebar />
Sticky blog sidebar. Renders a search input, category links (with active highlighting), tag cloud, recent posts, and a newsletter CTA. Emit search to handle the search query in the parent.
<XMarkBlogSidebar
:has-search="true"
:categories="[
{ name: 'Tutorials', slug: 'tutorials', count: 12 },
{ name: 'News', slug: 'news', count: 5 },
]"
:tags="[
{ name: 'Vue', slug: 'vue' },
{ name: 'Nuxt', slug: 'nuxt' },
]"
:recent-posts="recentPosts"
category-base-path="/blog/category"
tag-base-path="/blog/tag"
:has-cta="true"
@search="handleSearch"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
hasSearch | Boolean | true | Show search input |
categories | Array | [] | Category list [{ name, slug, count }] |
tags | Array | [] | Tag list [{ name, slug }] |
recentPosts | Array | [] | Recent posts [{ title, slug, img?, date? }] |
categoryBasePath | String | '/blog/category' | URL prefix for category links |
tagBasePath | String | '/blog/tag' | URL prefix for tag links |
hasCta | Boolean | true | Show newsletter CTA at bottom |
Slots
| Slot | Description |
|---|---|
cta | Override the newsletter CTA section |
AI Context
category: Blog
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkBlogSidebar
use-when: >
Adding a discovery sidebar to blog list and detail pages. Provides search,
category navigation, tag cloud, recent posts, and a newsletter CTA in one
composable widget.
typical-page-section: Right column of /blog index and /blog/[slug] pages.