@nosana/solana-vue

Vue composables and components for Solana wallet-standard, built on top of @nosana/wallet-standard-vue.

Installation

npm install @nosana/solana-vue

Note: This package depends on @nosana/wallet-standard-vue and re-exports essential generic functionality (WalletProvider, useWallet) plus Solana-specific features. For generic components like WalletButton or useWallets, import directly from @nosana/wallet-standard-vue.

Usage

For Solana Apps (Recommended)

Import Solana-specific features from @nosana/solana-vue - it re-exports essential generic functionality (WalletProvider, useWallet) plus Solana-specific features:

<template>
  <WalletProvider>
    <SolanaWalletButton />
    <!-- Your app content -->
  </WalletProvider>
</template>

<script setup lang="ts">
// Import Solana-specific features from solana-vue
// WalletProvider and useWallet are re-exported (they're generic but needed)
// Use Solana-specific components and composables (recommended)
import {
  WalletProvider,
  SolanaWalletButton, // Shows only Solana wallets
  useWallet,
  useSolanaWallets, // Returns only Solana wallets
  useSignAndSendTransaction,
} from '@nosana/solana-vue';
// Don't forget to import the styles if you want the default styling
import '@nosana/solana-vue/styles';

const { account } = useWallet();
const signAndSendTransaction = useSignAndSendTransaction(account, 'solana:devnet');
</script>

WalletProvider Props:

• autoConnect (optional, default: false): Automatically reconnect to the last connected wallet when the app loads. The wallet name is stored in localStorage and will be automatically reconnected on subsequent visits.

• localStorageKey (optional, default: 'walletName'): The key used to store the last connected wallet name in localStorage. Useful if you want to use a custom key or have multiple instances.

Example - With auto-connect enabled:

<template>
  <WalletProvider :auto-connect="true">
    <SolanaWalletButton />
    <!-- Your app content -->
  </WalletProvider>
</template>

<script setup lang="ts">
import { WalletProvider, SolanaWalletButton, useWallet } from '@nosana/solana-vue';
import '@nosana/solana-vue/styles';
</script>

For Multi-Chain Apps

If you're building a multi-chain app, import the generic functionality from @nosana/wallet-standard-vue:

<script setup lang="ts">
import { WalletProvider, useWallet, WalletButton, useWallets } from '@nosana/wallet-standard-vue';
import { useSignAndSendTransaction } from '@nosana/solana-vue';
</script>

Styling

The UI components (SolanaWalletButton and SolanaWalletModal) come with default styles that you can optionally import:

// Import all styles
import '@nosana/solana-vue/styles';

// Or import individual component styles
import '@nosana/solana-vue/styles/wallet-button';
import '@nosana/solana-vue/styles/wallet-modal';

Note: The styles are the same as @nosana/wallet-standard-vue/styles - you can import from either package. For detailed styling documentation including CSS variables and customization options, see the @nosana/wallet-standard-vue package.

API

Re-exported from @nosana/wallet-standard-vue

Essential generic functionality needed for Solana apps:

• WalletProvider - Provider component (required)
• useWallet() - Wallet connection state management (generic, works for any chain)
• WALLET_CONTEXT_KEY - Context key for advanced usage

Note: For generic components (WalletButton, WalletModal, useWallets), import directly from @nosana/wallet-standard-vue if you need them. For Solana apps, use the Solana-specific versions below.

Solana-Specific Composables (Recommended for Solana Apps)

• useSolanaWallets() - Recommended - Filtered list of Solana-compatible wallets (use instead of useWallets())
• useMobileWalletAdapter() - Register Solana Mobile Wallet Adapter for mobile wallet support
• useSignTransaction() - Sign Solana transactions
• useSignAndSendTransaction() - Sign and send Solana transactions
• useSignMessage() - Sign messages
• useSignIn() - Sign In With Solana
• useWalletAccountMessageModifyingSigner() - Create a message modifying signer
• useWalletAccountMessagePartialSigner() - Create a message partial signer
• useWalletAccountTransactionModifyingSigner() - Create a transaction modifying signer (non-sending)
• useWalletAccountTransactionPartialSigner() - Create a transaction partial signer
• useWalletAccountTransactionSendingSigner() - Create a transaction signer (sending)
• useWalletAccountSendingSigner() - Recommended - Create a Wallet signer that combines TransactionSendingSigner and MessageModifyingSigner (as recommended by @solana/kit)
• useWalletAccountPartialSigner() - Create a combined signer with TransactionPartialSigner and MessagePartialSigner (for multi-sig scenarios)
• useWalletAccountModifyingSigner() - Create a combined signer with TransactionModifyingSigner and MessageModifyingSigner

Solana-Specific Components (Recommended for Solana Apps)

• SolanaWalletButton - Recommended - Wallet button that only shows Solana-compatible wallets (use instead of WalletButton)
• SolanaWalletModal - Recommended - Wallet modal that only shows Solana-compatible wallets (use instead of WalletModal)

Mobile Wallet Adapter

The package includes built-in support for the Solana Mobile Wallet Adapter. The @solana-mobile/wallet-standard-mobile package is included as a dependency, so you don't need to install it separately.

To enable mobile wallet support, use the useMobileWalletAdapter composable in your app:

<script setup lang="ts">
import { useMobileWalletAdapter, WalletProvider, SolanaWalletButton } from '@nosana/solana-vue';
import type { AppIdentity } from '@nosana/solana-vue';

// Register Mobile Wallet Adapter
useMobileWalletAdapter({
  appIdentity: {
    name: 'My App',
    uri: 'https://myapp.io',
    icon: '/icon.png', // relative path resolves to https://myapp.io/icon.png
  },
  // Optional: customize chains (default: ['solana:devnet', 'solana:mainnet'])
  chains: ['solana:devnet', 'solana:mainnet'],
});
</script>

<template>
  <WalletProvider>
    <SolanaWalletButton />
    <!-- Your app content -->
  </WalletProvider>
</template>

Once registered, the wallet behavior automatically adapts to the user's device:

• Mobile: Local connection via Android Intents (same as native Android apps)
• Desktop (Not available yet): If remoteHostAuthority is provided, remote connection via QR Code

The composable automatically handles SSR checks and only registers on the client-side, so it's safe to use in frameworks like Next.js.

Examples

See the examples/vue-app directory for a complete example application.

TypeScript Support

This package is written in TypeScript and includes type definitions.

License

MIT