### Install Project Dependencies with pnpm

Source: https://github.com/selemondev/vue3-signature-pad/blob/main/website/README.md

This command installs all necessary project dependencies using pnpm, a fast and disk-space efficient package manager. It should be run after cloning the repository to set up the development environment.

```sh
pnpm install
```

--------------------------------

### Run Development Server with Hot-Reload

Source: https://github.com/selemondev/vue3-signature-pad/blob/main/website/README.md

This command starts the development server, enabling hot-reloading for rapid development. It's used to preview changes in real-time during the development phase.

```sh
pnpm dev
```

--------------------------------

### Build Project for Production

Source: https://github.com/selemondev/vue3-signature-pad/blob/main/website/README.md

This command performs type-checking, compiles, and minifies the project code for production deployment. It optimizes the application for performance and size.

```sh
pnpm build
```

--------------------------------

### Install Vue 3 Signature Pad via npm

Source: https://github.com/selemondev/vue3-signature-pad/blob/main/README.md

Instructions to install the Vue 3 Signature Pad component using the npm package manager. This command adds the component to your project's dependencies.

```bash
npm install @selemondev/vue3-signature-pad
```

--------------------------------

### Vue 3 Signature Pad Component Script Setup

Source: https://github.com/selemondev/vue3-signature-pad/blob/main/README.md

Demonstrates how to import and use the VueSignaturePad component in a Vue 3 script setup. It includes state management for options, color selection, and various handler functions for signature pad operations like saving, clearing, undoing, disabling, loading from URL, and adding watermarks.

```ts
<script setup lang="ts">
import { VueSignaturePad } from "@selemondev/vue3-signature-pad"
import { onMounted, ref } from "vue";

const state = ref({
  options: {
    penColor: 'rgb(0, 0, 0)',
    backgroundColor: 'rgb(255, 255, 255)'
  },
  disabled: false,
})

const colors = [
  {
    color: 'rgb(51, 133, 255)'
  },

  {
    color: 'rgb(85, 255, 51)'
  },

  {
    color: 'rgb(255, 85, 51)'
  }
];

const activeColor = ref();

const signature = ref();

const handleSave = (format?: string) => {
  return alert(signature.value.saveSignature(format))
};
const handleClear = () => {
  return signature.value.clearCanvas()
};
const handleUndo = () => {
  return signature.value.undo()
};

const handleDisabled = () => {
    return state.value.disabled = !state.value.disabled;
};

const handleFromDataURL = (url: string) => {
  return signature.value.fromDataURL(url);
};

const handleAddWaterMark = () => {
    return signature.value.addWaterMark({
    text: "Selemondev",          // 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
  });
}
</script>
```

--------------------------------

### Standard Commit Message Format (Conventional Changelog)

Source: https://github.com/selemondev/vue3-signature-pad/blob/main/CONTRIBUTING.md

This snippet illustrates the required format for commit messages, adhering to the conventional-changelog standard. It includes a type, an optional scope, a description, and optional body and footers, ensuring consistency and automated changelog generation.

```bash
<type>[optional scope]: <description>

[optional body]

[optional footer(s)]
```

--------------------------------

### Defined Commit Types for Conventional Changelog

Source: https://github.com/selemondev/vue3-signature-pad/blob/main/CONTRIBUTING.md

This section defines the standard commit types used in the project, following the conventional-changelog specification. Each type indicates the nature of the change, such as 'feat' for new features, 'fix' for bug fixes, and 'docs' for documentation updates, aiding in clear version control and changelog generation.

```APIDOC
Commit Types:
  feat: Adding a new snippet or significant functionality.
  fix: Addressing bugs or issues.
  docs: Commits related to documentation changes.
  style: Commits related to code formatting, styling, or theming.
  refactor: Code changes that enhance the library's structure without introducing new features or fixing bugs.
  perf: Commits aimed at improving performance.
  test: Commits related to testing.
  chore: Other commits not affecting source or test files directly.
```

--------------------------------

### Vue 3 Signature Pad Component Template Usage

Source: https://github.com/selemondev/vue3-signature-pad/blob/main/README.md

Illustrates the HTML template structure for integrating the VueSignaturePad component. It shows how to bind properties like `height`, `width`, `maxWidth`, `minWidth`, `disabled`, and `options`, and how to attach event handlers to buttons for various signature pad actions.

```html
<template>
  <div class="grid place-items-center w-full min-h-screen">
    <div class="flex flex-col items-center space-y-4">
      <div class="bg-gray-100 p-6">
        <VueSignaturePad ref="signature" height="400px" width="1280px" :maxWidth="2" :minWidth="2"
        :disabled="state.disabled"
          :options="{
            penColor: state.options.penColor, backgroundColor: state.options.backgroundColor
          }" />
      </div>

      <button type="button" @click="handleSave('image/jpeg')">Save</button>
       <button type="button" @click="handleClear">Clear</button>
       <button type="button" @click="handleUndo">Undo</button>
       <button type="button" @click="handleDisabled">Disabled</button>
       <button type="button" @click="handleFromDataURL('https://github.com/selemondev.png')">
       FromData URL
       </button>
       <button type="button" @click="handleAddWaterMark">Add watermark</button>
    </div>
  </div>
</template>
```

--------------------------------

### Vue 3 Signature Pad Component Events Reference

Source: https://github.com/selemondev/vue3-signature-pad/blob/main/README.md

This section provides a comprehensive reference for all events emitted by the Vue 3 Signature Pad component. It includes event names, expected parameters, and a description of what each event signifies or triggers, enabling precise control and responsiveness in applications.

```APIDOC
Events:
  saveSignature(format: '()' | 'image/jpeg' | 'image/svg')
    description: Save image as PNG/JPEG or SVG
  clearCanvas()
    description: Clear canvas
  isCanvasEmpty()
    description: Returns true if the canvas is empty, otherwise it returns false
  undo()
    description: Remove the last drawing
  addWaterMark(options: {})
    description: Add waterMark
  fromDataURL(url: string)
    description: Draw signature image from data URL.
  handleBeginStroke()
    description: Emits `Signature started` when the user starts drawing on the canvas.
  handleEndStroke()
    description: Emits `Signature ended` when the user stops drawing on the canvas.
  handleBeforeUpdateStroke()
    description: Emits `Signature before update` before the drawing gets updated on the canvas.
  handleAfterUpdateStroke()
    description: Emits `Signature after update` after the drawing gets updated on the canvas.
```

--------------------------------

### Vue 3 Signature Pad Component Props API

Source: https://github.com/selemondev/vue3-signature-pad/blob/main/README.md

API documentation for the VueSignaturePad component's configurable properties. It details each prop's name, type, default value, and a brief description of its purpose.

```APIDOC
VueSignaturePad Props:
  option:
    type: Object
    default: {penColor:"rgb(0, 0, 0)", backgroundColor:"rgb(255,255,255)"}
    description: penColor and backgroundColor
  width:
    type: String
    default: "100%"
    description: Pad width
  height:
    type: String
    default: "100%"
    description: Pad height
  throttle:
    type: Number
    default: 16
    description: Draw the next point at most once per every x milliseconds
  maxWidth:
    type: Number
    default: 2
    description: Maximum thickness of the pen line
  minWidth:
    type: Number
    default: 2
    description: Minimum thickness of the pen line
  clearOnResize:
    type: Boolean
    default: false
    description: Clear canvas on window resize
  waterMark:
    type: Object
    default: {}
    description: Add addWaterMark
  disabled:
    type: Boolean
    default: false
    description: Disable canvas
  defaultUrl:
    type: String
    default: ""
    description: Show image by default
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.