HivePostList

Post feed with sorting, pagination, pinned posts, and multiple layout variants. Supports global ranked posts, community feeds, and tag filtering.

Uses bridge.get_ranked_posts

Fetches posts from the Hive blockchain via the Bridge API. Use the tag prop to filter by community (e.g. hive-167922) or by tag (e.g. photography). Without a tag, returns global ranked posts. Requires HiveProvider wrapper.

Usage

<template>
  <HivePostList sort="trending" :limit="10" />
</template>

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

Preview

Pinned

Welcome to Hive - Getting Started Guide

@hiveio

312 87$124.50

Building DApps on Hive Blockchain

@barddev

89 24$15.30

Weekly Development Update #42

@hivebuzz

156 45$32.10

Understanding Resource Credits

@peakd

67 12$8.75

Page 1

Props

Prop	Type	Default	Description
`sort`	`"trending" \| "hot" \| "created" \| "payout" \| "muted"`	`"trending"`	Sort order for the post feed
`tag`	`string`	-	Community name (`hive-167922`) or tag (`photography`). Omit for global feed.
`limit`	`number`	`20`	Posts per page
`pinnedPosts`	`Array<{ author: string; permlink: string }>`	`[]`	Posts pinned at the top of the list
`showSortControls`	`boolean`	`false`	Show sort buttons above the list
`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
`class`	`string`	-	Additional CSS classes

useHivePostList Hook

For full control over the post feed, use the useHivePostList hook directly. It returns posts, loading state, pagination controls, and sort management.

Return values

Property	Type	Description
`posts`	`Ref<RankedPost[]>`	Current page of ranked posts
`isLoading`	`Ref<boolean>`	Whether data is being fetched
`error`	`Error \| null`	Fetch error, if any
`sort`	`Ref<SortType>`	Current sort method
`setSort`	`(sort: SortType) => void`	Change sort method (resets to page 1)
`page`	`Ref<number>`	Current page number
`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>
  <div v-else>
    <div class="flex gap-2 mb-4">
      <button
        v-for="s in sorts"
        :key="s"
        :class="{ 'font-bold': feed.sort === s }"
        @click="feed.setSort(s)"
      >
        {{ s }}
      </button>
    </div>

    <article v-for="post in feed.posts" :key="`${post.author}/${post.permlink}`">
      <h3>{{ post.title }}</h3>
      <p>by @{{ post.author }} - {{ post.payout_value }}</p>
    </article>

    <div class="flex gap-2 mt-4">
      <button :disabled="!feed.hasPrev" @click="feed.prevPage()">Previous</button>
      <span>Page {{ feed.page }}</span>
      <button :disabled="!feed.hasNext" @click="feed.nextPage()">Next</button>
    </div>
  </div>
</template>

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

const sorts = ["trending", "hot", "created"];
const feed = useHivePostList({ sort: "trending", tag: "hive", limit: 10 });
</script>

Examples

Community posts

Pass a community name (format hive-NNNNNN) as the tag prop to show posts from that community.

<template>
  <!-- Show posts from a specific community -->
  <HivePostList
    tag="hive-167922"
    sort="trending"
    show-sort-controls
    :limit="10"
  />
</template>

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

Tag filter

Pass any Hive tag to filter posts. Works with all sort options.

<template>
  <HivePostList
    tag="photography"
    sort="created"
    :limit="10"
  />
</template>

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

Sort controls

<template>
  <HivePostList
    sort="trending"
    tag="hive"
    show-sort-controls
  />
</template>

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

Pinned posts

<template>
  <HivePostList
    sort="created"
    :pinned-posts="pinned"
  />
</template>

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

const pinned = [
  { author: "hiveio", permlink: "welcome-to-hive" },
  { author: "barddev", permlink: "hive-ui-announcement" },
];
</script>

Variants

<template>
  <!-- Compact (default) - single-line rows -->
  <HivePostList sort="trending" variant="compact" />

  <!-- Card - full post cards with body preview -->
  <HivePostList sort="trending" variant="card" />

  <!-- Grid - responsive image grid -->
  <HivePostList sort="trending" variant="grid" />
</template>

Hide elements

<template>
  <!-- Hide specific elements from post items -->
  <HivePostList
    sort="trending"
    :hide="['thumbnail', 'payout', 'time']"
  />

  <!-- Available: "author" | "thumbnail" | "payout" | "votes" | "comments" | "time" -->
</template>

Post Card Content Renderer