Vue + XChainJS Example

A minimal Vue starter using @xchainjs/xchain-util

This example demonstrates how to use XChainJS utilities inside a Vue 3 + TypeScript application.

The goal of this repository is to show:

• how to work with assets (BTC.BTC, ETH.ETH, THOR.RUNE)
• how to safely handle amounts and decimals
• how to structure a small Vue app around XChainJS utilities

👉 GitHub repository:
https://github.com/xchainjs/xchainjs-lib/tree/master/packages/xchain-bitcoin

Features

• Vue 3 + TypeScript
• @xchainjs/xchain-util integration
• Asset parsing & validation
• Human ↔ base amount conversion
• Simple service layer abstraction
• Ready to extend into wallet / DeFi app

Installation

Clone the repository and install dependencies:

git clone https://github.com/<your-org>/vue-xchainjs-example.git
cd vue-xchainjs-example
npm install

Run the development server:

npm run dev

Open your browser at:
http://localhost:5173

Dependencies

Main dependency used in this example:
npm install @xchainjs/xchain-util

The example is intentionally minimal and focuses only on core XChainJS utilities.

Usage
Asset parsing

Assets in XChainJS follow a standardized format:

<CHAIN>.<SYMBOL>

Examples:

• BTC.BTC
• ETH.ETH
• THOR.RUNE

In this example, asset parsing is handled via assetFromString.

import { assetFromString, assetToString } from '@xchainjs/xchain-util'

export function parseAsset(input: string) {
const asset = assetFromString(input)

if (!asset) {
throw new Error(Invalid asset string: ${input})
}

return assetToString(asset)
}
This guarantees consistent asset handling across chains.

Amount utilities

Crypto applications must distinguish between:

• human-readable amounts (e.g. 1.5 BTC)
• base amounts (e.g. 150000000 satoshis)

This example shows how to handle both safely.

Human amount

`import { assetAmount } from '@xchainjs/xchain-util'

const amount = assetAmount(1.5)
console.log(amount.amount().toString()) // "1.5"`

Base amount

`import { baseAmount } from '@xchainjs/xchain-util'

const base = baseAmount(150000000)
console.log(base.amount().toString()) // "150000000"`

Example service (recommended pattern)
All XChainJS logic is isolated inside a small service layer.

`import { assetFromString, assetToString, baseAmount, assetAmount } from '@xchainjs/xchain-util'

export const xchainService = {
normalizeAsset(input: string) {
const asset = assetFromString(input.trim().toUpperCase())
if (!asset) throw new Error('Invalid asset')
return assetToString(asset)
},

toBaseAmount(value: number, decimals: number) {
const factor = 10 ** decimals
return baseAmount(Math.round(value * factor))
},

toAssetAmount(value: number, decimals: number) {
const factor = 10 ** decimals
return assetAmount(value / factor)
}
}`
This pattern keeps Vue components clean and makes the logic reusable.

Example Vue component usage

`<br> import { ref } from &#39;vue&#39;<br> import { xchainService } from &#39;@/services/xchain&#39;</p> <p>const assetInput = ref(&#39;BTC.BTC&#39;)<br> const normalized = ref(&#39;&#39;)</p> <p>function handleParse() {<br> normalized.value = xchainService.normalizeAsset(assetInput.value)<br> }<br>

Parse asset

Result: {{ normalized }}

`

Project structure

src/
├─ components/
├─ services/
│ └─ xchain.ts
├─ App.vue
└─ main.ts

• services/ — all XChainJS logic
• components/ — UI only
• easy to extend with chain clients later

Extending this example
This starter can be extended to:

• add chain clients (xchain-bitcoin, xchain-ethereum)
• fetch balances
• build a portfolio tracker
• implement swap flows
• connect wallets

Summary

This example shows how to use @xchainjs/xchain-util in a real Vue application:

• clean asset parsing
• safe amount handling
• minimal but extensible structure

It is intended as a starting point for cross-chain wallets and DeFi frontends built with Vue and XChainJS.

Repository

➡️ Clone the example:
https://github.com//vue-xchainjs-example

Stars, issues and pull requests are welcome.