Composables Reference

Vue Composition API functions for state and logic.

Overview

Composables encapsulate reactive state and business logic, keeping components clean and focused on UI.

// Usage pattern
import { useComposable } from '../../composables/feature/useComposable.js'

const { data, loading, error, fetchData } = useComposable()

Authentication

useNostrAuth

Handles Nostr identity and authentication.

Location: src/composables/auth/useNostrAuth.js

Returns:

Property	Type	Description
pubkey	Ref<String>	User's public key
profile	Ref<Object>	User profile data
isConnected	Ref<Boolean>	Connection status
connect	Function	Connect identity
disconnect	Function	Disconnect

Usage:

import { useNostrAuth } from '../../composables/auth/useNostrAuth.js'

const { pubkey, profile, isConnected, connect } = useNostrAuth()

async function handleConnect() {
  await connect()
  console.log('Connected as:', pubkey.value)
}

Wallet

useLightningNetwork

Manages Lightning wallet via NWC.

Location: src/composables/wallet/useLightningNetwork.js

Returns:

Property	Type	Description
balance	Ref<Number>	Wallet balance in sats
isConnected	Ref<Boolean>	NWC connection status
loading	Ref<Boolean>	Loading state
connect	Function	Connect with NWC URL
disconnect	Function	Disconnect wallet
sendPayment	Function	Send Lightning payment
createInvoice	Function	Generate invoice

Usage:

import { useLightningNetwork } from '../../composables/wallet/useLightningNetwork.js'

const { balance, isConnected, connect, sendPayment } = useLightningNetwork()

async function connectWallet(nwcUrl) {
  await connect(nwcUrl)
}

async function pay(invoice) {
  const result = await sendPayment(invoice)
  return result
}

Content

useContent

Manages content creation and retrieval.

Location: src/composables/content/useContent.js

Returns:

Property	Type	Description
content	Ref<Array>	User's content
loading	Ref<Boolean>	Loading state
fetchContent	Function	Load content
publishNote	Function	Publish short note
publishArticle	Function	Publish long-form

useNostrLongForm

Long-form article operations (NIP-23).

Location: src/composables/content/useNostrLongForm.js

Returns:

Property	Type	Description
articles	Ref<Array>	User's articles
publish	Function	Publish article
update	Function	Update article
delete	Function	Delete article

useContentZaps

Track zaps on content.

Location: src/composables/content/useContentZaps.js

Returns:

Property	Type	Description
zapsPerContent	Ref<Map>	Zaps by content ID
totalZaps	Computed	Total zap count
totalSats	Computed	Total sats earned

Audience

useAudience

Audience analytics and data.

Location: src/composables/audience/useAudience.js

Returns:

Property	Type	Description
followers	Ref<Array>	Follower list
followerCount	Computed	Total followers
recentFollowers	Computed	Recent follows
fetchAudience	Function	Load data

useFollowLists

Manage follow lists.

Location: src/composables/audience/useFollowLists.js

Returns:

Property	Type	Description
lists	Ref<Array>	User's follow lists
createList	Function	Create new list
updateList	Function	Update list
deleteList	Function	Delete list
publishList	Function	Publish to Nostr

Campaigns

useCampaigns

Campaign management.

Location: src/composables/campaigns/useCampaigns.js

Returns:

Property	Type	Description
campaigns	Ref<Array>	User's campaigns
activeCampaigns	Computed	Active only
createCampaign	Function	Create campaign
updateCampaign	Function	Update campaign
deleteCampaign	Function	Delete campaign

Analytics

useEngagementMetrics

Engagement analytics data.

Location: src/composables/analytics/useEngagementMetrics.js

Returns:

Property	Type	Description
metrics	Ref<Object>	Engagement data
loading	Ref<Boolean>	Loading state
period	Ref<String>	Time period
setPeriod	Function	Change period
fetchMetrics	Function	Load metrics

Core

useBtcPrice

Bitcoin price tracking.

Location: src/composables/core/useBtcPrice.js

Returns:

Property	Type	Description
price	Ref<Number>	Current BTC/USD
loading	Ref<Boolean>	Loading state
satsToUsd	Function	Convert sats to USD

useNotifications

In-app notifications.

Location: src/composables/core/useNotifications.js

Returns:

Property	Type	Description
notifications	Ref<Array>	Active notifications
add	Function	Add notification
remove	Function	Remove notification
clear	Function	Clear all

useNostrConnections

Relay connection management.

Location: src/composables/core/useNostrConnections.js

Returns:

Property	Type	Description
relays	Ref<Array>	Connected relays
status	Ref<Object>	Connection status
addRelay	Function	Add relay
removeRelay	Function	Remove relay

Social

useBadges

Nostr badges.

Location: src/composables/social/useBadges.js

Returns:

Property	Type	Description
badges	Ref<Array>	User's badges
fetchBadges	Function	Load badges

useNostrChat

Chat functionality.

Location: src/composables/social/useNostrChat.js

Returns:

Property	Type	Description
messages	Ref<Array>	Chat messages
sendMessage	Function	Send message
subscribe	Function	Subscribe to chat

Creating Composables

Pattern

import { ref, computed, onMounted } from 'vue'

export function useFeature() {
  // State
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)

  // Computed
  const isEmpty = computed(() => !data.value || data.value.length === 0)

  // Methods
  async function fetchData() {
    loading.value = true
    error.value = null
    try {
      data.value = await api.fetch()
    } catch (e) {
      error.value = e.message
    } finally {
      loading.value = false
    }
  }

  // Initialize
  onMounted(() => {
    fetchData()
  })

  // Return public API
  return {
    data,
    loading,
    error,
    isEmpty,
    fetchData
  }
}

Best Practices

1. Return refs, not .value - Let consumers access reactivity
2. Handle loading/error - Always provide state indicators
3. Clean up - Use onUnmounted for subscriptions
4. Single responsibility - One domain per composable

Related

• Components Reference
• Codebase Structure
• NWC Integration