open-index/open-npm huggingface dataset:
npm package: @melisa-ui/signature
Description: A lightweight Vue 3 component that provides a responsive <canvas> for signatures.
Latest version: 0.1.1

# @melisa-ui/signature

A lightweight Vue 3 component that provides a responsive <canvas> for signatures.


## 📦 Installation

```bash
# npm
npm install @melisa-ui/signature
```


## 🚀 Usage

### 1. Global Plugin

```bash
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Signature from '@melisa-ui/signature'
import '@melisa-ui/signature/dist/signature.css'

const app = createApp(App)
app.use(Signature)
app.mount('#app')

```

```bash
<template>
  <Signature responsive />
</template>

```


### 2. Named Import (Recommended)

```bash
<script setup>
import { ref } from 'vue'
import { Signature } from '@melisa-ui/signature'
import '@melisa-ui/signature/dist/@melisa-ui/signature.css'

const signatureRef = ref<{
  clearSignature: () => void
  undo: () => void
  redo: () => void
  getBlob: () => Promise<Blob | null>
} | null>(null)

const downloadImage = async () => {
  const blob = await signatureRef.value?.getBlob()
  if (blob) {
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = 'signature.png'
    a.click()
    URL.revokeObjectURL(url)
  }
}
</script>

<template>
  <Signature ref="signatureRef" responsive />
  <button @click="downloadImage">Download</button>
</template>

```

## 📄 License
MIT © 2025 juumelisa