@vue-solana/vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 vue-solana
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @vue-solana/vue
+
+Vue plugin and composables for Solana applications.
+
+## Install
+
+```sh
+pnpm add @vue-solana/vue @vue-solana/core @solana/web3-compat
+```
+
+## Usage
+
+```ts
+import { createApp } from 'vue'
+import { createSolanaPlugin } from '@vue-solana/vue'
+
+createApp(App).use(createSolanaPlugin({
+  cluster: 'devnet'
+}))
+```
+
+## Known TypeScript Issue
+
+`@solana/web3-compat@0.0.21` currently has broken TypeScript metadata. Runtime imports still use the real package, but TypeScript consumers may need a local declaration shim.
+
+Add `types/web3-compat.d.ts` to your app if TypeScript cannot resolve `@solana/web3-compat`. See the repository README for the full workaround.

package/dist/index.cjs

@@ -0,0 +1,179 @@
+'use strict';
+
+const web3Compat = require('@solana/web3-compat');
+const vue = require('vue');
+const core = require('@vue-solana/core');
+
+const solanaInjectionKey = Symbol("VueSolana");
+
+function useSolana() {
+  const context = vue.inject(solanaInjectionKey);
+  if (!context) {
+    throw new Error("Vue Solana plugin is not installed");
+  }
+  return context;
+}
+
+function useRpc() {
+  const solana = useSolana();
+  return {
+    cluster: vue.computed(() => solana.cluster),
+    endpoint: vue.computed(() => solana.endpoint),
+    wsEndpoint: vue.computed(() => solana.wsEndpoint),
+    status: solana.status,
+    error: solana.error,
+    latestBlockhash: solana.latestBlockhash,
+    checkConnection: solana.checkConnection,
+    connection: solana.connection
+  };
+}
+
+function useConnection() {
+  return useRpc().connection;
+}
+
+function useBalance(address, commitment) {
+  const connection = useConnection();
+  const balance = vue.ref(null);
+  const loading = vue.ref(false);
+  const error = vue.ref(null);
+  async function refresh() {
+    const value = vue.toValue(address);
+    if (!value) {
+      balance.value = null;
+      return null;
+    }
+    loading.value = true;
+    error.value = null;
+    try {
+      const publicKey = typeof value === "string" ? new web3Compat.PublicKey(value) : value;
+      balance.value = await connection.getBalance(publicKey, commitment);
+      return balance.value;
+    } catch (cause) {
+      error.value = cause;
+      throw cause;
+    } finally {
+      loading.value = false;
+    }
+  }
+  vue.watch(() => vue.toValue(address), () => {
+    void refresh();
+  }, { immediate: true });
+  return {
+    balance,
+    loading,
+    error,
+    refresh
+  };
+}
+
+function useWallet() {
+  const solana = useSolana();
+  const wallet = solana.wallet;
+  return {
+    wallet,
+    publicKey: vue.computed(() => wallet.value?.publicKey ?? null),
+    connected: vue.computed(() => Boolean(wallet.value?.connected && wallet.value.publicKey)),
+    connecting: vue.computed(() => Boolean(wallet.value?.connecting)),
+    setWallet: solana.setWallet,
+    connect: () => wallet.value?.connect() ?? Promise.reject(new Error("No Solana wallet is configured")),
+    disconnect: () => wallet.value?.disconnect() ?? Promise.resolve()
+  };
+}
+
+function useTransaction(handler) {
+  const signature = vue.ref(null);
+  const loading = vue.ref(false);
+  const error = vue.ref(null);
+  async function execute(...args) {
+    loading.value = true;
+    error.value = null;
+    try {
+      signature.value = await handler(...args);
+      return signature.value;
+    } catch (cause) {
+      error.value = cause;
+      throw cause;
+    } finally {
+      loading.value = false;
+    }
+  }
+  return {
+    signature,
+    loading,
+    error,
+    execute
+  };
+}
+
+function useSignAndSendTransaction() {
+  const connection = useConnection();
+  const { wallet } = useWallet();
+  return useTransaction((transaction, options) => {
+    if (!wallet.value) {
+      return Promise.reject(new Error("No Solana wallet is configured"));
+    }
+    return core.signAndSendTransaction(connection, wallet.value, transaction, options);
+  });
+}
+
+function createSolanaPlugin(options = {}) {
+  return {
+    install(app) {
+      const context = core.createSolanaContext(options);
+      const wallet = vue.shallowRef(options.wallet ?? null);
+      const status = vue.ref("idle");
+      const error = vue.ref(null);
+      const latestBlockhash = vue.ref(null);
+      async function checkConnection() {
+        status.value = "checking";
+        error.value = null;
+        console.info("[Vue Solana] Checking RPC connection", {
+          cluster: context.cluster,
+          endpoint: context.endpoint,
+          wsEndpoint: context.wsEndpoint
+        });
+        try {
+          const blockhash = await context.connection.getLatestBlockhash();
+          latestBlockhash.value = blockhash.blockhash;
+          status.value = "connected";
+          console.info("[Vue Solana] Connected", {
+            cluster: context.cluster,
+            endpoint: context.endpoint,
+            wsEndpoint: context.wsEndpoint,
+            blockhash
+          });
+        } catch (cause) {
+          status.value = "error";
+          error.value = cause instanceof Error ? cause.message : String(cause);
+          console.error("[Vue Solana] Connection failed", cause);
+        }
+      }
+      const vueContext = {
+        ...context,
+        wallet,
+        status,
+        error,
+        latestBlockhash,
+        checkConnection,
+        setWallet(nextWallet) {
+          wallet.value = nextWallet;
+        }
+      };
+      app.provide(solanaInjectionKey, vueContext);
+      void checkConnection();
+    }
+  };
+}
+const VueSolana = createSolanaPlugin;
+
+exports.VueSolana = VueSolana;
+exports.createSolanaPlugin = createSolanaPlugin;
+exports.solanaInjectionKey = solanaInjectionKey;
+exports.useBalance = useBalance;
+exports.useConnection = useConnection;
+exports.useRpc = useRpc;
+exports.useSignAndSendTransaction = useSignAndSendTransaction;
+exports.useSolana = useSolana;
+exports.useTransaction = useTransaction;
+exports.useWallet = useWallet;

