> For the complete documentation index, see [llms.txt](/llms.txt).

# Integrate Embedded Wallets with the Solana Blockchain in Vue

While using the Web3Auth Vue SDK, you get access to native Solana composables. Pair them with [@solana/web3.js](https://solana.com/docs/clients/official/javascript#solana-web3js) for advanced features such as transaction building, program interactions, and account queries.

## Chain details for Solana[​](#chain-details-for-solana "Direct link to Chain details for Solana")

- Mainnet
- Testnet
- Devnet

- Chain Namespace: SOLANA
- Chain ID: 0x1
- Public RPC URL: `https://api.mainnet-beta.solana.com` (avoid public RPC in production; prefer managed services)
- Display Name: Solana Mainnet
- Block Explorer Link: `https://explorer.solana.com`
- Ticker: SOL
- Ticker Name: Solana
- Logo: <https://images.toruswallet.io/solana.svg>

- Chain Namespace: SOLANA
- Chain ID: 0x2
- Public RPC URL: `https://api.testnet.solana.com` (avoid public RPC in production; prefer managed services)
- Display Name: Solana Testnet
- Block Explorer Link: `https://explorer.solana.com`
- Ticker: SOL
- Ticker Name: Solana
- Logo: <https://images.toruswallet.io/solana.svg>

- Chain Namespace: SOLANA
- Chain ID: 0x3
- Public RPC URL: `https://api.devnet.solana.com` (avoid public RPC in production; prefer managed services)
- Display Name: Solana Devnet
- Block Explorer Link: `https://explorer.solana.com?cluster=devnet`
- Ticker: SOL
- Ticker Name: Solana
- Logo: <https://images.toruswallet.io/solana.svg>

## Vue Solana integration[​](#vue-solana-integration "Direct link to Vue Solana integration")

You need to install the `@solana/web3.js` package to interact with the Solana blockchain using the Web3Auth Vue composables.

info

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

For advanced Solana features, you should use [@solana/web3.js](https://solana.com/docs/clients/official/javascript#solana-web3js) on top of the composables provided.

- npm
- Yarn
- pnpm
- Bun

```
npm install @solana/web3.js

```

```
yarn add @solana/web3.js

```

```
pnpm add @solana/web3.js

```

```
bun add @solana/web3.js

```

## Solana composables[​](#solana-composables "Direct link to 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 wallet state and utilities.    |

## Composable usage examples[​](#composable-usage-examples "Direct link to Composable usage examples")

### Get Solana wallet[​](#get-solana-wallet "Direct link to Get Solana wallet")

```
<template>
  <div>
    <h2>Solana Wallet</h2>
    <p>Connected: {{ connected ? 'Yes' : 'No' }}</p>
    <p v-if="address">Address: {{ address }}</p>
  </div>
</template>

<script setup>
  import { useSolanaWallet } from '@web3auth/modal/vue'

  const { address, connected } = useSolanaWallet()
</script>

```

### Sign a message[​](#sign-a-message "Direct link to Sign a message")

```
<template>
  <div>
    <h2>Sign Message</h2>
    <button @click="handleSignMessage" :disabled="isPending">
      {{ isPending ? 'Signing...' : 'Sign Message' }}
    </button>
    <p v-if="error">Error: {{ error.message }}</p>
  </div>
</template>

<script setup>
  import { useSignMessage } from '@web3auth/modal/vue'

  const { signMessage, isPending, error } = useSignMessage()

  const handleSignMessage = async () => {
    try {
      const message = new TextEncoder().encode('Hello Solana!')
      const signature = await signMessage(message)
      console.log('Signature:', signature)
    } catch (err) {
      console.error('Error signing message:', err)
    }
  }
</script>

```

### Sign a transaction[​](#sign-a-transaction "Direct link to Sign a transaction")

```
<template>
  <div>
    <h2>Sign Transaction</h2>
    <button @click="handleSignTransaction" :disabled="isPending">
      {{ isPending ? 'Signing...' : 'Sign Transaction' }}
    </button>
    <p v-if="error">Error: {{ error.message }}</p>
  </div>
</template>

<script setup>
  import { useSignTransaction } from '@web3auth/modal/vue'
  import { Transaction, SystemProgram, PublicKey, LAMPORTS_PER_SOL } from '@solana/web3.js'

  const { signTransaction, isPending, error } = useSignTransaction()

  const handleSignTransaction = async () => {
    try {
      // Create a simple transfer transaction
      const transaction = new Transaction().add(
        SystemProgram.transfer({
          fromPubkey: new PublicKey('YOUR_PUBLIC_KEY'),
          toPubkey: new PublicKey('DESTINATION_PUBLIC_KEY'),
          lamports: 0.01 * LAMPORTS_PER_SOL,
        })
      )

      const signedTransaction = await signTransaction(transaction)
      console.log('Signed Transaction:', signedTransaction)
    } catch (err) {
      console.error('Error signing transaction:', err)
    }
  }
</script>

```

### Sign and Send Transaction[​](#sign-and-send-transaction "Direct link to Sign and Send Transaction")

```
<template>
  <div>
    <h2>Sign and Send Transaction</h2>
    <button @click="handleSignAndSend" :disabled="isPending">
      {{ isPending ? 'Processing...' : 'Sign and Send' }}
    </button>
    <p v-if="error">Error: {{ error.message }}</p>
  </div>
</template>

<script setup>
  import { useSignAndSendTransaction } from '@web3auth/modal/vue'
  import { Transaction, SystemProgram, PublicKey, LAMPORTS_PER_SOL } from '@solana/web3.js'

  const { signAndSendTransaction, isPending, error } = useSignAndSendTransaction()

  const handleSignAndSend = async () => {
    try {
      // Create a simple transfer transaction
      const transaction = new Transaction().add(
        SystemProgram.transfer({
          fromPubkey: new PublicKey('YOUR_PUBLIC_KEY'),
          toPubkey: new PublicKey('DESTINATION_PUBLIC_KEY'),
          lamports: 0.01 * LAMPORTS_PER_SOL,
        })
      )

      const signature = await signAndSendTransaction(transaction)
      console.log('Transaction Signature:', signature)
    } catch (err) {
      console.error('Error signing and sending transaction:', err)
    }
  }
</script>

```

Further code and advanced usage should be implemented using Solana's web3.js library as needed.