@tbbn/sdk-vue

Vue 3 composables for the TBBN Platform API. Mount TbbnProvider once near the root of your app; any descendant can then read listings, offers, trade sessions and more with a composable, or reach the full typed client for anything else.

Install

npm install @tbbn/sdk-vue

Vue 3.3 or later is a peer dependency.

Quick start

<script setup lang="ts">
import { useOffers, useTbbnClient } from '@tbbn/sdk-vue';

const props = defineProps<{ sellerId: string }>();
const { data: offers, loading, error, refetch } = useOffers(() => props.sellerId, 'received');
const client = useTbbnClient();

const accept = async (id: string) => {
  await client.offers.accept(id, props.sellerId);
  refetch();
};
</script>

<template>
  <p v-if="loading">Loading…</p>
  <p v-else-if="error">{{ error.message }}</p>
  <ul v-else>
    <li v-for="offer in offers" :key="offer.id">
      {{ offer.status }}
      <button @click="accept(offer.id)">Accept</button>
    </li>
  </ul>
</template>

Wrap the tree in <TbbnProvider :options="{ baseUrl, accessToken }"> once. A complete example is in example/OffersInbox.vue.

What's included

• TbbnProvider / useTbbnClient() — a renderless provider component and its composable, built on provide/inject. The client is constructed once in setup().
• useQuery(fn, enabled?) — the fetch + refetch() composable every resource composable is built on. Built on watchEffect, so it re-runs whenever a reactive value it reads changes. No caching or deduplication; swap in a query library if your app needs that.
• Resource composables: useListing, useListings, useOffers, useTradeSession, useTradeSessions, useRecommendations, useNotifications, useReputationScore. Every id argument accepts a plain value, a Ref, or a getter, and waits until it resolves to a defined value before fetching.

Mutations (create, accept, cancel…) are one-off calls from event handlers, not composables — use useTbbnClient() for those.

Support

Questions and bug reports: the developer community.

License

MIT © Trade By Barter Network, Inc.