package/dist/index.d.cts

@@ -0,0 +1,73 @@
+import * as vue from 'vue';
+import { MaybeRefOrGetter, Ref, InjectionKey, App } from 'vue';
+import { PublicKey, Commitment, TransactionSignature } from '@solana/web3-compat';
+import * as _vue_solana_core from '@vue-solana/core';
+import { SendTransactionOptions, SolanaContext, SolanaWallet, SolanaConfig } from '@vue-solana/core';
+
+declare function useBalance(address: MaybeRefOrGetter<PublicKey | string | null | undefined>, commitment?: Commitment): {
+    balance: vue.Ref<number | null, number | null>;
+    loading: vue.Ref<boolean, boolean>;
+    error: vue.Ref<unknown, unknown>;
+    refresh: () => Promise<number | null>;
+};
+
+declare function useConnection(): Connection;
+
+declare function useRpc(): {
+    cluster: vue.ComputedRef<_vue_solana_core.SolanaCluster>;
+    endpoint: vue.ComputedRef<string>;
+    wsEndpoint: vue.ComputedRef<string>;
+    status: vue.Ref<SolanaConnectionStatus, SolanaConnectionStatus>;
+    error: vue.Ref<string | null, string | null>;
+    latestBlockhash: vue.Ref<string | null, string | null>;
+    checkConnection: () => Promise<void>;
+    connection: Connection;
+};
+
+declare function useSignAndSendTransaction(): {
+    signature: any;
+    loading: vue.Ref<boolean, boolean>;
+    error: vue.Ref<unknown, unknown>;
+    execute: (transaction: any, options?: SendTransactionOptions | undefined) => Promise<any>;
+};
+
+declare function useSolana(): VueSolanaContext;
+
+declare function useTransaction<TArgs extends unknown[]>(handler: (...args: TArgs) => Promise<TransactionSignature>): {
+    signature: any;
+    loading: vue.Ref<boolean, boolean>;
+    error: vue.Ref<unknown, unknown>;
+    execute: (...args: TArgs) => Promise<any>;
+};
+
+declare function useWallet(): {
+    wallet: vue.Ref<_vue_solana_core.SolanaWallet | null, _vue_solana_core.SolanaWallet | null>;
+    publicKey: vue.ComputedRef<any>;
+    connected: vue.ComputedRef<boolean>;
+    connecting: vue.ComputedRef<boolean>;
+    setWallet: (wallet: _vue_solana_core.SolanaWallet | null) => void;
+    connect: () => Promise<void>;
+    disconnect: () => Promise<void>;
+};
+
+type SolanaConnectionStatus = 'idle' | 'checking' | 'connected' | 'error';
+interface VueSolanaContext extends SolanaContext {
+    wallet: Ref<SolanaWallet | null>;
+    status: Ref<SolanaConnectionStatus>;
+    error: Ref<string | null>;
+    latestBlockhash: Ref<string | null>;
+    checkConnection: () => Promise<void>;
+    setWallet: (wallet: SolanaWallet | null) => void;
+}
+declare const solanaInjectionKey: InjectionKey<VueSolanaContext>;
+
+interface VueSolanaPluginOptions extends SolanaConfig {
+    wallet?: SolanaWallet | null;
+}
+declare function createSolanaPlugin(options?: VueSolanaPluginOptions): {
+    install(app: App): void;
+};
+declare const VueSolana: typeof createSolanaPlugin;
+
+export { VueSolana, createSolanaPlugin, solanaInjectionKey, useBalance, useConnection, useRpc, useSignAndSendTransaction, useSolana, useTransaction, useWallet };
+export type { SolanaConnectionStatus, VueSolanaContext, VueSolanaPluginOptions };

