Embed signing with Vue (v2)

npm install @sajn/[email protected]

// server/api/sajn/embed-session.post.ts
export default defineEventHandler(async (event) => {
  // Replace with your own auth and your own lookup of the document and party.
  const user = await requireSignedInUser(event);
  const { documentId, partyId } = await findSigningForUser(user.id);

  const session = await $fetch<{ clientSecret: string }>("https://app.sajn.se/api/v1/embed-sessions", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.SAJN_API_KEY}`,
      "Sajn-Version": "2026-10",
    },
    body: { documentId, partyId, origins: ["https://app.example.com"] },
  });

  return { clientSecret: session.clientSecret };
});

<script setup lang="ts">
import { SigningEmbed } from "@sajn/embed-vue";
import type { EmbedIds, SigningEmbedError } from "@sajn/embed-vue";

async function fetchClientSecret() {
  const { clientSecret } = await $fetch<{ clientSecret: string }>("/api/sajn/embed-session", { method: "POST" });
  return clientSecret;
}

function handleSigned({ documentId }: EmbedIds) {
  navigateTo(`/signed?doc=${documentId}`);
}

function handleError({ code, message }: SigningEmbedError) {
  console.error(code, message);
}
</script>

<template>
  <SigningEmbed
    class="signing"
    :fetch-client-secret="fetchClientSecret"
    @signed="handleSigned"
    @error="handleError"
  />
</template>

<style scoped>
.signing {
  height: 80vh;
}
</style>

<SigningEmbed
  :fetch-client-secret="fetchClientSecret"
  :appearance="{ colorScheme: isDark ? 'dark' : 'light', colors: { primary: '#0f766e' } }"
  :locale="language"
/>

import type {
  Appearance,
  EmbedErrorCode,
  EmbedIds,
  EmbedState,
  Locale,
  PartyStatus,
  SigningEmbedError,
} from "@sajn/embed-vue";