DEV Community: bock-studio

Vue + XChainJS Example

bock-studio — Fri, 19 Dec 2025 10:39:47 +0000

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

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

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.

@xchainjs/xchain-util: Install, Use & Build Cross-Chain Crypto Apps (with TypeScript)

bock-studio — Fri, 19 Dec 2025 09:59:19 +0000

When building blockchain applications, reusability, consistency, and reliability are critical.
That’s exactly where @xchainjs/xchain-util shines.

In this article, we’ll cover:
What @xchainjs/xchain-util is
How to install it
How to use it in real projects
Why it’s one of the best utility libraries for multi-chain crypto development
How it fits into the XChainJS ecosystem

What is @xchainjs/xchain-util?

@xchainjs/xchain-util is a utility package for XChainJS, a TypeScript-based blockchain SDK designed to work with multiple blockchains through a unified API.

This package provides shared helper functions, types, and primitives that are used across the entire XChainJS ecosystem.

xchainjs
xchainjs util
blockchain utility library
multi-chain JavaScript SDK
TypeScript crypto utilities
THORChain JavaScript tools
cross-chain development

Why **@xchainjs/xchain-util **Exists

When building blockchain SDKs, many operations are repeated across chains:

Asset formatting
Decimal & amount conversions
Chain-agnostic helpers
Common types and constants
Validation utilities

Instead of duplicating this logic in every package, XChainJS centralizes it in @xchainjs/xchain-util.

👉 This leads to:

Cleaner code
Fewer bugs
Consistent behavior across blockchains

Installation

Installing @xchainjs/xchain-util is straightforward using npm or yarn
Using npm

`> bash

npm install @xchainjs/xchain-util`

Using yarn

`> bash

yarn add @xchainjs/xchain-util`

This package is typically used together with other XChainJS clients, such as:

@xchainjs/xchain-bitcoin
@xchainjs/xchain-ethereum
@xchainjs/xchain-thorchain

How to Use @xchainjs/xchain-util
Below are some real-world usage examples showing why this library is essential for blockchain developers.

Working with Assets
XChainJS represents assets in a standardized format across chains.

`> import { Asset, assetFromString } from '@xchainjs/xchain-util'

const asset: Asset | null = assetFromString('BTC.BTC')
if (asset) {
console.log(asset.chain) // BTC
console.log(asset.symbol) // BTC
}`
✅ This ensures consistent asset handling across all supported blockchains.

Amount & Decimal Utilities
Blockchain apps often struggle with precision and decimals.
@xchainjs/xchain-util provides safe helpers for that.

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

const amount = assetAmount(1.5)
const base = baseAmount(150000000)
console.log(amount.amount().toString())
console.log(base.amount().toString())`

This is crucial for:

Wallets
DeFi apps
Cross-chain swaps
AMMs (like THORChain

Chain-Agnostic Design
One of the biggest advantages of XChainJS is chain abstraction.

Thanks to @xchainjs/xchain-util, developers can write logic that works the same way for:

Bitcoin
Ethereum
THORChain
Binance Chain
Litecoin
And more This makes it ideal for cross-chain wallets and DeFi platforms.

Why @xchainjs/xchain-util Is the Best Utility Library for XChainJS

Let’s be honest: utility libraries are everywhere.
So why is this one special?

Built for Multi-Chain from Day One

Unlike generic crypto libraries, @xchainjs/xchain-util is designed specifically for cross-chain development.

TypeScript First

Strong typing means:

Fewer runtime errors
Better IDE autocomplete
Safer refactoring

Perfect for professional blockchain development.

Battle-Tested in Production

This package is used internally by:

THORChain tools
XChainJS clients
Real DeFi applications

That means it’s production-ready, not experimental.

Clean, Focused Scope

It does one thing well:

Provide shared utilities for blockchain SDKs

No bloat. No unnecessary abstractions.

When Should You Use @xchainjs/xchain-util*?*

You should use it if you are:

Building a crypto wallet
Developing a cross-chain DeFi app
Working with THORChain
Using XChainJS clients
Writing blockchain code in TypeScript / JavaScript

If any of those apply — this package is a no-brainer.

Final Thoughts
@xchainjs/xchain-util may look like a small helper package, but it plays a critical role in the XChainJS ecosystem.

It improves:

Code quality
Consistency
Developer experience
Cross-chain reliability

If you’re serious about blockchain development with JavaScript or TypeScript, this utility library is something you definitely want in your stack.

🔑 SEO Summary (for dev.to)

Primary keywords:

xchainjs
xchainjs util
blockchain utility library
TypeScript blockchain SDK
cross-chain JavaScript
Secondary keywords:
THORChain development
crypto utilities
DeFi JavaScript tools
multi-chain wallet development