Vue composables for Solana

Embedded Wallets provides a set of Vue composables for basic Solana wallet operations. These composables are designed to simplify common Solana interactions in your Vue app.

info

For building transactions, use @solana/kit and @solana-program/system with the composables provided.

Install @solana/kit and @solana-program/system to build and sign Solana transactions with the Embedded Wallets Vue SDK.

info

Web3Auth provides Vue composables for common Solana wallet operations. Import them from @web3auth/modal/vue/solana.

npm

npm install @solana/kit @solana-program/system

Yarn

yarn add @solana/kit @solana-program/system

pnpm

pnpm add @solana/kit @solana-program/system

Bun

bun add @solana/kit @solana-program/system

Solana composables

Composable Name	Description
useSignAndSendTransaction	Sign and send a Solana transaction.
useSignMessage	Sign a message with the Solana wallet.
useSignTransaction	Sign a Solana transaction (without sending).
useSolanaWallet	Access Solana accounts, RPC client, and wallet.

Composable usage examples

Get Solana wallet

<script setup lang="ts">
  import { useSolanaWallet } from '@web3auth/modal/vue/solana'

  const { accounts, rpc } = useSolanaWallet()
</script>

<template>
  <div>
    <h2>Solana wallet</h2>
    <p v-if="accounts?.[0]">Address: {{ accounts[0] }}</p>
    <p>RPC ready: {{ rpc ? 'Yes' : 'No' }}</p>
  </div>
</template>

Fetch balance

getBalance.vue

<script setup lang="ts">
  import { address, createSolanaRpc } from '@solana/kit'
  import { ref } from 'vue'
  import { useWeb3Auth } from '@web3auth/modal/vue'
  import { useSolanaWallet } from '@web3auth/modal/vue/solana'

  const { web3Auth } = useWeb3Auth()
  const { accounts } = useSolanaWallet()

  const balance = ref<string | null>(null)
  const loading = ref(false)
  const error = ref<string | null>(null)

  async function fetchBalance() {
    const rpcTarget = web3Auth.value?.currentChain?.rpcTarget
    if (!rpcTarget || !accounts.value?.length) return

    loading.value = true
    error.value = null
    try {
      const rpc = createSolanaRpc(rpcTarget)
      const { value } = await rpc.getBalance(address(accounts.value[0])).send()
      balance.value = `${Number(value) / 1e9} SOL`
    } catch (e) {
      error.value = e instanceof Error ? e.message : 'Failed to fetch balance.'
    } finally {
      loading.value = false
    }
  }
</script>

<template>
  <div>
    <h2>Balance</h2>
    <div v-if="balance">{{ balance }}</div>
    <button type="button" class="card" :disabled="loading" @click="fetchBalance">
      {{ loading ? 'Fetching...' : 'Fetch Balance' }}
    </button>
    <div v-if="error" class="error">Error: {{ error }}</div>
  </div>
</template>

Sign message

SignMessage.vue

<script setup lang="ts">
  import { useSignMessage } from '@web3auth/modal/vue/solana'

  const { signMessage, loading, error, data } = useSignMessage()

  function submit(event: Event) {
    event.preventDefault()
    const formData = new FormData(event.target as HTMLFormElement)
    const message = formData.get('message')?.toString().trim()
    if (!message) return
    void signMessage(message)
  }
</script>

<template>
  <form @submit.prevent="submit">
    <input name="message" placeholder="Message" required />
    <button :disabled="loading" type="submit">
      {{ loading ? 'Signing...' : 'Sign message' }}
    </button>
    <p v-if="data">Message hash: {{ data }}</p>
    <p v-if="error">Error: {{ error.message }}</p>
  </form>
</template>

Sign transaction

SignTransaction.vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { useWeb3Auth } from '@web3auth/modal/vue'
  import { useSolanaWallet, useSignTransaction } from '@web3auth/modal/vue/solana'

  import { buildSolTransferTransaction } from '../solana/transfer'

  const { web3Auth } = useWeb3Auth()
  const { accounts } = useSolanaWallet()
  const {
    data: signedTransaction,
    error,
    loading: isPending,
    signTransaction,
  } = useSignTransaction()
  const formError = ref<string | null>(null)

  async function submit(event: Event) {
    event.preventDefault()
    formError.value = null

    const rpcTarget = web3Auth.value?.currentChain?.rpcTarget
    if (!rpcTarget || !accounts.value?.length) return

    const form = new FormData(event.target as HTMLFormElement)
    const to = form.get('address')?.toString().trim() ?? ''
    const amountSol = Number(form.get('value'))
    if (!to || !Number.isFinite(amountSol) || amountSol <= 0) {
      formError.value = 'Enter a valid recipient address and a positive amount.'
      return
    }

    try {
      const transaction = await buildSolTransferTransaction(
        rpcTarget,
        accounts.value[0],
        to,
        amountSol
      )
      await signTransaction(transaction)
    } catch (err) {
      formError.value = err instanceof Error ? err.message : 'Failed to sign transaction.'
    }
  }
