Vue 3 Signature Pad

A beautiful signature pad component for Vue 3.

Choose pen color

Choose maximum pen line thickness

2

Choose minimum pen line thickness

2

Installation

		
	

Register it as a local component

Register it as a local component as shown below and you are good to go 🎉:

		
	

Usage

You can get the svgs from the Icones library.

		
	

Nuxt 3

If you are using Nuxt 3, you can simply install it by using nuxi as shown below and also add TypeScript as a dev dependency:

		
	
		
	

Props

Name Type Default Description
option Object {penColor:"rgb(0, 0, 0)", backgroundColor:"rgb(255,255,255)"} 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
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

TypeScript

If you are using TypeScript, below are the types that can be imported from `@selemondev/vue3-signature-pad` as shown below:

		
	
		
	

Example with Watermark