Vue Solana Logo

Nuxt Example

Runnable Nuxt example app for @vue-solana/nuxt.

The Nuxt example is a runnable Nuxt app for @vue-solana/nuxt.

Source: examples/nuxt

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

What It Demonstrates

  • Installing the Nuxt module with modules: ['@vue-solana/nuxt'].
  • Configuring the module with solana: { cluster: 'devnet' }.
  • Reading RPC status with auto-imported useSolanaRpc().
  • Using the injected Kit client with auto-imported useSolanaClient().
  • Reading lamport balances with useSolanaBalance().
  • Discovering browser extension wallets, Android Mobile Wallet Adapter wallets, and supported iOS browser wallet entries with useSolanaWallets().
  • Managing active wallet state with useSolanaWallet().
  • Persisting wallet selection metadata and restoring the previously selected wallet identity on reload.
  • Optional autoConnect behavior that reconnects only the previously selected wallet when it is discovered again.
  • Rendering unsupported-capability states for wallets that cannot sign messages or transactions.
  • Signing an authentication message with auto-imported useSolanaSignMessage() when the connected wallet supports it.
  • Sending a real transfer with useSolanaSignAndSendTransaction() and showing submitted vs confirmed transaction status. The example uses devnet by default for safe testing.
  • Building cluster-aware Solana Explorer links for submitted signatures.
  • Using useTransaction() from @vue-solana/vue/useTransaction for generic async transaction state.
  • Exercising the Kit-reactive data layer in the Live Data Panels with auto-imported composables: useSolanaRequest() for one-shot requests, useSolanaSubscription() for live slot notifications, useSolanaTrackedData() for fetch-seeded account data, useSolanaSignIn() for Sign In With Solana, useSolanaAirdrop() for devnet faucet requests, useSolanaPayer() to inspect the client's fee-payer signer, useSolanaSendTransaction() and useSolanaSendTransactions() for client-sent SPL Memo transactions with no wallet popup, and the @vue-solana/vue/swr cache adapter across remounts.
  • Generating an ephemeral demo fee payer with generateKeyPairSigner() in the client-only app/plugins/demo-payer.client.ts plugin. The payer starts unfunded; the useSolanaPayer panel airdrops 1 devnet SOL into it. The Nuxt module intentionally omits payer and payerSecretKey, and raw secrets must never be placed in public runtime config.

The app uses devnet by default. Devnet SOL has no real value.

Run From The Repository Root

pnpm install
pnpm build:packages
pnpm dev:nuxt

Open the Nuxt URL printed in the terminal, usually http://localhost:3000.

What To Try

  • Check the initial module/RPC status and latest blockhash.
  • Click Load Blockhash to call client.rpc.getLatestBlockhash().send() directly.
  • Paste a devnet wallet address and refresh the balance.
  • Install a Solana browser wallet and switch it to devnet.
  • On Android Chrome, install a compatible Solana mobile wallet and look for Mobile Wallet Adapter.
  • On iOS browsers, install Phantom, Solflare, or Backpack and look for the wallet entry in the same list.
  • Select and connect a discovered wallet.
  • Reload the page and verify the same selected wallet identity is restored without selecting an arbitrary installed wallet.
  • Sign the sample auth message if the wallet reports message-signing support.
  • Confirm the message-signing button is disabled or explained when the selected wallet does not support signMessage.
  • Run the generic mock transaction.
  • Enter a recipient address and amount, then send a real transfer. Keep the example on devnet while testing.
  • Watch the transaction move from submitted signature to confirmation status.
  • Open the explorer link and verify it includes ?cluster=devnet.
  • In the Live Data Panels, airdrop 1 SOL to the demo payer with the useSolanaPayer panel, then send a client-signed SPL Memo with useSolanaSendTransaction() (no wallet popup) or a batch of two with useSolanaSendTransactions(), and watch the status move from sending to sent after the official executor reaches confirmed commitment.

The demo payer is generated in a client-only plugin and is not configured in nuxt.config.ts or public runtime config. The example sets solana.clientPlugin: false so the module skips its own plugin; installing both would create two Solana contexts. The module's default client still uses the official solanaRpc() stack, which installs the transaction planner and the plan-signing and plan-sending executors itself; the old custom fallback sender is not used. Never put a funded secret in a Nuxt public runtime value.

The transfer example initializes the browser Buffer polyfill with installSolanaBufferPolyfill() from @vue-solana/nuxt/buffer-polyfill. Restart the Nuxt dev server if Vite previously cached an externalized Buffer import.

If confirmation times out after a signature appears, do not immediately submit a duplicate transfer. Use the example's signature status or explorer link to check whether the transaction later confirmed.

Devnet SOL

Request free devnet SOL from the official faucet:

https://faucet.solana.com

Wallet Note

The example uses unified wallet discovery. Install Phantom, Solflare, Backpack, or another standard wallet before testing browser extension wallet flows. On supported Android Chrome runtimes, @solana-mobile/wallet-standard-mobile can expose installed native mobile wallets through Mobile Wallet Adapter in the same wallet list. On iOS browsers, Phantom, Solflare, and Backpack can appear through wallet-specific universal links.

Desktop native wallet protocol-link support is intentionally not part of the v1 example flow.

Vue Vite Example

Roadmap