# Vue composables for Solana

> @web3auth/modal Solana Vue Composables | Embedded Wallets

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 advanced Solana features, you should use [`@solana/web3.js`](https://solana.com/docs/clients/official/javascript#solana-web3js) to interact with the Solana blockchain using the Embedded Wallets Vue composables.

:::

```bash npm2yarn
npm install @solana/web3.js
```

## Solana composables

| Composable Name                                                                   | Description                                  |
| --------------------------------------------------------------------------------- | -------------------------------------------- |
| [`useSignAndSendTransaction`](./solana-composables/useSignAndSendTransaction.mdx) | Sign and send a Solana transaction.          |
| [`useSignMessage`](./solana-composables/useSignMessage.mdx)                       | Sign a message with the Solana wallet.       |
| [`useSignTransaction`](./solana-composables/useSignTransaction.mdx)               | Sign a Solana transaction (without sending). |
| [`useSolanaWallet`](./solana-composables/useSolanaWallet.mdx)                     | Access Solana wallet state and utilities.    |

## Composable usage examples

### Get Solana wallet

```vue
<template>
  
    Solana Wallet
    Connected: {{ connected ? 'Yes' : 'No' }}
    Address: {{ address }}
  
</template>

<script setup>

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

### Sign message

```vue
<template>
  
    Sign message
    <button @click="handleSignMessage" :disabled="isPending">
      {{ isPending ? 'Signing...' : 'Sign message' }}
    </button>
    Error: {{ error.message }}
  
</template>

<script setup>

  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 transaction

```vue
<template>
  
    Sign transaction
    <button @click="handleSignTransaction" :disabled="isPending">
      {{ isPending ? 'Signing...' : 'Sign transaction' }}
    </button>
    Error: {{ error.message }}
  
</template>

<script setup>

  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

```vue
<template>
  
    Sign and Send transaction
    <button @click="handleSignAndSend" :disabled="isPending">
      {{ isPending ? 'Processing...' : 'Sign and Send' }}
    </button>
    Error: {{ error.message }}
  
</template>

<script setup>

  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.