2
2
Register it as a local component as shown below and you are good to go 🎉:
You can get the svgs from the Icones library.
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 |
|---|---|---|---|
| options | 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: