Nuxt- Zap

Nuxt module for Zap payments using @getalby/sdk.

• ✨  Release Notes

Features

• Send a zap (Lightning payment) to a Lightning Address using @getalby/sdk (WebLN)
  Falls back to window.webln if the SDK provider is not available.
• Automatic mobile fallback: if no WebLN provider is available (mobile browsers without extensions), an invoice is requested and a lightning: deep link is opened to hand off to a mobile wallet. The invoice is also returned so you can show a QR or copy button in your UI.
• Simple Zap component with amount and comment input.

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @threenine/nuxt-zap

That's it! You can now use My Module in your Nuxt app ✨

Configuration

Add to your nuxt.config:

export default defineNuxtConfig({
  modules: ['@threenine/nuxt-zap'],
  nuxtZap: {
    zapAddress: '[email protected]',
    defaultAmount: 21,
    messageTemplate: 'Zap from Nuxt',
  },
})

Usage

• Component:

<template>
  <ZapButton title="Zap me" />
</template>

• Programmatic:

const { $zap } = useNuxtApp()
await $zap.send(100, 'Thanks!')

If a WebLN provider is available (e.g. Alby browser extension), it will be used to pay directly. On mobile without extensions, the module will open a lightning: deep link to your default wallet and also return the BOLT11 invoice so you can display a QR or link.

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release