Honeycomb Vue

Vue 3 composables and components for Hive Blockchain applications. Read-only (passive) - displays blockchain data without auth or transaction signing.

Documentation | GitHub | npm

Installation

npm install @hiveio/honeycomb-vue
# or
pnpm add @hiveio/honeycomb-vue
# or
yarn add @hiveio/honeycomb-vue
# or
bun add @hiveio/honeycomb-vue

Peer Dependencies

npm install @hiveio/wax radix-vue vue
# or
pnpm add @hiveio/wax radix-vue vue
# or
yarn add @hiveio/wax radix-vue vue
# or
bun add @hiveio/wax radix-vue vue

radix-vue is only required if you use the ApiTracker component (optional peer dependency).

Styles

Import the bundled stylesheet in your entry file (e.g. main.ts):

import "@hiveio/honeycomb-vue/styles.css";

Includes CSS variables, component styles, Tailwind utilities, and theme tokens.

Quick Start

<!-- App.vue -->
<script setup lang="ts">
import { HiveProvider } from "@hiveio/honeycomb-vue";
import "@hiveio/honeycomb-vue/styles.css";
</script>

<template>
  <HiveProvider>
    <router-view />
  </HiveProvider>
</template>

<!-- Page.vue -->
<script setup lang="ts">
import { useHive, HiveAvatar, UserCard } from "@hiveio/honeycomb-vue";

const { chain, isLoading, error, status } = useHive();
</script>

<template>
  <div v-if="isLoading">Connecting to Hive...</div>
  <div v-else-if="error">Error: {{ error }}</div>
  <div v-else>
    <p>Status: {{ status }}</p>
    <HiveAvatar username="blocktrades" size="lg" />
    <UserCard username="blocktrades" variant="expanded" />
  </div>
</template>

Documentation

Full API reference, live examples, and guides:

honeycomb.bard-dev.com/docs/vue/introduction

• HiveProvider configuration
• Composables API
• Components (HiveAvatar, UserCard, BalanceCard, ApiTracker, HiveManabar, HivePostCard, HivePostList, HiveContentRenderer)
• SSR compatibility
• TypeScript types

License

MIT