Pengantar

Vue Kaspa adalah plugin Vue 3 yang menyediakan composable reaktif untuk berinteraksi dengan blockchain Kaspa. Plugin ini membungkus @vue-kaspa/kaspa-wasm — SDK WebAssembly resmi — dan mengekspos fungsionalitasnya melalui API Vue 3 yang idiomatis.

Apa yang Anda dapatkan

Sebelas composable plus satu facade terpadu mencakup alur kerja lengkap:

Komposabel	Fungsi
useKaspa	Siklus hidup inisialisasi WASM
useRpc	Koneksi RPC WebSocket, query, dan event
useKaspaRest	Query REST API resmi untuk txid, saldo, riwayat alamat, dan data explorer
useUtxo	Pelacakan UTXO real-time dan saldo reaktif
useTransaction	Pembuatan, penandatanganan, dan pengiriman transaksi
useTransactionListener	Melacak transaction ID yang accepted dan sender address
useBlockListener	Mendengarkan blok baru yang ditambahkan
useCrypto	Pembuatan kunci, derivasi HD, penandatanganan, konversi unit
useNetwork	Pergantian jaringan (mainnet, testnet, dll.)
useWallet	Koneksi ke extension wallet browser (KasWare, Kastle)
useVueKaspa	Facade terpadu yang diketik untuk seluruh stack

Arsitektur

┌─────────────────────────────────────────────────────┐
│  Komponen Vue / halaman Nuxt Anda                   │
│  useRpc()  useUtxo()  useTransaction()  useCrypto() │
└──────────────────────┬──────────────────────────────┘
                       │ Vue reactivity
┌──────────────────────▼──────────────────────────────┐
│  Singleton internal (dibagi ke semua komponen)      │
│  RpcManager · WasmLoader · EventBridge              │
└──────────────────────┬──────────────────────────────┘
                       │ WASM calls
┌──────────────────────▼──────────────────────────────┐
│  @vue-kaspa/kaspa-wasm (WebAssembly)                           │
│  RpcClient · PrivateKey · XPrv · createTransactions │
└─────────────────────────────────────────────────────┘

Singleton internal bersifat module-level — terdapat satu koneksi RPC dan satu instance WASM per aplikasi, yang dibagi ke semua instance composable. Ini disengaja: sebuah tab browser tidak seharusnya membuka banyak koneksi WebSocket ke node Kaspa.

Permukaan API publik

// Plugin
import { VueKaspa } from 'vue-kaspa'

// Komposabel
import { useKaspa, useRpc, useKaspaRest, useUtxo, useTransaction, useTransactionListener, useBlockListener, useCrypto, useNetwork, useWallet, useVueKaspa } from 'vue-kaspa'

// Kelas error
import { KaspaError, KaspaNotReadyError, KaspaRpcError, KaspaWalletError, KaspaCryptoError } from 'vue-kaspa'

// Tipe (TypeScript)
import type { VueKaspaOptions, KaspaNetwork, UtxoEntry, PendingTx, /* ... */ } from 'vue-kaspa'

// Konstanta
import { AVAILABLE_NETWORKS } from 'vue-kaspa'

Dependensi peer

Paket	Versi
vue	>=3.4.0
@vue-kaspa/kaspa-wasm	>=1.1.0
@nuxt/kit	^3.0.0 (opsional — hanya diperlukan untuk modul Nuxt)

Prinsip desain

• State singleton — satu koneksi RPC dan satu instance WASM per aplikasi. Memanggil useRpc() dari 10 komponen semuanya mengembalikan state reaktif yang sama.
• Lazy loading WASM — modul WASM tidak dimuat sampai useKaspa().init() dipanggil (atau secara otomatis saat plugin dipasang ketika autoConnect: true).
• Auto-cleanup — composable yang digunakan di dalam komponen Vue secara otomatis membersihkan subscription dan event handler saat onUnmounted.
• TypeScript-first — semua tipe kembalian composable, opsi, dan struktur data sepenuhnya diketik melalui antarmuka yang diekspor.
• Tree-shakeable — integrasi DevTools diimpor secara dinamis dan tidak ada dalam bundle produksi ketika devtools: false.