Vue

The Vue adapter (@txnlab/use-wallet-vue) provides a plugin and composables for integrating use-wallet into Vue applications. This guide covers how to set up the adapter and use its features effectively.

Setup

After installing the package, any required wallet dependencies (see Installation), and configuring your WalletManager, install the WalletManager plugin in your Vue application:

// main.ts
import { createApp } from 'vue'
import { WalletManagerPlugin, NetworkId } from '@txnlab/use-wallet-vue'
import App from './App.vue'

const app = createApp(App)

app.use(WalletManagerPlugin, {
  wallets: [...],
  networks: {...},
  defaultNetwork: NetworkId.TESTNET
})

app.mount('#app')

The plugin makes the wallet functionality available throughout your application via Vue composables.

Using the Composables

The Vue adapter provides two composables for accessing wallet functionality. In v4.0.0, network-related features were moved from useWallet into a new useNetwork composable to provide better separation of concerns:

useWallet

The useWallet composable provides access to wallet management features. Here's an example showing some commonly used values:

<script setup lang="ts">
  import { useWallet } from '@txnlab/use-wallet-vue'

  const { 
    wallets,             // List of available wallets
    activeWallet,        // Currently active wallet
    activeAccount,       // Active account in active wallet
    activeAddress,       // Address of active account
    isReady,             // Whether all wallet providers have finished initialization
    signTransactions,    // Function to sign transactions
    transactionSigner,   // Typed signer for ATC and Algokit Utils
    algodClient          // Algod client for active network
  } = useWallet()
</script>

<template>
  <div>
    <div v-if="!isReady">Loading...</div>
    <div v-else>
      <div v-if="activeAddress">
        Connected: {{ activeAddress }}
      </div>
      <div v-else>
        Not connected
      </div>
    </div>
  </div>
</template>

For a complete list of all available properties and methods, see the useWallet API Reference.

useNetwork

The useNetwork composable serves two primary functions: managing the active network and supporting runtime node configuration.

<script setup lang="ts">
  import { useNetwork } from '@txnlab/use-wallet-vue'

  const {
    // Active network management
    activeNetwork,         // Currently active network
    setActiveNetwork,      // Function to change networks
    
    // Runtime node configuration
    networkConfig,         // Complete configuration for all networks
    activeNetworkConfig,   // Configuration for active network only
    updateAlgodConfig,     // Update a network's Algod configuration
    resetNetworkConfig     // Reset network config to initial values
  } = useNetwork()
</script>

<template>
  <div>
    <!-- Example: Network selector dropdown -->
    <select
      :value="activeNetwork"
      @change="(e) => setActiveNetwork(e.target.value)"
    >
      <option
        v-for="networkId in Object.keys(networkConfig)"
        :key="networkId"
        :value="networkId"
      >
        {{ networkId }}
      </option>
    </select>
  </div>
</template>

Active network management (previously part of useWallet) enables users to switch between different networks.

Runtime node configuration, introduced in v4.0.0, enables users to override the application's default node settings and connect to any Algorand node. See the Runtime Node Configuration guide for details about implementing this feature.

For a complete list of all available properties and methods, see the useNetwork API Reference.

Next Steps

• Check out the Connect Wallet Menu guide for creating a simple wallet connection interface

• Learn about transaction signing patterns in the Signing Transactions guide

• Explore network features in the Switching Networks and Runtime Node Configuration guides

• Read the API Reference for detailed documentation of the library's main exports

• Browse Example Projects for working implementations in Vite (Vue) and Nuxt