Vue 3 Signature Pad

Installation

# ✨ Auto-detect
npx nypm install @selemondev/vue3-signature-pad

# npm
npm install @selemondev/vue3-signature-pad

# yarn
yarn add @selemondev/vue3-signature-pad

# pnpm
pnpm install @selemondev/vue3-signature-pad

# bun
bun install @selemondev/vue3-signature-pad

# deno
deno install @selemondev/vue3-signature-pad

Usage

<script setup lang="ts">
import { VueSignaturePad } from "@selemondev/vue3-signature-pad";
import type { Signature } from "@selemondev/vue3-signature-pad";
import { ref, useTemplateRef } from "vue";

const state = ref({
    disabled: false,
});

const signature = useTemplateRef<Signature>("signature");

function dataURLToBlob(dataURL: string) {
    // Code taken from https://github.com/ebidel/filer.js
    const parts = dataURL.split(";base64,");
    const contentType = parts[0]?.split(":")[1];
    const raw = window.atob(parts[1]!);
    const rawLength = raw.length;
    const uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }

    return new Blob([uInt8Array], { type: contentType });
}
function handleSave(dataURL: string, downloadFormat: string) {
    if (signature.value?.isCanvasEmpty())
        return alert("Signature cannot be empty!");
    const _data_url = signature.value?.toDataURL(dataURL);
    const blob = dataURLToBlob(_data_url!);
    const url = window.URL.createObjectURL(blob);

    const a = document.createElement("a");
    a.style = "display: none";
    a.href = url;
    a.download = downloadFormat;

    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
}
function handleClear() {
    return signature.value?.clearCanvas();
}
function handleUndo() {
    return signature.value?.undo();
}
</script>

<template>
    <div class="grid place-items-center w-full min-h-screen">
        <div class="flex flex-col items-center space-y-4">
            <div class="bg-gray-100 p-6">
                <VueSignaturePad
                    ref="signature"
                    height="400px"
                    width="1280px"
                    :max-width="2"
                    :min-width="2"
                    :disabled="state.disabled"
                />
            </div>

            <button type="button" @click="handleSave('image/jpeg', 'signature-pad.jpg')">
                Save
            </button>
            <button type="button" @click="handleClear">Clear</button>
            <button type="button" @click="handleUndo">Undo</button>
        </div>
    </div>
</template>

Props

name	type	default	description
option	Object	{penColor:"oklch(0.0% 0.000 0.0)", backgroundColor:"oklch(100.0% 0.000 89.9)"}	penColor and backgroundColor
width	String	"100%"	Pad width
height	String	"100%"	Pad height
throttle	Number	16	Draw the next point at most once per every x milliseconds
maxWidth	Number	2	Maximum thickness of the pen line
minWidth	Number	2	Minimum thickness of the pen line
clearOnResize	Boolean	false	Clear canvas on window resize
scaleOnResize	Boolean	true	When true, scales the signature image to fit new canvas dimensions on resize. When false, redraws using original stroke data without distortion (useful for orientation changes on mobile devices)
waterMark	Object	{}	Add addWaterMark
disabled	Boolean	false	Disable canvas
defaultUrl	String	""	Show image by default

Events

name	params	description
saveSignature	format (() / image/jpeg / image/svg)	Save image as PNG/JPEG or SVG
clearCanvas		Clear canvas
isCanvasEmpty		Returns true if the canvas is empty, otherwise it returns false
undo		Remove the last drawing
addWaterMark	{}	Add waterMark
fromDataURL	(url)	Draw signature image from data URL.
handleBeginStroke		Emits Signature started when the user starts drawing on the canvas.
handleEndStroke		Emits Signature ended when the user stops drawing on the canvas.
handleBeforeUpdateStroke		Emits Signature before update before the drawing gets updated on the canvas.
handleAfterUpdateStroke		Emits Signature after update after the drawing gets updated on the canvas.

Credits go to these amazing projects

• Signature Pad

• Vue 3 Signature - Vue 3 Signature Pad is an enhanced version of Vue 3 Signature with type safety and more options.