nuxt-x-blog
PostList
Paginated grid of XBLPostCard items for the blog listing page.
PostList
The XBLPostList component renders a responsive grid of XBLPostCard items and wires up pagination. It is the primary layout component for the /blog listing page.
Components
<XBLPostList />
Accepts a posts array and renders each entry as an XBLPostCard. Pass total and current page to enable XBLPagination at the bottom.
<XBLPostList
:posts="posts"
:total="total"
:page="page"
:total-pages="totalPages"
@page-change="page = $event"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
posts | BlogPost[] | required | Array of post objects to display |
total | number | 0 | Total number of posts (for pagination label) |
page | number | 1 | Current page number |
totalPages | number | 1 | Total number of pages |
Emits
| Event | Description |
|---|---|
page-change | Fired with the new page number when the user navigates |
AI Context
component: XBLPostList
package: "@xenterprises/nuxt-x-blog"
use-when: Rendering the full paginated blog listing with post cards