vue-signature-pad

Install the package using yarn:

$ yarn add vue-signature-pad

Note on versions:

• For Vue 2, install version 2.0.5.
• For Vue 3, install the latest publish version.

To use the component globally in a Vue 3 project, register it as a component on your app instance.

import { createApp } from 'vue'
import App from './App.vue'
import { VueSignaturePad } from 'vue-signature-pad';

const app = createApp(App)
app.component("VueSignaturePad", VueSignaturePad);
app.mount('#app')

To use the component globally in a Vue 2 project, import VueSignaturePad and use the Vue.use() method.

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

Vue.use(VueSignaturePad);

You can pass event callbacks like onBegin and onEnd through the options prop to react to drawing lifecycle events.

<template>
  <div id="app">
    <VueSignaturePad
      width="500px"
      height="500px"
      ref="signaturePad"
      :options="{ onBegin, onEnd }"
    />
  </div>
</template>

<script>
export default {
  methods: {
    onBegin() {
      console.log('=== Begin ===');
    },
    onEnd() {
      console.log('=== End ===');
    }
  }
};
</script>

If you prefer not to register the component globally, you can import and declare it directly within your component's components option.

<template>
  <div id="app">
    <VueSignaturePad width="500px" height="500px" ref="signaturePad" />
    <div>
      <button @click="save">Save</button>
      <button @click="undo">Undo</button>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { VueSignaturePad } from 'vue-signature-pad';

export default defineComponent({
  name: 'MySignaturePad',
  components: { VueSignaturePad },
  methods: {
    undo() {
      this.$refs.signaturePad.undoSignature();
    },
    save() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
      console.log(isEmpty);
      console.log(data);
    }
  }
});
</script>

The VueSignaturePad component accepts the following props:

You can import the VueSignaturePad component directly from the package entry point. This component is the primary interface for integrating the signature pad into your Vue application.

import { VueSignaturePad } from 'vue-signature-pad';

To use Vue Signature Pad, import the default plugin export from the package. This plugin object contains the Vue plugin installation method and also includes all individual signature pad components as properties on the plugin object itself. This allows you to either install the plugin globally in your Vue application or access specific components directly from the plugin object.

import VueSignaturePad from 'vue-signature-pad';

// To install globally in Vue 2:
Vue.use(VueSignaturePad);

// Or to use components directly:
const { SignaturePad } = VueSignaturePad;

When saving a signature, the library supports the following MIME types:

• image/png
• image/jpeg
• image/svg+xml

You can verify if a specific type is supported using the checkSaveType utility function.

export const IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/svg+xml'];

The TRANSPARENT_PNG constant provides a base64 encoded 1x1 transparent PNG image. This can be used as a placeholder or a default value for signature image sources.

export const TRANSPARENT_PNG = {
  src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=',
  x: 0,
  y: 0
};