package/dist/index.d.mts

@@ -0,0 +1,73 @@
+import * as vue from 'vue';
+import { MaybeRefOrGetter, Ref, InjectionKey, App } from 'vue';
+import { PublicKey, Commitment, TransactionSignature } from '@solana/web3-compat';
+import * as _vue_solana_core from '@vue-solana/core';
+import { SendTransactionOptions, SolanaContext, SolanaWallet, SolanaConfig } from '@vue-solana/core';
+
+declare function useBalance(address: MaybeRefOrGetter<PublicKey | string | null | undefined>, commitment?: Commitment): {
+    balance: vue.Ref<number | null, number | null>;
+    loading: vue.Ref<boolean, boolean>;
+    error: vue.Ref<unknown, unknown>;
+    refresh: () => Promise<number | null>;
+};
+
+declare function useConnection(): Connection;
+
+declare function useRpc(): {
+    cluster: vue.ComputedRef<_vue_solana_core.SolanaCluster>;
+    endpoint: vue.ComputedRef<string>;
+    wsEndpoint: vue.ComputedRef<string>;
+    status: vue.Ref<SolanaConnectionStatus, SolanaConnectionStatus>;
+    error: vue.Ref<string | null, string | null>;
+    latestBlockhash: vue.Ref<string | null, string | null>;
+    checkConnection: () => Promise<void>;
+    connection: Connection;
+};
+
+declare function useSignAndSendTransaction(): {
+    signature: any;
+    loading: vue.Ref<boolean, boolean>;
+    error: vue.Ref<unknown, unknown>;
+    execute: (transaction: any, options?: SendTransactionOptions | undefined) => Promise<any>;
+};
+
+declare function useSolana(): VueSolanaContext;
+
+declare function useTransaction<TArgs extends unknown[]>(handler: (...args: TArgs) => Promise<TransactionSignature>): {
+    signature: any;
+    loading: vue.Ref<boolean, boolean>;
+    error: vue.Ref<unknown, unknown>;
+    execute: (...args: TArgs) => Promise<any>;
+};
+
+declare function useWallet(): {
+    wallet: vue.Ref<_vue_solana_core.SolanaWallet | null, _vue_solana_core.SolanaWallet | null>;
+    publicKey: vue.ComputedRef<any>;
+    connected: vue.ComputedRef<boolean>;
+    connecting: vue.ComputedRef<boolean>;
+    setWallet: (wallet: _vue_solana_core.SolanaWallet | null) => void;
+    connect: () => Promise<void>;
+    disconnect: () => Promise<void>;
+};
+
+type SolanaConnectionStatus = 'idle' | 'checking' | 'connected' | 'error';
+interface VueSolanaContext extends SolanaContext {
+    wallet: Ref<SolanaWallet | null>;
+    status: Ref<SolanaConnectionStatus>;
+    error: Ref<string | null>;
+    latestBlockhash: Ref<string | null>;
+    checkConnection: () => Promise<void>;
+    setWallet: (wallet: SolanaWallet | null) => void;
+}
+declare const solanaInjectionKey: InjectionKey<VueSolanaContext>;
+
+interface VueSolanaPluginOptions extends SolanaConfig {
+    wallet?: SolanaWallet | null;
+}
+declare function createSolanaPlugin(options?: VueSolanaPluginOptions): {
+    install(app: App): void;
+};
+declare const VueSolana: typeof createSolanaPlugin;
+
+export { VueSolana, createSolanaPlugin, solanaInjectionKey, useBalance, useConnection, useRpc, useSignAndSendTransaction, useSolana, useTransaction, useWallet };
+export type { SolanaConnectionStatus, VueSolanaContext, VueSolanaPluginOptions };

package/dist/index.d.ts

