Electronic Signature Component For Vue 3

E-signatures are on their way to becoming a requirement for some documents. This is because they provide legal proof and can be used for identity verification. If you have ever needed an e-signature on a document, then you should know that Vue.js is the perfect framework for this use-case.

In this article, we are going to build an electronic signature component for Vue.js 3 so we can sign documents and make them legally binding.

How to use it:

1. Import and register the component.

import Vue3Signature from "vue3-signature"
import {reactive, ref} from 'vue'
createApp(App).use(Vue3Signature).mount("#app")

2. Add the signature component to the template.

<!-- Signature Component -->
<Vue3Signature ref="signature1" :sigOption="state.option" :w="'1280px'" :h="'400px'" :disabled="state.disabled" class="example"></Vue3Signature>
<!-- Action Buttons -->
<button @click="save('image/jpeg')">Save</button>
<button @click="clear">Clear</button>
<button @click="undo">Undo</button>
<button @click="addWaterMark">addWaterMark</button>
<button @click="fromDataURL">fromDataURL</button>
<button @click="handleDisabled">disabled</button>

const state = reactive({
  count: 0,
  option: {
    penColor: "rgb(0, 0, 0)",
    backgroundColor: "rgb(255,255,255)"
  },
  disabled: false
})
const signature1 = ref(null)
const save = (t) => {
  console.log(signature1.value.save(t))
}
const clear = () => {
  signature1.value.clear()
}
const undo = () => {
  signature1.value.undo();
}
const addWaterMark = () => {
  signature1.value.addWaterMark({
    text: "mark text",          // watermark text, > default ''
    font: "20px Arial",         // mark font, > default '20px sans-serif'
    style: 'all',               // fillText and strokeText,  'all'/'stroke'/'fill', > default 'fill
    fillStyle: "red",           // fillcolor, > default '#333'
    strokeStyle: "blue",         // strokecolor, > default '#333'
    x: 100,                     // fill positionX, > default 20
    y: 200,                     // fill positionY, > default 20
    sx: 100,                    // stroke positionX, > default 40
    sy: 200                     // stroke positionY, > default 40
  });
}
const fromDataURL = (url) => {
  signature1.value.fromDataURL("/path/to/url/");
}
const handleDisabled = () => {
  state.disabled = !state.disabled
}

3. Available component props.

sigOption: {
  type: Object,
  default: () => {
    return {
      backgroundColor: "rgb(255,255,255)",
      penColor: "rgb(0, 0, 0)",
    };
  },
},
w: {
  type: String,
  default: "100%",
},
h: {
  type: String,
  default: "100%",
},
clearOnResize: {
  type: Boolean,
  default: false,
},
waterMark: {
  type: Object,
  default: () => {
    return {};
  },
},
disabled: {
  type: Boolean,
  default: false,
},
defaultUrl: {
  type: String,
  default: "",
}

Preview:

Changelog:

v0.2.2 (09/14/2022)

• canvas style set const value 100%

v0.2.1 (09/07/2022)

• update

v0.1.20 (07/13/2022)

• canvas style set const value 100%

06/21/2022

• Fixed Watermark Position Issue

Download Details:

Author: WangShayne

Live Demo: https://github.com/WangShayne/vue3-signature

Download Link: https://github.com/WangShayne/vue3-signature/archive/refs/heads/main.zip

Official Website: https://github.com/WangShayne/vue3-signature

Install & Download:

# NPM
$ npm i vue3-signature