Skip to content

Vue プラグイン

基本セットアップ

ts
// main.ts
import { createApp } from 'vue'
import { VueKaspa } from 'vue-kaspa'
import App from './App.vue'

const app = createApp(App)

app.use(VueKaspa, {
  network: 'mainnet',
  autoConnect: true,
})

app.mount('#app')

autoConnect: true (デフォルト) を指定すると、Vue Kaspa はプラグインのインストール時に WASM モジュールを自動的に初期化し、Kaspa ノードに接続します。コンポーネント内での追加セットアップは不要です。

プラグインオプション

すべてのオプションは省略可能です。

オプションデフォルト説明
networkKaspaNetwork'mainnet'接続するネットワーク
urlstringカスタム RPC WebSocket URL (例: 'ws://127.0.0.1:17110')。resolver とは排他的。
resolverbooleantrueurl が設定されていない場合に公開 Kaspa ノードリゾルバーを使用する
encodingRpcEncoding'Borsh'ワイヤーエンコーディング — 'Borsh' または 'SerdeJson'
autoConnectbooleantrueプラグインインストール時に WASM の初期化と RPC 接続を自動実行する
devtoolsboolean開発時は trueVue DevTools 統合をインストールする
panicHook'console' | 'browser' | false'console'WASM パニックハンドラー。'browser' はダイアログを表示、false は無効化。

カスタムノードへの接続

url を指定すると、公開リゾルバーをバイパスして独自のノードに接続できます:

ts
app.use(VueKaspa, {
  network: 'testnet-10',
  url: 'ws://127.0.0.1:17210',
})

url を指定した場合、resolver は自動的に false に設定されます。

手動初期化

autoConnect を無効にすることで、WASM のロードと RPC 接続のタイミングを制御できます:

ts
app.use(VueKaspa, {
  network: 'mainnet',
  autoConnect: false,
})

その後、コンポーネント内で手動で初期化します — たとえばユーザー操作の後に:

vue
<script setup lang="ts">
import { useKaspa, useRpc } from 'vue-kaspa'

const kaspa = useKaspa()
const rpc = useRpc()

async function connect() {
  await kaspa.init()   // load WASM
  await rpc.connect()  // open WebSocket connection
}
</script>

Testnet / Devnet

ts
app.use(VueKaspa, {
  network: 'testnet-10',
  // resolver automatically picks a testnet-10 node
})

利用可能なネットワーク: 'mainnet' | 'testnet-10' | 'testnet-12' | 'simnet' | 'devnet'

プラグインのべき等性

app.use(VueKaspa) を複数回呼び出しても何も起こりません — プラグインは既存のインストールを確認し、再初期化を黙って無視します。

Released under the MIT License.