@pdf-sign/vue

Vue 3 PDF e-signature components. Drop-in prepare and sign modes.

Install

pnpm add @pdf-sign/vue @pdf-sign/tailwind-plugin pdfjs-dist pdf-lib

Setup

// main.ts
import { createApp } from 'vue'
import { PdfSignPlugin } from '@pdf-sign/vue'
import '@pdf-sign/vue/base.css'
import App from './App.vue'

createApp(App).use(PdfSignPlugin).mount('#app')

Prepare mode

<template>
  <PdfSigner
    mode="prepare"
    :pdf="myFile"
    :signers="[{ id: 'alice', name: 'Alice', order: 1, color: '#6366f1' }]"
    @template-ready="onTemplate"
    @error="onError"
  />
</template>

Sign mode

<template>
  <PdfSigner
    mode="sign"
    :pdf="myFile"
    :template="savedTemplate"
    signer-id="alice"
    @signing-complete="onComplete"
  />
</template>

Theming

<!-- Via prop -->
<PdfSigner :theme="{ primary: '#dc2626', primaryFg: '#fff' }" />

/* Via CSS vars */
.pdf-sign-root {
  --psign-primary: #dc2626;
  --psign-radius: 2px;
}

Headless

import { usePdfSign } from '@pdf-sign/vue'

const { state, fields, addField, buildTemplate } = usePdfSign({
  mode: 'prepare',
  pdf: myFile,
})