Vue Sketcher is a lightweight and easy-to-use drawing component for Vue.js with no additional dependencies.
Check out the live demo here.
- Very lightweight and easy to use!
- No dependencies
- Draw smooth brush strokes & erase
- Adjustable brush size and color picker
- Draw rectangles and circles with a preview while dragging
- Undo/redo with a configurable history limit
- Save the drawing as an image
npm install vue-sketcherTo quickly get started, follow these steps:
-
Install the library:
npm install vue-sketcher
-
Import and use the component in your Vue application:
<template> <VueSketcher :canvasWidth="800" :canvasHeight="600" :defaultBrushSize="5" :defaultColor="'#000'" :maxHistorySteps="10" /> </template> <script setup> import VueSketcher from 'vue-sketcher'; </script>
| Prop | Type | Default | Description |
|---|---|---|---|
| canvasWidth | Number | 800 | Width of the canvas in pixels |
| canvasHeight | Number | 600 | Height of the canvas in pixels |
| defaultColor | String | '#000000' | Default brush color |
| defaultBrushSize | Number | 5 | Default brush size |
| backgroundColor | String | '#ffffff' | Background color of the canvas |
| maxHistorySteps | Number | 50 | Maximum number of undo/redo steps |
| defaultTool | String | 'brush' | Default tool selected (brush, eraser, rectangle, circle) |
| fillShapes | Boolean | true | Whether to fill shapes (rectangles and circles) |
git clone git@github.com:Bubalubs/vue-sketcher.git
cd vue-sketcher
npm install
npm run devContributions are welcome! Feel free to open an issue or submit a pull request. 😊
This project is licensed under the GPL-3.0 License. See the LICENSE file for details.