Vue signature pad

SignaturePad component for Vue.js

Version: 3.0.2 Updated: 06/11/2022 By: neighborhood999 License: MIT

DownloadsLast30Days: 85.1k

npm i vue-signature-pad
yarn add vue-signature-pad

Vue Signature Pad

Build Status npm styled with prettier

Vue component wrap for signature pad

Note: If you are still using Vue 2, please install 2.0.5 version, for Vue 3 you can install the latest publish version.


Edit Vue Signature Pad Demo


$ yarn add vue-signature-pad


import Vue from 'vue';
import VueSignaturePad from 'vue-signature-pad';

  <div id="app">
    <VueSignaturePad width="500px" height="500px" ref="signaturePad" />
      <button @click="save">Save</button>
      <button @click="undo">Undo</button>
export default {
  name: 'MySignaturePad',
  methods: {
    undo() {
    save() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();

vue-signature-pad use szimek/signature_pad default setting as options, feel free custom you wanted options. In v1.1 add onBegin and onEnd event callback:

  <div id="app">
      :options="{ onBegin, onEnd }"
export default {
  methods: {
    onBegin() {
      console.log('=== Begin ===');
    onEnd() {
      console.log('=== End ===');


Name Type Default Description Example
width String 100% Set the div width. -
height String 100% Set the div height. -
options Object Reference Set the signature pad options. Reference
images Array [] Merge signature with the provide images. ['A.png', 'B.png', 'C.png'] or [{ src: 'A.png', x: 0, y: 0 }, { src: 'B.png', x: 0, y: 10 }, { src: 'C.png', x: 0, y: 20 }]
customStyle Object {} Custom div style. { border: black 3px solid }
scaleToDevicePixelRatio Boolean true Scale the canvas up to match the device pixel ratio. -


Name Argument Type Description
saveSignature(type, encoderOptions) (String, Number) Will return target canvas status and data.
undoSignature() - Undo
clearSignature() - Clear
mergeImageAndSignature(signature) Object or String Provide images as props and will merge with signature.
addImages(images) Array Provide the images merge with signature. Reference above images property.
lockSignaturePad() - Lock target signature pad.
openSignaturePad() - Open target signature pad.
getPropImagesAndCacheImages() - Get all the images information.
clearCacheImages() - Clear cache images.
fromDataURL(data, options, callback) (String, Object, Callback) Draw image from data URL.
fromData(data) String Returns signature image as an array of point groups.
toData() - Draws signature image from an array of point groups.
isEmpty() - Return signature canvas have data.


szimek/signature_pad - HTML5 canvas based smooth signature drawing


MIT © Peng Jie

Categories: UI ComponentsCanvas