nuxt-x-blog
TagList
Tag filter list with post counts for narrowing blog results by tag.
TagList
The XBLTagList component renders a horizontal or vertical list of tags with post counts. Clicking a tag emits a select event so the parent can filter the post list.
Components
<XBLTagList />
Feed it the array returned by useBlog().getAllTags(). Highlights the currently active tag.
<XBLTagList
:tags="tags"
:active-tag="activeTag"
@select="activeTag = $event"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tags | { tag: string; count: number }[] | required | Tag list with counts from getAllTags() |
activeTag | string | null | null | Currently selected tag (highlighted) |
showCounts | boolean | true | Show post count badge next to each tag |
Emits
| Event | Description |
|---|---|
select | Fired with the tag string when a tag is clicked; null when "All" is clicked |
AI Context
component: XBLTagList
package: "@xenterprises/nuxt-x-blog"
use-when: Filtering blog posts by tag on the listing page