Solana Wallets Vue

Integrates Solana wallets in your Vue 3 applications.

⚡️ View demo / Browse demo code

Installation

To get started, you'll need to install the solana-wallets-vue npm package as well as the wallets adapters provided by Solana.

npm install solana-wallets-vue @solana/wallet-adapter-wallets

Setup

Next, you can install Solana Wallets Vue as a plugin like so.

import { createApp } from 'vue';
import App from './App.vue';
import SolanaWallets from 'solana-wallets-vue';

// You can either import the default styles or create your own.
import 'solana-wallets-vue/styles.css';

import { WalletAdapterNetwork } from "@solana/wallet-adapter-base"

import {
  PhantomWalletAdapter,
  SlopeWalletAdapter,
  SolflareWalletAdapter,
} from '@solana/wallet-adapter-wallets';

const walletOptions = {
  wallets: [
    new PhantomWalletAdapter(),
    new SlopeWalletAdapter(),
    new SolflareWalletAdapter({ network: WalletAdapterNetwork.Devnet }),
  ],
  autoConnect: true,
}

createApp(App)
  .use(SolanaWallets, walletOptions)
  .mount('#app');

This will initialise the wallet store and create a new $wallet global property that you can access inside any component.

Note that you can also initialise the wallet store manually using the initWallet method like so.

import { initWallet } from 'solana-wallets-vue';
initWallet(walletOptions);

Finally, import and render the WalletMultiButton component to allow users to select a wallet et connect to it.

<script setup>
import { WalletMultiButton } from 'solana-wallets-vue'
</script>

<template>
  <wallet-multi-button></wallet-multi-button>
</template>

If you prefer the dark mode, simply provide the dark boolean props to the component above.

<wallet-multi-button dark></wallet-multi-button>

Usage

You can then call useWallet() at any time to access the wallet store — or access the $wallet global propery instead.

Here's an example of a function that sends one lamport to a random address.

import { useWallet } from 'solana-wallets-vue';
import { Connection, clusterApiUrl, Keypair, SystemProgram, Transaction } from '@solana/web3.js';

export const sendOneLamportToRandomAddress = () => {
  const connection = new Connection(clusterApiUrl('devnet'))
  const { publicKey, sendTransaction } = useWallet();
  if (!publicKey.value) return;

  const transaction = new Transaction().add(
    SystemProgram.transfer({
      fromPubkey: publicKey.value,
      toPubkey: Keypair.generate().publicKey,
      lamports: 1,
    })
  );

  const signature = await sendTransaction(transaction, connection);
  await connection.confirmTransaction(signature, 'processed');
};

Anchor usage

If you're using Anchor, then you might want to define your own store that encapsulates useWallet into something that will also provide information on the current connection, provider and program.

import { computed } from 'vue'
import { useAnchorWallet } from 'solana-wallets-vue'
import { Connection, clusterApiUrl, PublicKey } from '@solana/web3.js'
import { AnchorProvider, Program } from '@project-serum/anchor'
import idl from '@/idl.json'

const preflightCommitment = 'processed'
const commitment = 'confirmed'
const programID = new PublicKey(idl.metadata.address)

const workspace = null
export const useWorkspace = () => workspace

export const initWorkspace = () => {
  const wallet = useAnchorWallet()
  const connection = new Connection(clusterApiUrl('devnet'), commitment)
  const provider = computed(() => new AnchorProvider(connection, wallet.value, { preflightCommitment, commitment }))
  const program = computed(() => new Program(idl, programID, provider.value))

  workspace = {
    wallet,
    connection,
    provider,
    program,
  }
}

This allows you to access the Anchor program anywhere within your application in just a few lines of code.

import { useWorkspace } from './useWorkspace'

const { program } = useWorkspace()
await program.value.rpc.myInstruction(/* ... */)

Configurations

The table below shows all options you can provide when initialising the wallet store. Note that some options accepts Ref types so you can update them at runtime and keep their reactivity.

Option	Type	Description
wallets	Wallet[] | Ref<Wallet[]>	The wallets available the use. Defaults to [].
autoConnect	Wallet[] | Ref<Wallet[]>	Whether or not we should try to automatically connect the wallet when loading the page. Defaults to false.
onError(error: WalletError)	void	Will be called whenever an error occurs on the wallet selection/connection workflow. Defaults to error => console.error(error).
localStorageKey	string	The key to use when storing the selected wallet type (e.g. Phantom) in the local storage. Defaults to walletName.

useWallet() references

The table below shows all the properties and methods you can get from useWallet().

Property/Method	Type	Description
wallets	Ref<Wallet[]>	The wallets available the use.
autoConnect	Ref<boolean>	Whether or not we should try to automatically connect the wallet when loading the page.
wallet	`Ref<Wallet	null>`
publicKey	`Ref<PublicKey	null>`
readyState	Ref<WalletReadyState>	The ready state of the selected wallet.
ready	Ref<boolean>	Whether the selected wallet is ready to connect.
connected	Ref<boolean>	Whether a wallet has been selected and connected.
connecting	Ref<boolean>	Whether we are connecting a wallet.
disconnecting	Ref<boolean>	Whether we are disconnecting a wallet.
select(walletName)	void	Select a given wallet.
connect()	Promise<void>	Connects the selected wallet.
disconnect()	Promise<void>	Disconnect the selected wallet.
sendTransaction(tx, connection, options)	Promise<TransactionSignature>	Send a transation whilst adding the connected wallet as a signer.
signTransaction	Function or undefined	Signs the given transaction. Undefined if not supported by the selected wallet.
signAllTransactions	Function or undefined	Signs all given transactions. Undefined if not supported by the selected wallet.
signMessage	Function or undefined	Signs the given message. Undefined if not supported by the selected wallet.

Nuxt 3 Setup

1. Create a new plugin, ex. plugins/solana.ts

import 'solana-wallets-vue/styles.css'
import SolanaWallets from 'solana-wallets-vue'
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
import {
  PhantomWalletAdapter,
  SlopeWalletAdapter,
  SolflareWalletAdapter,
} from '@solana/wallet-adapter-wallets'

const walletOptions = {
  wallets: [
    new PhantomWalletAdapter(),
    new SlopeWalletAdapter(),
    new SolflareWalletAdapter({ network: WalletAdapterNetwork.Devnet }),
  ],
  autoConnect: true,
}

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(SolanaWallets, walletOptions)
})

2. Update the nuxt.config.ts

export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss'],
    vite: {
        esbuild: {
            target: 'esnext',
        },
        build: {
            target: 'esnext',
        },
        optimizeDeps: {
            include: ['@project-serum/anchor', '@solana/web3.js', 'buffer'],
            esbuildOptions: {
                target: 'esnext'
            }
        },
        define: {
            'process.env.BROWSER': true
        }
    }
})

3. On your app.vue

<script lang="ts" setup>
import { WalletMultiButton } from 'solana-wallets-vue'
</script>

<template>
  <ClientOnly>
     <WalletMultiButton />
  </ClientOnly>
</template>