nuxt-signature-pad

Demo

Play with it on Stackblitz

Features

• Draw seamless arts in your Nuxt 3 application effortlessly.

Quick Setup

1. Install the module in your Nuxt application with one command:

npx nuxi@latest module add nuxt-signature-pad

2. 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