HiveAuthorPostList

Display top-level posts authored by a specific Hive account, with optional client-side tag filter and cursor-based Prev/Next pagination.

Uses bridge.get_account_posts

Fetches top-level posts from the Hive blockchain via the Bridge API for a specific account (sort is fixed to "posts"). Use the tag prop to additionally filter by a Hive tag (client-side filter on the returned page). Requires a HiveProvider wrapper.

Usage

<template>
  <HiveProvider>
    <HiveAuthorPostList account="hiveio" />
  </HiveProvider>
</template>

<script setup lang="ts">
import { HiveProvider, HiveAuthorPostList } from "@hiveio/honeycomb-vue";
</script>

Preview

Welcome to Hive - Getting Started Guide

@hiveio

312 87$124.50

Hive Improvement Proposals: How They Work

@hiveio

198 42$58.20

Building on Hive: Developer Resources

@hiveio

156 34$41.75

Page 1

Props

Prop	Type	Default	Description
`account`	`string`	required	Hive account name to fetch posts for
`tag`	`string`	-	Optional client-side tag filter applied to the returned page
`limit`	`number`	`20`	Posts per page (see Pagination note below)
`pinnedPosts`	`AccountPost[]`	-	Full `AccountPost` objects rendered above the list. Unlike `HivePostList`, no extra fetch is performed.
`variant`	`"card" \| "compact" \| "grid"`	`"compact"`	Layout variant for post items
`hide`	`("author" \| "thumbnail" \| "payout" \| "votes" \| "comments" \| "time")[]`	`[]`	Elements to hide from post cards
`linkTarget`	`string`	`"https://blog.openhive.network"`	Base URL for post links. Only `http(s)://` and root-relative paths are accepted; invalid values fall back to the default.
`class`	`string`	-	Additional CSS classes applied to the wrapper
`apiEndpoint`	`string`	from HiveProvider	Override the API endpoint for this component instance

Pagination behavior

The first page returns up to limit posts. Subsequent pages return up to min(limit, 19) posts because bridge.get_account_posts consumes one slot for the cursor (start_author / start_permlink). This is an upstream Hive API constraint, not a component limitation.

Tag filter

Combine account with tag to show only posts of that author tagged with a specific Hive tag. The filter is applied client-side to the returned page.

<template>
  <!-- Filter posts by an author and a specific tag. -->
  <HiveAuthorPostList
    account="hiveio"
    tag="hivedev"
  />
</template>

<script setup lang="ts">
import { HiveAuthorPostList } from "@hiveio/honeycomb-vue";
</script>

Pinned posts

Unlike HivePostList (which accepts { author, permlink } and refetches each pinned post), HiveAuthorPostList expects full AccountPost objects so pinned posts can be rendered without an extra API call (avoiding N+1 fetches).

<template>
  <HiveAuthorPostList
    account="hiveio"
    :pinned-posts="pinned"
  />
</template>

<script setup lang="ts">
import { HiveAuthorPostList } from "@hiveio/honeycomb-vue";
import type { AccountPost } from "@hiveio/honeycomb-core";

// Unlike HivePostList, pinned posts here are full AccountPost objects
// (no extra fetch — rendered directly).
const pinned: AccountPost[] = [
  /* full AccountPost objects from a previous fetch */
];
</script>

useHiveAuthorPostList Hook

For full control, use the useHiveAuthorPostList hook directly. It returns posts, loading state, and cursor-based pagination controls.

Return values

Property	Type	Description
`posts`	`Ref<AccountPost[]>`	Current page of posts authored by `account`
`isLoading`	`Ref<boolean>`	Whether data is being fetched
`error`	`Ref<Error \| null>`	Fetch error, if any
`page`	`Ref<number>`	Current page number (1-based)
`hasPrev` / `hasNext`	`Ref<boolean>`	Whether previous/next page exists
`prevPage` / `nextPage`	`() => void`	Navigate to previous/next page

Example

<template>
  <p v-if="feed.isLoading">Loading...</p>
  <p v-else-if="feed.error">Error: {{ feed.error.message }}</p>
  <div v-else>
    <p>Page {{ feed.page }}</p>
    <ul>
      <li
        v-for="p in feed.posts"
        :key="`${p.author}/${p.permlink}`"
      >
        {{ p.title }}
      </li>
    </ul>
    <button :disabled="!feed.hasPrev" @click="feed.prevPage()">Prev</button>
    <button :disabled="!feed.hasNext" @click="feed.nextPage()">Next</button>
  </div>
</template>

<script setup lang="ts">
import { useHiveAuthorPostList } from "@hiveio/honeycomb-vue";

const feed = useHiveAuthorPostList({
  account: "hiveio",
  limit: 10,
});
</script>

Post List Content Renderer