@@ -0,0 +1,73 @@
+import * as vue from 'vue';
+import { MaybeRefOrGetter, Ref, InjectionKey, App } from 'vue';
+import { PublicKey, Commitment, TransactionSignature } from '@solana/web3-compat';
+import * as _vue_solana_core from '@vue-solana/core';
+import { SendTransactionOptions, SolanaContext, SolanaWallet, SolanaConfig } from '@vue-solana/core';
+
+declare function useBalance(address: MaybeRefOrGetter<PublicKey | string | null | undefined>, commitment?: Commitment): {
+    balance: vue.Ref<number | null, number | null>;
+    loading: vue.Ref<boolean, boolean>;
+    error: vue.Ref<unknown, unknown>;
+    refresh: () => Promise<number | null>;
+};
+
+declare function useConnection(): Connection;
+
+declare function useRpc(): {
+    cluster: vue.ComputedRef<_vue_solana_core.SolanaCluster>;
+    endpoint: vue.ComputedRef<string>;
+    wsEndpoint: vue.ComputedRef<string>;
+    status: vue.Ref<SolanaConnectionStatus, SolanaConnectionStatus>;
+    error: vue.Ref<string | null, string | null>;
+    latestBlockhash: vue.Ref<string | null, string | null>;
+    checkConnection: () => Promise<void>;
+    connection: Connection;
+};
+
+declare function useSignAndSendTransaction(): {
+    signature: any;
+    loading: vue.Ref<boolean, boolean>;
+    error: vue.Ref<unknown, unknown>;
+    execute: (transaction: any, options?: SendTransactionOptions | undefined) => Promise<any>;
+};
+
+declare function useSolana(): VueSolanaContext;
+
+declare function useTransaction<TArgs extends unknown[]>(handler: (...args: TArgs) => Promise<TransactionSignature>): {
+    signature: any;
+    loading: vue.Ref<boolean, boolean>;
+    error: vue.Ref<unknown, unknown>;
+    execute: (...args: TArgs) => Promise<any>;
+};
+
+declare function useWallet(): {
+    wallet: vue.Ref<_vue_solana_core.SolanaWallet | null, _vue_solana_core.SolanaWallet | null>;
+    publicKey: vue.ComputedRef<any>;
+    connected: vue.ComputedRef<boolean>;
+    connecting: vue.ComputedRef<boolean>;
+    setWallet: (wallet: _vue_solana_core.SolanaWallet | null) => void;
+    connect: () => Promise<void>;
+    disconnect: () => Promise<void>;
+};
+
+type SolanaConnectionStatus = 'idle' | 'checking' | 'connected' | 'error';
+interface VueSolanaContext extends SolanaContext {
+    wallet: Ref<SolanaWallet | null>;
+    status: Ref<SolanaConnectionStatus>;
+    error: Ref<string | null>;
+    latestBlockhash: Ref<string | null>;
+    checkConnection: () => Promise<void>;
+    setWallet: (wallet: SolanaWallet | null) => void;
+}
+declare const solanaInjectionKey: InjectionKey<VueSolanaContext>;
+
+interface VueSolanaPluginOptions extends SolanaConfig {
+    wallet?: SolanaWallet | null;
+}
+declare function createSolanaPlugin(options?: VueSolanaPluginOptions): {
+    install(app: App): void;
+};
+declare const VueSolana: typeof createSolanaPlugin;
+
+export { VueSolana, createSolanaPlugin, solanaInjectionKey, useBalance, useConnection, useRpc, useSignAndSendTransaction, useSolana, useTransaction, useWallet };
+export type { SolanaConnectionStatus, VueSolanaContext, VueSolanaPluginOptions };

package/dist/index.mjs