</script>

<template>
  <div>
    <h2>Sign Transaction</h2>
    <form @submit.prevent="submit">
      <input name="address" placeholder="Recipient address" required />
      <input name="value" placeholder="Amount (SOL)" type="number" step="0.01" min="0" required />
      <button type="submit" :disabled="isPending">
        {{ isPending ? 'Signing...' : 'Sign' }}
      </button>
    </form>
    <div v-if="signedTransaction" class="hash">Signed transaction: {{ signedTransaction }}</div>
    <div v-if="formError ?? error?.message" class="error">
      Error: {{ formError ?? error?.message }}
    </div>
  </div>
</template>

solana/transfer.ts

import type { Transaction } from '@solana/kit'
import {
  address,
  appendTransactionMessageInstruction,
  compileTransaction,
  createNoopSigner,
  createSolanaRpc,
  createTransactionMessage,
  lamports,
  pipe,
  setTransactionMessageFeePayerSigner,
  setTransactionMessageLifetimeUsingBlockhash,
} from '@solana/kit'
import { getTransferSolInstruction } from '@solana-program/system'

export async function buildSolTransferTransaction(
  rpcTarget: string,
  from: string,
  to: string,
  amountSol: number
): Promise<Transaction> {
  const rpc = createSolanaRpc(rpcTarget)
  const { value: latestBlockhash } = await rpc.getLatestBlockhash().send()
  const feePayer = createNoopSigner(address(from))

  const message = pipe(
    createTransactionMessage({ version: 0 }),
    m => setTransactionMessageFeePayerSigner(feePayer, m),
    m => setTransactionMessageLifetimeUsingBlockhash(latestBlockhash, m),
    m =>
      appendTransactionMessageInstruction(
        getTransferSolInstruction({
          source: feePayer,
          destination: address(to),
          amount: lamports(BigInt(Math.round(amountSol * 1e9))),
        }),
        m
      )
  )

  return compileTransaction(message)
}

Sign and send transaction

SendVersionedTransaction.vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { useWeb3Auth } from '@web3auth/modal/vue'
  import { useSolanaWallet, useSignAndSendTransaction } from '@web3auth/modal/vue/solana'

  import { buildSolTransferTransaction } from '../solana/transfer'

  const { web3Auth } = useWeb3Auth()
  const { accounts } = useSolanaWallet()
  const {
    data: signature,
    error,
    loading: isPending,
    signAndSendTransaction,
  } = useSignAndSendTransaction()
  const formError = ref<string | null>(null)

  async function submit(event: Event) {
    event.preventDefault()
    formError.value = null

    const rpcTarget = web3Auth.value?.currentChain?.rpcTarget
    if (!rpcTarget || !accounts.value?.length) return

    const form = new FormData(event.target as HTMLFormElement)
    const to = form.get('address')?.toString().trim() ?? ''
    const amountSol = Number(form.get('value'))
    if (!to || !Number.isFinite(amountSol) || amountSol <= 0) {
      formError.value = 'Enter a valid recipient address and a positive amount.'
      return
    }

    try {
      const transaction = await buildSolTransferTransaction(
        rpcTarget,
        accounts.value[0],
        to,
        amountSol
      )
      await signAndSendTransaction(transaction)
    } catch (err) {
      formError.value = err instanceof Error ? err.message : 'Failed to send transaction.'
    }
  }
</script>

<template>
  <div>
    <h2>Send Transaction</h2>
    <form @submit.prevent="submit">
      <input name="address" placeholder="Recipient address" required />
      <input name="value" placeholder="Amount (SOL)" type="number" step="0.01" min="0" required />
      <button type="submit" :disabled="isPending">
        {{ isPending ? 'Sending...' : 'Send' }}
      </button>
    </form>
    <div v-if="signature" class="hash">Transaction signature: {{ signature }}</div>
    <div v-if="formError ?? error?.message" class="error">
      Error: {{ formError ?? error?.message }}
    </div>
  </div>
</template>