Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/docusealco/signature-maker-vue
Easy to use signature maker for Vue applications
https://github.com/docusealco/signature-maker-vue
signature vue vue-signature
Last synced: 4 months ago
JSON representation
Easy to use signature maker for Vue applications
- Host: GitHub
- URL: https://github.com/docusealco/signature-maker-vue
- Owner: docusealco
- License: mit
- Created: 2024-09-17T11:36:00.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-09-26T12:56:05.000Z (4 months ago)
- Last Synced: 2024-09-29T11:45:35.014Z (4 months ago)
- Topics: signature, vue, vue-signature
- Language: TypeScript
- Homepage: https://www.docuseal.co/docs/embedded/signature#vue
- Size: 27.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Signature Maker Vue
Signature Maker is a Vue component that lets users draw or type their signature.
#### Other implementations
- [Vanilla JS](https://github.com/docusealco/signature-maker-js)
- [React](https://github.com/docusealco/signature-maker-react)
## Demo
Try the live demo [here](https://www.docuseal.co/online-signature)
## Documentation
Check out the full documentation [here](https://www.docuseal.co/docs/embedded/signature#vue).
## Installation
```bash
npm install @docuseal/signature-maker-vue
```
OR
```bash
yarn add @docuseal/signature-maker-vue
```
## Usage
Basic Usage with standard styles and default signature saving behavior:
```vue
import { SignatureMaker } from '@docuseal/signature-maker-vue'
export default {
name: 'App',
components: {
SignatureMaker
}
}
```
---
Usage with default styles but custom signature saving behavior, such as uploading the signature to a server:
```vue
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 }),
});
},
},
};
```
---
Usage without a save signature button, embedded in another form. The signature will be stored in a form field named `signature`:
```vue
Submit
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,
}),
});
},
},
};
```
---
Usage without a save signature button and tracking each signature change:
```vue
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');
}
},
},
};
```
---
Usage with custom button labels and classes (DaisyUI):
```vue
import { SignatureMaker } from '@docuseal/signature-maker-vue';
export default {
name: 'App',
components: {
SignatureMaker,
},
};
```
---
Usage with customization of certain elements using CSS classes and styles:
```vue
import { SignatureMaker } from '@docuseal/signature-maker-vue';
export default {
name: 'App',
components: {
SignatureMaker,
},
};
```
## Customization
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](https://www.docuseal.co/docs/embedded/signature#vue).
# License
MIT