nuxt-signature-pad
v1.1.2
Published
Nuxt 3 based smooth signature drawing
Downloads
354
Readme
Demo
Play with it on Stackblitz
Features
- Draw seamless arts in your Nuxt 3 application effortlessly.
Quick Setup
- Install the module in your Nuxt application with one command:
npx nuxi@latest module add nuxt-signature-pad
- Add
Typescript
as a dev dependency by running the command below:
npm install --save-dev Typescript
That's it! You can now use nuxt-signature-pad in your Nuxt application ✨
Usage
You can use the nuxt-signature-pad
component as shown below:
<template>
<NuxtSignaturePad
ref="signature" height="400px" width="950px" :max-width="options.maxWidth"
:min-width="options.minWidth" :options="{
penColor: options.penColor, backgroundColor: options.backgroundColor,
}"
/>
</template>
<script setup>
const options = ref({
penColor: 'rgb(0,0,0)',
backgroundColor: 'rgb(255, 255, 255)',
maxWidth: 2,
minWidth: 2,
})
const signature = ref()
</script>
You can check out all the available props and methods here
Contribution
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release