Vue + XChainJS Example

Source: Dev.to

Overview

A minimal Vue starter using @xchainjs/xchain-util.

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

Goals

• Work with assets (BTC.BTC, ETH.ETH, THOR.RUNE)
• Safely handle amounts and decimals
• Structure a small Vue app around XChainJS utilities

👉 GitHub repository:

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

git clone https://github.com//vue-xchainjs-example.git
cd vue-xchainjs-example
npm install

Run the development server:

npm run dev

Open your browser at .

Dependencies

npm install @xchainjs/xchain-util

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

Usage

Asset parsing

Assets in XChainJS follow the format . (e.g., BTC.BTC, ETH.ETH, THOR.RUNE).

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);
}

Amount utilities

Crypto applications must distinguish between:

• Human‑readable amounts (e.g., 1.5 BTC)
• Base amounts (e.g., 150000000 satoshis)

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);
  },
};

Example Vue component usage

import { ref } from 'vue';
import { xchainService } from '@/services/xchain';

const assetInput = ref('BTC.BTC');
const normalized = ref('');

function handleParse() {
  normalized.value = xchainService.normalizeAsset(assetInput.value);
}

<!-- Template snippet -->
<div>
  <input v-model="assetInput" placeholder="Enter asset (e.g., BTC.BTC)" />
  <button @click="handleParse">Parse asset</button>
  <p>Result: {{ normalized }}</p>
</div>

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

• 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 serves as a starting point for cross‑chain wallets and DeFi front‑ends built with Vue and XChainJS.

Repository

➡️ Clone the example: /vue-xchainjs-example

Stars, issues, and pull requests are welcome.