@coin-voyage/vue

@coin-voyage/vue

CoinVoyage PayKit and SwapKit components for Vue 3 and Nuxt.

The components wrap @coin-voyage/embed, the framework-agnostic CoinVoyage runtime. It ships with its own wallet providers, so your app needs no React, wagmi or wallet adapter setup.

Installation

npm install @coin-voyage/vue

Requires Vue 3.3 or later.

Pay button

Pass either an existing orderId or deposit parameters.

<script setup lang="ts">
import { CoinVoyagePay } from "@coin-voyage/vue"

function onComplete(event: unknown) {
  // Display only. Verify the payment on your server before fulfilling an order.
}
</script>

<template>
  <CoinVoyagePay
    api-key="YOUR_PUBLIC_API_KEY"
    wallet-connect-project-id="YOUR_WALLETCONNECT_PROJECT_ID"
    :deposit="{ toChain: 8453, toAmount: 25, toAddress: '0x...' }"
    button-text="Donate now"
    mode="dark"
    @complete="onComplete"
    @error="console.error"
  />
</template>

SALE orders must be created by a trusted backend, for example with ApiClient from @coin-voyage/paykit/server, and passed in as order-id. Never put a signing secret in browser code.

Swap widget

<script setup lang="ts">
import { CoinVoyageSwap } from "@coin-voyage/vue"
</script>

<template>
  <CoinVoyageSwap
    api-key="YOUR_PUBLIC_API_KEY"
    :default-source-currency="{ chain_id: 1 }"
    :default-slippage-bps="50"
    :appearance="{ accent: '#d6296f', accentHover: '#b8225f', accentText: '#ffffff' }"
  />
</template>

Props

Both components:

CoinVoyagePay:

CoinVoyageSwap:

Changing any prop remounts the widget, which resets an in-progress payment. Keep props stable while a payment is open.

Events

Events are UI notifications, not proof of payment. Merchant fulfillment requires server-side verification.

Nuxt and SSR

The runtime is imported in the browser only, after the component mounts. On the server the components render an empty <div>, so no <ClientOnly> wrapper is needed.

Composable

useCoinVoyage mounts a widget into your own element.

import { ref } from "vue"
import { useCoinVoyage } from "@coin-voyage/vue"

const element = ref<HTMLElement>()
useCoinVoyage(element, () => ({ widget: "swap", apiKey: "YOUR_PUBLIC_API_KEY" }))

Notes

• Render widgets in the top-level page, not in an iframe. Wallet discovery does not work across frames.
• Widgets on one page share browser wallet sessions. Avoid running several payments at once.
• The runtime is large (about 1 MB gzipped). It loads as separate chunks after mount and does not affect your initial bundle.