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() |
showCount | boolean | true | Show post count badge next to each tag |
activeTag | string | '' | Currently selected tag (highlighted) |
Emits
| Event | Description |
|---|---|
select | Fired with the clicked tag string. Toggling off (clicking the active tag again to clear the filter) is the parent's responsibility — the pre-built /blog page compares against the current activeTag and resets it to '' |
AI Context
component: XBLTagList
package: "@xenterprises/nuxt-x-blog"
use-when: Filtering blog posts by tag on the listing page