2
2
Register it as a local component as shown below and you are good to go 🎉:
If you are using Nuxt 3, you can simply install it by using nuxi as shown below and also add TypeScript as a dev dependency:
Name | Type | Default | Description |
---|---|---|---|
option | Object | {penColor:"rgb(0, 0, 0)", backgroundColor:"rgb(255,255,255)"} | penColor and backgroundColor |
width | String | "100%" | Pad width |
height | String | "100%" | Pad height |
throttle | Number | 16 | Draw the next point at most once per every x milliseconds |
maxWidth | Number | 2 | Maximum thickness of the pen line |
minWidth | Number | 2 | Minimum thickness of the pen line |
clearOnResize | Boolean | false | Clear canvas on window resize |
waterMark | Object | {} | Add addWaterMark |
disabled | Boolean | false | Disable canvas |
defaultUrl | String | "" | Show image by default |
Name | Params | Description |
---|---|---|
saveSignature | format (() / image/jpeg / image/svg) | Save image as PNG/JPEG or SVG |
clearCanvas | Clear canvas | |
isCanvasEmpty | Returns true if the canvas is empty, otherwise it returns false | |
undo | Remove the last drawing | |
addWaterMark | {} | Add waterMark |
fromDataURL | (url) | Draw signature image from data URL |
handleBeginStroke | Emits `Signature started` when the user starts drawing on the canvas | |
handleEndStroke | Emits `Signature ended` when the user stops drawing on the canvas | |
handleBeforeUpdateStroke | Emits `Signature before update` before the drawing gets updated on the canvas | |
handleAfterUpdateStroke | Emits `Signature after update` after the drawing gets updated on the canvas |
If you are using TypeScript, below are the types that can be imported from `@selemondev/vue3-signature-pad` as shown below: