WallPost
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
<XAWallPost />
The individual post card. Renders the author avatar with initials fallback, relative and absolute timestamps, tags, body text, file attachments, emoji reactions via XAWallReactions, and a reply toggle. An optional #actions slot renders a dropdown for post-level controls. A #replies slot receives the expandable reply section (typically XAWallReplies).
<XAWallPost
body="Hello team! Check out this update."
:timestamp="post.createdAt"
:user="{ name: 'Jane Smith', avatar: '/avatars/jane.jpg' }"
:reactions="post.reactions"
:tags="post.tags"
:reply-count="post.replyCount"
size="md"
@react="handleReact"
@reply="toggleReplies"
>
<template #replies>
<XAWallReplies :replies="post.replies" :expanded="repliesOpen" />
</template>
</XAWallPost>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
body | String | required | Post body text. |
timestamp | String | Date | Number | required | Post creation time. |
user | Object | required | Author object with name (required) and optional avatar. |
attachments | Array | [] | File attachment objects: { name, size, type?, url? }. |
tags | Array | [] | Tag objects: { label, color? }. |
reactions | Array | [] | Reaction objects: { emoji, count, reacted }. |
replyCount | Number | 0 | Number of replies (controls reply toggle visibility). |
pinned | Boolean | false | Renders a pinned indicator banner at the top. |
size | String | 'md' | Post size variant — 'sm', 'md', or 'lg'. |
showActions | Boolean | true | Enable the #actions slot area. |
showReplyButton | Boolean | true | Show reply button even when replyCount is 0. |
Events
| Event | Description |
|---|---|
react | Reaction toggled. Payload: { emoji, ... }. |
reply | Reply toggle button clicked. |
tag-click | A tag was clicked. Payload: tag object. |
attachment-click | An attachment row was clicked. Payload: file object. |
AI Context
component: XAWallPost
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Wall
use-when: Rendering a single post card with author, timestamp, body, attachments, tags, reactions, and a reply toggle. Use standalone when you need a single post card outside a feed context. Use #replies slot for XAWallReplies and #actions slot for post-level controls.