@vue-solana/vue

Vue plugin and composables for Solana applications.

Use this package in Vue 3 apps that need Solana RPC access, balance reads, wallet state, and transaction helper state.

New to Solana? Start with the official docs and the project concepts guide:

• Solana Documentation
• Solana RPC Methods
• Solana Clusters
• Vue Solana Concepts Guide
• @vue-solana/vue docs
• Agent Skill
• Live demo

Install

pnpm add @vue-solana/vue @vue-solana/core @solana/web3-compat buffer

npm install @vue-solana/vue @vue-solana/core @solana/web3-compat buffer

Plugin Setup

import { createApp } from "vue";
import { createSolanaPlugin } from "@vue-solana/vue";
import App from "./App.vue";

createApp(App)
  .use(
    createSolanaPlugin({
      cluster: "devnet",
      mobileWallet: {
        appIdentity: {
          name: "My Vue Solana App",
          uri: "https://example.com",
          icon: "favicon.ico",
        },
      },
    }),
  )
  .mount("#app");

Android Mobile Wallet Adapter registration is enabled by default on supported Android Chrome clients. Pass mobileWallet options to customize the MWA app identity, or pass mobileWallet: false to disable Android mobile wallet registration.

You can also pass a custom RPC endpoint:

createApp(App).use(
  createSolanaPlugin({
    cluster: "mainnet-beta",
    endpoint: "https://your-rpc.example.com",
    commitment: "confirmed",
  }),
);

Supported clusters are mainnet-beta, devnet, testnet, and localnet. Use mainnet-beta for Solana mainnet; this is Solana's official cluster name.

The root export remains supported. For composables, prefer direct subpath imports in new code so bundlers can avoid evaluating unrelated package entry code:

import { useRpc } from "@vue-solana/vue/useRpc";
import { useWallet } from "@vue-solana/vue/useWallet";

For development, use devnet and request free test SOL from the official faucet:

https://faucet.solana.com

Read RPC State

<script setup lang="ts">
import { useRpc } from "@vue-solana/vue/useRpc";

const { cluster, endpoint, status, error, latestBlockhash, checkConnection } = useRpc();
</script>

<template>
  <section>
    <p>Cluster: {{ cluster }}</p>
    <p>Endpoint: {{ endpoint }}</p>
    <p>Status: {{ status }}</p>
    <p>Latest blockhash: {{ latestBlockhash }}</p>
    <p v-if="error">Error: {{ error }}</p>
    <button type="button" @click="checkConnection">Check RPC</button>
  </section>
</template>

Read Balance

<script setup lang="ts">
import { ref } from "vue";
import { useBalance } from "@vue-solana/vue/useBalance";

const address = ref("PASTE_A_SOLANA_ADDRESS");
const { balance, loading, error, refresh } = useBalance(address);
</script>

<template>
  <section>
    <p>Lamports: {{ balance }}</p>
    <p v-if="loading">Loading...</p>
    <pre v-if="error">{{ error }}</pre>
    <button type="button" @click="refresh">Refresh</button>
  </section>
</template>

Wallet State

<script setup lang="ts">
import { useWallet } from "@vue-solana/vue/useWallet";
import { useWallets } from "@vue-solana/vue/useWallets";

const { wallets, selectedWallet, selectWallet, refreshWallets } = useWallets();
const { publicKey, connected, connecting, connect, disconnect } = useWallet();
</script>

<template>
  <section>
    <button type="button" @click="refreshWallets">Refresh Wallets</button>
    <button
      v-for="wallet in wallets"
      :key="wallet.name"
      type="button"
      @click="selectWallet(wallet)"
    >
      {{ wallet.name }}
    </button>
    <p>Selected: {{ selectedWallet?.name ?? "None" }}</p>
    <p>Connected: {{ connected }}</p>
    <p>Public key: {{ publicKey?.toBase58() }}</p>
    <p v-if="connecting">Connecting...</p>
    <button type="button" :disabled="!selectedWallet || connected || connecting" @click="connect">
      Connect
    </button>
    <button type="button" :disabled="!connected" @click="disconnect">Disconnect</button>
  </section>
</template>

Browser extension wallets are discovered through the Solana Wallet Standard. Android Mobile Wallet Adapter wallets are registered through @solana-mobile/wallet-standard-mobile and exposed through the same useWallets() list on supported Android Chrome clients. connect() works after selecting a discovered wallet or configuring a custom SolanaWallet.

iOS browser wallet adapters and desktop native app wallet adapters are planned but not implemented yet.

Composables return inert SSR-safe state when no plugin context is available. Real RPC and wallet operations still require the plugin-provided client context.

Transaction State

import { useSignAndSendTransaction } from "@vue-solana/vue/useSignAndSendTransaction";

const { signature, loading, error, execute } = useSignAndSendTransaction();

await execute(transaction, {
  skipPreflight: false,
});

The current wallet must be connected and support either signAndSendTransaction or signTransaction. Android Mobile Wallet Adapter wallets prefer signTransaction plus app-side RPC submission when available. loading is also cleared if a wallet adapter never returns a result; in that stale case, check the wallet or an explorer before retrying because chain status may be unknown.

Example App

This README includes small snippets for quick reference. For a complete runnable Vue + Vite flow, see the example app:

pnpm dev:vue

Docs: examples/vue-vite

Live demo: vue-solana-docs.vercel.app/demo

AI Agent Skill

If you use an AI coding agent, install the Vue Solana Agent Skill for plugin setup, composable imports, wallet flow guidance, transaction gotchas, and verification commands:

npx skills add vue-solana/vue-solana --skill vue-solana

Docs: Vue Solana Agent Skill

API

• createSolanaPlugin(options?): installs the Vue Solana context.
• VueSolana: alias for createSolanaPlugin.
• useSolana(): returns the full injected Solana context.
• useRpc(): returns cluster, endpoint, connection status, latest blockhash, and checkConnection().
• useConnection(): returns the Solana Connection.
• useWallet(): returns wallet refs, computed connection state, and wallet actions.
• useWallets(): returns discovered browser extension wallets, Android Mobile Wallet Adapter wallets, and wallet selection actions.
• useBalance(address, commitment?): loads lamport balance for a PublicKey or address string.
• useTransaction(handler): generic async transaction state helper.
• useSignAndSendTransaction(): signs and sends a transaction through the configured wallet.

Direct composable subpaths:

• @vue-solana/vue/useSolana
• @vue-solana/vue/useRpc
• @vue-solana/vue/useConnection
• @vue-solana/vue/useBalance
• @vue-solana/vue/useWallet
• @vue-solana/vue/useWallets
• @vue-solana/vue/useTransaction
• @vue-solana/vue/useSignAndSendTransaction

Known TypeScript Issue

@solana/[email protected] currently has broken TypeScript metadata. Runtime imports still use the real package, but TypeScript consumers may need a local declaration shim.

If TypeScript cannot resolve @solana/web3-compat, add types/web3-compat.d.ts to your app:

declare module "@solana/web3-compat" {
  export type { Commitment, SendOptions, TransactionSignature } from "@solana/web3.js";
  export {
    Connection,
    Keypair,
    PublicKey,
    SystemProgram,
    Transaction,
    TransactionInstruction,
    VersionedTransaction,
  } from "@solana/web3.js";
}

Make sure your tsconfig.json includes types/**/*.d.ts or another pattern that includes the shim.

Status

This package is early-stage. RPC, balance, browser extension wallet, Android mobile wallet, and transaction composables are usable.