Signature Maker is a Vue component that lets users draw or type their signature.
Try the live demo here
Check out the full documentation here.
npm install @docuseal/signature-maker-vueOR
yarn add @docuseal/signature-maker-vueBasic Usage with standard styles and default signature saving behavior:
<template>
<SignatureMaker :download-on-save="true" />
</template>
<script>
import { SignatureMaker } from '@docuseal/signature-maker-vue'
export default {
name: 'App',
components: {
SignatureMaker
}
}
</script>Usage with default styles but custom signature saving behavior, such as uploading the signature to a server:
<template>
<div class="app">
<SignatureMaker @save="handleSave" />
</div>
</template>
<script>
import { SignatureMaker } from '@docuseal/signature-maker-vue';
export default {
name: 'App',
components: {
SignatureMaker,
},
methods: {
handleSave(event) {
fetch('/save-signature', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ file: event.base64 }),
});
},
},
};
</script>Usage without a save signature button, embedded in another form. The signature will be stored in a form field named signature:
<template>
<div class="app">
<form @submit.prevent="handleSubmit">
<input v-model="name" name="name" type="text" />
<SignatureMaker
v-model="signatureBase64"
:with-submit="false"
/>
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
import { SignatureMaker } from '@docuseal/signature-maker-vue';
export default {
name: 'App',
components: {
SignatureMaker,
},
data() {
return {
name: '',
signatureBase64: null,
};
},
methods: {
handleSubmit() {
fetch('/submit-form', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: this.name,
signature: this.signatureBase64,
}),
});
},
},
};
</script>Usage without a save signature button and tracking each signature change:
<template>
<div class="app">
<SignatureMaker
:with-submit="false"
@change="handleChange"
/>
</div>
</template>
<script>
import { SignatureMaker } from '@docuseal/signature-maker-vue';
export default {
name: 'App',
components: {
SignatureMaker,
},
methods: {
handleChange(event) {
if (event.base64) {
fetch('/background-save-signature', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ file: event.base64 }),
});
} else {
console.log('No signature to save');
}
},
},
};
</script>Usage with custom button labels and classes (DaisyUI):
<template>
<div class="app">
<SignatureMaker
class="block my-8"
save-button-text="Télécharger"
undo-button-text="Annuler"
clear-button-text="Clair"
draw-type-button-text="Dessiner"
text-type-button-text="Type"
upload-type-button-text="Télécharger"
text-input-placeholder="Tapez votre signature ici"
type-buttons-container-class="flex gap-2 mb-4 justify-center"
draw-type-button-class="flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
draw-type-button-active-class="bg-neutral text-white font-semibold"
text-type-button-class="flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
text-type-button-active-class="bg-neutral text-white font-semibold"
upload-type-button-class="flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
upload-type-button-active-class="bg-neutral text-white font-semibold"
text-input-class="input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl"
canvas-class="bg-white border border-base-300 rounded-2xl w-full"
undo-button-class="btn btn-outline btn-sm font-medium"
clear-button-class="btn btn-outline btn-sm font-medium"
save-button-class="btn btn-neutral text-white text-base w-full"
/>
</div>
</template>
<script>
import { SignatureMaker } from '@docuseal/signature-maker-vue';
export default {
name: 'App',
components: {
SignatureMaker,
},
};
</script>Usage with customization of certain elements using CSS classes and styles:
<template>
<div class="app">
<SignatureMaker
save-button-class="btn btn-neutral text-white text-base w-full"
canvas-class="bg-white border border-base-300 rounded-2xl w-full"
canvas-style="border: 2px solid #000;"
/>
</div>
</template>
<script>
import { SignatureMaker } from '@docuseal/signature-maker-vue';
export default {
name: 'App',
components: {
SignatureMaker,
},
};
</script>
Signature Maker can be customized with the following attributes:
:download-on-save
:with-typed
:with-drawn
:with-upload
:with-color-select
:with-submit
:save-button-text
:control-buttons-container-class
:control-buttons-container-style
:save-button-class
:save-button-style
:save-button-disabled-class
:save-button-disabled-style
:undo-button-text
:undo-button-class
:undo-button-style
:clear-button-text
:clear-button-class
:clear-button-style
:text-input-placeholder
:text-input-class
:text-input-style
:canvas-class
:canvas-style
:type-buttons-container-class
:type-buttons-container-style
:draw-type-button-text
:draw-type-button-class
:draw-type-button-style
:draw-type-button-active-class
:draw-type-button-active-style
:text-type-button-text
:text-type-button-class
:text-type-button-style
:text-type-button-active-class
:text-type-button-active-style
:upload-type-button-text
:upload-type-button-class
:upload-type-button-style
:upload-type-button-active-class
:upload-type-button-active-style
:font-url
@save
@change
The full documentation with detailed configuration and event descriptions can be found here.
MIT