Add E-Signatures to Nuxt

Quick start

1. Get an API key from signb.ee (free, no credit card)
2. Set SIGNBEE_API_KEY in your environment
3. Add the code below to your app

Nuxt example

// server/api/send-contract.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const res = await $fetch('https://signb.ee/api/send', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.SIGNBEE_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body,
  });
  return res;
});

What happens

1. Your app sends markdown or a PDF URL to Signbee
2. Signbee generates a PDF (if markdown) and emails the recipient a signing link
3. Recipient signs — both parties receive the signed PDF with SHA-256 certificate

Also works with AI agents

Install the MCP server to let Claude, Cursor, or Windsurf send documents directly:

npx -y signbee-mcp

Integration details

Nuxt is Vue.js's full-stack framework with auto-imports, file-based routing, and server API routes. Adding e-signatures uses Nuxt's server directory for secure API endpoints.

Server routes: Nuxt's server/api/ directory creates server-only API endpoints. The defineEventHandler function runs exclusively on the server, keeping your API key secure. Use readBody() for request parsing and $fetch for HTTP calls.

Runtime config: Store SIGNBEE_API_KEY in runtimeConfig.signbeeApiKey in nuxt.config.ts. Access it via useRuntimeConfig().signbeeApiKey in server routes. Nuxt distinguishes between public and private runtime config — keep the API key in private config.

Nitro engine: Nuxt's server (Nitro) deploys to any platform — Node.js, Cloudflare Workers, Vercel, Netlify, Deno, and more. Your signing endpoint works identically across all deployment targets.

$fetch: Nuxt's $fetch (based on ofetch) provides automatic JSON parsing, error handling, and retry logic. It's the recommended HTTP client for server-side API calls in Nuxt applications.

Composables: Create a useContract composable for client-side contract management. Use useFetch or useAsyncData to call your server API endpoint reactively, with automatic loading states and error handling.

FAQs