@cryptforge/client-vue

Vue 3 component library for building CryptForge cryptocurrency wallet applications. Provides pre-built, customizable components for authentication, wallet management, device synchronization, and onboarding flows.

Installation

``bash
npm install @cryptforge/client-vue vue@^3.0.0


or

pnpm add @cryptforge/client-vue vue@^3.0.0

or

yarn add @cryptforge/client-vue vue@^3.0.0
`

Note: Vue 3 is a peer dependency and must be installed separately.

Quick Start

`typescript
import { createApp } from 'vue';
import App from './App.vue';

// Import CryptForge Vue plugin and styles
import CryptforgeVue from '@cryptforge/client-vue';
import '@cryptforge/client-vue/dist/style.css';

const app = createApp(App);
app.use(CryptforgeVue);
app.mount('#app');
`

Features

- 🔐 Authentication Components - Complete authentication flows (create, restore, unlock)
- 💼 Wallet Components - Send, receive, transaction history, balance display
- 🔄 Sync Components - Device-to-device wallet synchronization
- 🚀 Onboarding Components - User onboarding and walkthrough screens
- ⚙️ Settings Components - Identity management, wallet settings
- 🎨 Customizable - Built with CSS modules for easy theming
- 📱 Responsive - Mobile-first design
- 🎯 Type-Safe - Full TypeScript support

Components

$3

####
Main authentication orchestrator component that manages the complete auth flow.

`vue



`

####
Component for generating and displaying a new BIP39 mnemonic seed phrase.

`vue



`

####
Component for verifying user has backed up their seed phrase.

`vue

`

####
Component for restoring a wallet from an existing seed phrase.

`vue

`

####
Component for creating a new wallet password.

`vue

`

####
Component for unlocking an existing wallet.

`vue

`

####
Component for naming a new wallet/keystore.

`vue

`

####
Component for selecting from multiple wallets/keystores.

`vue

`

$3

####
Main wallet component that displays balance and transaction history.

`vue



`

####
Compact wallet overview showing balance and quick actions.

`vue

`

####
Component for sending cryptocurrency.

`vue

`

####
Component for receiving cryptocurrency (displays QR code and address).

`vue

`

####
Transaction history component.

`vue

`

####
Transaction confirmation component.

`vue

`

####
Success screen after sending transaction.

`vue

`

$3

Components for synchronizing wallets across devices using peer-to-peer connections.

#### Admin (Primary Device)

#####
Entry point for device admin sync setup.

#####
Enable broadcasting for device discovery.

#####
Display PIN code for client device.

#####
Display QR code with connection key.

#####
Waiting for client connection.

#####
Client device discovered.

#####
Sync completion screen.

#### Client (Secondary Device)

#####
Entry point for client sync setup.

#####
Connect to admin device.

#####
Scan QR code or enter connection key.

#####
Enter PIN from admin device.

#####
Error handling for sync issues.

#### Shared

#####
Progress indicator for sync operations.

`vue

`

$3

####
Initial welcome/start screen.

`vue

`

####
Onboarding walkthrough with multiple slides.

`vue

`

####
Individual slide component for walkthrough.

`vue

`

$3

####
Root application wrapper component.

`vue

`

####
Setup completion screen.

`vue

`

$3

####
Wallet selector button for settings.

`vue

`

Composables

$3

Authentication state and operations.

`typescript
import { useAuth } from '@cryptforge/client-vue';

const {
// State
isUnlocked,
currentIdentity,
currentAddress,
currentChain,

// Methods
createIdentity,
unlock,
lock,
switchChain,
generateMnemonic,
} = useAuth();
`

$3

Wallet operations and balance management.

`typescript
import { useWallet } from '@cryptforge/client-vue';

const {
// State
balance,
transactions,
isLoading,

// Methods
sendTransaction,
getBalance,
refreshTransactions,
} = useWallet();
`

$3

Admin device sync operations.

`typescript
import { useSyncAdmin } from '@cryptforge/client-vue';

const {
// State
broadcastId,
connectionKey,
connectedClients,

// Methods
enableBroadcast,
waitForClient,
sendData,
} = useSyncAdmin();
`

$3

Client device sync operations.

`typescript
import { useSyncClient } from '@cryptforge/client-vue';

const {
// State
isConnected,
syncProgress,

// Methods
connectToAdmin,
verifyPIN,
receiveData,
} = useSyncClient();
`

$3

Application setup state.

`typescript
import { useSetup } from '@cryptforge/client-vue';

const {
setupComplete,
currentStep,
completeSetup,
} = useSetup();
`

$3

Application settings management.

`typescript
import { useSettings } from '@cryptforge/client-vue';

const {
settings,
updateSettings,
resetSettings,
} = useSettings();
`

$3

Theme management.

`typescript
import { useTheme } from '@cryptforge/client-vue';

const {
theme,
setTheme,
toggleTheme,
} = useTheme();
`

$3

Onboarding walkthrough state.

`typescript
import { useWalkthrough } from '@cryptforge/client-vue';

const {
currentSlide,
totalSlides,
nextSlide,
previousSlide,
skipWalkthrough,
} = useWalkthrough();
`

$3

Low-level CryptForge client access.

`typescript
import { useCryptForgeClient } from '@cryptforge/client-vue';

const { client } = useCryptForgeClient();
`

$3

Network presence and device discovery.

`typescript
import { useNetworkPresenceClient } from '@cryptforge/client-vue';

const {
isOnline,
nearbyDevices,
broadcast,
discover,
} = useNetworkPresenceClient();
`

Complete Example

`vue



`

Styling and Theming

All components use CSS modules for scoped styling. You can customize the look by:

$3

`css
:root {
--cryptforge-primary-color: #3b82f6;
--cryptforge-secondary-color: #8b5cf6;
--cryptforge-background: #ffffff;
--cryptforge-text: #1f2937;
--cryptforge-border: #e5e7eb;
--cryptforge-radius: 8px;
}
`

$3

`vue

`

$3

`typescript
import { useTheme } from '@cryptforge/client-vue';

const { setTheme } = useTheme();

// Apply custom theme
setTheme({
primaryColor: '#3b82f6',
backgroundColor: '#ffffff',
textColor: '#1f2937',
});
`

TypeScript Support

All components and composables are fully typed:

`typescript
import type {
AuthState,
WalletState,
Transaction,
} from '@cryptforge/client-vue';

const handleTransaction = (tx: Transaction) => {
console.log('Transaction:', tx.hash);
};
`

Browser Compatibility

- ✅ Chrome, Firefox, Safari, Edge (latest 2 versions)
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
- ✅ Electron (renderer process)

Related Packages

- @cryptforge/auth - Core authentication functionality
- @cryptforge/core - Core types and interfaces
- @cryptforge/key-exchange - Device sync functionality
- @cryptforge/blockchain-evm - EVM blockchain support
- @cryptforge/blockchain-btc - Bitcoin support

Examples

See complete examples in:
- examples/vue-web-example/ - Web application example
- examples/vue-electron-example/` - Electron application example

License

MIT