@@ -0,0 +1,168 @@
+import { PublicKey } from '@solana/web3-compat';
+import { inject, computed, ref, watch, toValue, shallowRef } from 'vue';
+import { signAndSendTransaction, createSolanaContext } from '@vue-solana/core';
+
+const solanaInjectionKey = Symbol("VueSolana");
+
+function useSolana() {
+  const context = inject(solanaInjectionKey);
+  if (!context) {
+    throw new Error("Vue Solana plugin is not installed");
+  }
+  return context;
+}
+
+function useRpc() {
+  const solana = useSolana();
+  return {
+    cluster: computed(() => solana.cluster),
+    endpoint: computed(() => solana.endpoint),
+    wsEndpoint: computed(() => solana.wsEndpoint),
+    status: solana.status,
+    error: solana.error,
+    latestBlockhash: solana.latestBlockhash,
+    checkConnection: solana.checkConnection,
+    connection: solana.connection
+  };
+}
+
+function useConnection() {
+  return useRpc().connection;
+}
+
+function useBalance(address, commitment) {
+  const connection = useConnection();
+  const balance = ref(null);
+  const loading = ref(false);
+  const error = ref(null);
+  async function refresh() {
+    const value = toValue(address);
+    if (!value) {
+      balance.value = null;
+      return null;
+    }
+    loading.value = true;
+    error.value = null;
+    try {
+      const publicKey = typeof value === "string" ? new PublicKey(value) : value;
+      balance.value = await connection.getBalance(publicKey, commitment);
+      return balance.value;
+    } catch (cause) {
+      error.value = cause;
+      throw cause;
+    } finally {
+      loading.value = false;
+    }
+  }
+  watch(() => toValue(address), () => {
+    void refresh();
+  }, { immediate: true });
+  return {
+    balance,
+    loading,
+    error,
+    refresh
+  };
+}
+
+function useWallet() {
+  const solana = useSolana();
+  const wallet = solana.wallet;
+  return {
+    wallet,
+    publicKey: computed(() => wallet.value?.publicKey ?? null),
+    connected: computed(() => Boolean(wallet.value?.connected && wallet.value.publicKey)),
+    connecting: computed(() => Boolean(wallet.value?.connecting)),
+    setWallet: solana.setWallet,
+    connect: () => wallet.value?.connect() ?? Promise.reject(new Error("No Solana wallet is configured")),
+    disconnect: () => wallet.value?.disconnect() ?? Promise.resolve()
+  };
+}
+
+function useTransaction(handler) {
+  const signature = ref(null);
+  const loading = ref(false);
+  const error = ref(null);
+  async function execute(...args) {
+    loading.value = true;
+    error.value = null;
+    try {
+      signature.value = await handler(...args);
+      return signature.value;
+    } catch (cause) {
+      error.value = cause;
+      throw cause;
+    } finally {
+      loading.value = false;
+    }
+  }
+  return {
+    signature,
+    loading,
+    error,
+    execute
+  };
+}
+
+function useSignAndSendTransaction() {
+  const connection = useConnection();
+  const { wallet } = useWallet();
+  return useTransaction((transaction, options) => {
+    if (!wallet.value) {
+      return Promise.reject(new Error("No Solana wallet is configured"));
+    }
+    return signAndSendTransaction(connection, wallet.value, transaction, options);
+  });
+}
+
+function createSolanaPlugin(options = {}) {
+  return {
+    install(app) {
+      const context = createSolanaContext(options);
+      const wallet = shallowRef(options.wallet ?? null);
+      const status = ref("idle");
+      const error = ref(null);
+      const latestBlockhash = ref(null);
+      async function checkConnection() {
+        status.value = "checking";
+        error.value = null;
+        console.info("[Vue Solana] Checking RPC connection", {
+          cluster: context.cluster,
+          endpoint: context.endpoint,
+          wsEndpoint: context.wsEndpoint
+        });
+        try {
+          const blockhash = await context.connection.getLatestBlockhash();
+          latestBlockhash.value = blockhash.blockhash;
+          status.value = "connected";
+          console.info("[Vue Solana] Connected", {
+            cluster: context.cluster,
+            endpoint: context.endpoint,
+            wsEndpoint: context.wsEndpoint,
+            blockhash
+          });
+        } catch (cause) {
+          status.value = "error";
+          error.value = cause instanceof Error ? cause.message : String(cause);
+          console.error("[Vue Solana] Connection failed", cause);
+        }
+      }
+      const vueContext = {
+        ...context,
+        wallet,
+        status,
+        error,
+        latestBlockhash,
+        checkConnection,
+        setWallet(nextWallet) {
+          wallet.value = nextWallet;
+        }
+      };
+      app.provide(solanaInjectionKey, vueContext);
+      void checkConnection();
+    }
+  };
+}
+const VueSolana = createSolanaPlugin;
+
+export { VueSolana, createSolanaPlugin, solanaInjectionKey, useBalance, useConnection, useRpc, useSignAndSendTransaction, useSolana, useTransaction, useWallet };

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@vue-solana/vue",
+  "version": "0.1.0",
+  "description": "Vue plugin and composables for Solana applications.",
+  "license": "MIT",
+  "keywords": [
+    "solana",
+    "vue",
+    "vue3",
+    "composables",
+    "web3",
+    "wallet"
+  ],
+  "homepage": "https://github.com/vue-solana/vue-solana#readme",
+  "bugs": {
+    "url": "https://github.com/vue-solana/vue-solana/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vue-solana/vue-solana.git",
+    "directory": "packages/vue"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@vue-solana/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "@solana/web3-compat": "^0.0.21",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@solana/web3-compat": "^0.0.21",
+    "typescript": "^5.8.3",
+    "unbuild": "^3.5.0",
+    "vue": "^3.5.16"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}