Hooks

Access the Hive blockchain connection, chain object, and account data through framework-specific hooks.

useHive()

Returns the full Hive context including the chain object, connection status, and endpoint information. This is the primary hook for accessing blockchain connectivity.

Property	Type	Description
`chain`	`IHiveChainInterface \| null`	Hive chain instance for API calls
`isLoading`	`boolean`	True while connecting to blockchain
`error`	`string \| null`	Error message if connection failed
`apiEndpoint`	`string \| null`	Currently active API endpoint URL
`status`	`ConnectionStatus`	Connection state: connecting \| connected \| reconnecting \| disconnected \| error
`endpoints`	`EndpointStatus[]`	Health status of all configured endpoints
`refreshEndpoints`	`() => Promise<void>`	Manually trigger endpoint health checks

Vue Refs

All values are Vue Refs — access via .value in script, auto-unwrapped in templates.

<template>
  <div>
    <p v-if="isLoading">Connecting to Hive...</p>
    <p v-else-if="error">Error: {{ error }}</p>
    <div v-else>
      <p>Status: {{ status }}</p>
      <p>Endpoint: {{ apiEndpoint }}</p>
      <p>Healthy: {{ healthy_count }}</p>
      <button @click="refreshEndpoints">Refresh Endpoints</button>
    </div>
  </div>
</template>

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

const { chain, isLoading, error, apiEndpoint, status, endpoints, refreshEndpoints } =
  useHive();

// All values are Vue Refs - access via .value in script, auto-unwrapped in template
const healthy_count = computed(() =>
  endpoints.value.filter((ep) => ep.healthy).length
);
</script>

useHiveChain()

Returns the chain object directly. Use this when you only need the chain and want to keep destructuring minimal. The chain object provides access to all Hive blockchain APIs.

Chain API

The chain object is an IHiveChainInterface from @hiveio/wax. Use it to call blockchain APIs like chain.api.database_api.find_accounts() or chain.api.database_api.get_dynamic_global_properties().

<template>
  <div>
    <button @click="fetch_account">Fetch Account</button>
    <button @click="fetch_global_props">Fetch Global Props</button>
  </div>
</template>

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

const props = defineProps<{ username: string }>();

// Returns a Vue Ref
const chain = useHiveChain();

async function fetch_account() {
  if (!chain.value) return;

  const result = await chain.value.api.database_api.find_accounts({
    accounts: [props.username],
  });
  // result.accounts[0] contains full account data
}

async function fetch_global_props() {
  if (!chain.value) return;

  const result =
    await chain.value.api.database_api.get_dynamic_global_properties({});
  // result.head_block_number, result.current_supply, etc.
}
</script>

useApiEndpoint()

Returns the currently active API endpoint URL. Returns null when not connected.

<template>
  <p>Connected to: {{ apiEndpoint ?? "none" }}</p>
</template>

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

// Returns a Ref - auto-unwrapped in template
const apiEndpoint = useApiEndpoint();
</script>

useHiveStatus()

Returns connection status and endpoint health information.

Field	Type	Description
`url`	`string`	Endpoint URL
`healthy`	`boolean`	Whether the endpoint is responding
`lastCheck`	`number \| null`	Timestamp of last health check
`lastError`	`string \| null`	Last error message if unhealthy

<template>
  <div>
    <p>Status: {{ status }}</p>
    <p>Healthy: {{ healthy_count }} / {{ endpoints.length }}</p>
    <ul>
      <li v-for="ep in endpoints" :key="ep.url">
        {{ ep.url }} - {{ ep.healthy ? "OK" : ep.lastError ?? "unhealthy" }}
      </li>
    </ul>
  </div>
</template>

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

// Returns { status: Ref, endpoints: Ref }
const { status, endpoints } = useHiveStatus();
const healthy_count = computed(
  () => endpoints.value.filter((ep) => ep.healthy).length
);
</script>

useHiveAccount(username)

Fetches account data from the Hive blockchain. Handles loading and error states automatically.

Param	Type	Description
`username`	`string`	Hive account username to fetch

Property	Type	Description
`account`	`HiveAccount \| null`	Account data (name, balance, hbd_balance, post_count, etc.)
`isLoading`	`boolean`	True while fetching account data
`error`	`Error \| null`	Error if fetch failed
`refetch`	`() => void`	Manually re-fetch account data

Vue Refs

All values are Vue Refs — access via .value in script, auto-unwrapped in templates.

<template>
  <div>
    <p v-if="isLoading">Loading account...</p>
    <p v-else-if="error">Error: {{ error.message }}</p>
    <p v-else-if="!account">Account not found</p>
    <div v-else>
      <h2>{{ account.name }}</h2>
      <p>Balance: {{ account.balance }}</p>
      <p>HBD: {{ account.hbd_balance }}</p>
      <p>Posts: {{ account.post_count }}</p>
      <p>Joined: {{ account.created }}</p>
      <button @click="refetch">Refresh</button>
    </div>
  </div>
</template>

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

const props = defineProps<{ username: string }>();

const { account, isLoading, error, refetch } = useHiveAccount(props.username);
</script>

Hive Provider Theming