WallFeed
Wall
The Wall category provides a complete social feed system. XAWallFeed is the top-level orchestrator; it renders pinned and regular post lists, delegates search/filter to a toolbar, and shows appropriate empty or loading states. Individual posts are rendered by XAWallPost. The remaining components — XAWallInput, XAWallReplies, XAWallReactions, and XAWallTags — can be composed independently or are automatically used inside XAWallFeed and XAWallPost.
Components
<XAWallFeed />
The main feed container. It separates pinned posts (rendered with a highlighted border) from regular posts, wires up search and filter toolbars, handles reply expansion state, and delegates load-more pagination. When no posts exist it shows XAStateEmpty; during a search with no results it shows a search-empty state.
<XAWallFeed
:posts="posts"
:pinned-posts="pinnedPosts"
:has-more="hasMorePages"
:loading-more="loading"
searchable
filterable
:filter-options="filterOptions"
@load-more="fetchNextPage"
@react="handleReaction"
@reply="handleReply"
@tag-click="filterByTag"
>
<template #input>
<XAWallInput v-model="newPost" @submit="createPost" />
</template>
<template #post-actions="{ post }">
<UButton size="xs" icon="i-lucide-pin" variant="ghost" @click="pin(post)" />
</template>
</XAWallFeed>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
posts | Array | [] | Array of regular post objects. |
pinnedPosts | Array | [] | Array of pinned post objects (rendered above regular posts). |
hasMore | Boolean | false | Show the load-more button. |
loadingMore | Boolean | false | Set the load-more button to loading state. |
loadMoreText | String | 'Load more posts' | Label for the load-more button. |
postSize | String | 'md' | Size passed to each XAWallPost — 'sm', 'md', or 'lg'. |
showPostActions | Boolean | true | Enable the actions slot on each post. |
searchable | Boolean | false | Show the search input in the toolbar. |
filterable | Boolean | false | Show filter controls in the toolbar. |
search | String | '' | v-model search value (emits update:search). |
filters | Object | {} | v-model filter values (emits update:filters). |
filterOptions | Array | [] | Filter option definitions passed to the toolbar. |
debounce | Number | 300 | Debounce delay in ms for search input. |
searchPlaceholder | String | 'Search posts...' | Placeholder for the search field. |
emptyTitle | String | 'No posts yet' | Empty state heading. |
emptyDescription | String | 'Posts will appear here once added.' | Empty state body text. |
emptyIcon | String | 'i-lucide-message-square' | Empty state icon. |
searchEmptyTitle | String | 'No posts found' | Search-empty state heading. |
searchEmptyDescription | String | 'Try adjusting your search or filters.' | Search-empty state body text. |
Events
| Event | Description |
|---|---|
load-more | User clicked load more. |
react | Reaction toggled on a post. Payload: { post, emoji }. |
reply | Reply toggle clicked. Payload: { post, expanded }. |
reply-react | Reaction toggled on a reply. |
pin | Pin action triggered (via post-actions slot). |
tag-click | A tag chip was clicked. Payload: tag object. |
attachment-click | An attachment was clicked. Payload: { post, file }. |
load-replies | Load more replies requested for a post. |
update:search | Search value changed. |
update:filters | Filter values changed. |
clear-filters | Clear filters button clicked. |
AI Context
component: XAWallFeed
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Wall
use-when: Building a top-level social/activity feed. Pass posts and pinnedPosts arrays; it handles layout, search, filters, empty states, and reply expansion automatically. Use the #input slot for the post composer and #post-actions for per-post controls.