# vue-drawing

> A Vue.js project

Latest version **0.2.3** (published 2019-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-drawing
pnpm add vue-drawing
yarn add vue-drawing
bun add vue-drawing
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2019-08-22 |
| First published | 2019-08-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 2 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | BigSaltyFish |
| Maintainers | rufuss |

## Links

- npm: https://www.npmjs.com/package/vue-drawing
- Repository: https://github.com/BigSaltyFish/vue-drawing
- Homepage: https://github.com/BigSaltyFish/vue-drawing#readme
- Issues: https://github.com/BigSaltyFish/vue-drawing/issues
- npm.io page: https://npm.io/package/vue-drawing

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [paper](https://npm.io/package/paper.md) ^0.12.3

## Recent versions

- 0.2.3 (latest) — 2019-08-22
- 0.2.2 — 2019-08-17
- 0.2.1 — 2019-08-16
- 0.2.0 — 2019-08-16
- 0.1.5 — 2019-08-15
- 0.1.4 — 2019-08-15
- 0.1.3 — 2019-08-15
- 0.1.2 — 2019-08-15
- 0.1.1 — 2019-08-15
- 0.1.0 — 2019-08-15

## README

# vue drawing

This is a very simple online drawing board based on Vue.js and paper.js

It is convenient to use it in your project if you like it.

Simple stroke, redo, undo, text input will be supported. 

Vue Drawing is under development, and not all core feature is available. Anyway, all the fundamental feature will come out soon, for I am using it in my own project. 

To use it, install it as a dependency. It is just a normal Vue plugin.

```shell script
npm install vue-drawing
```

then register it in your vue project.
```javascript
import VueDrawing from "VueDrawing";

Vue.use(VueDrawing);

new Vue()       // register all plugins before instantiate Vue
```

then you can use the tag anywhere you like in your project.
If you want to export the canvas, just click the button on the right, and an event 
will be triggered, which single parameter will be the SVG representation of the canvas as a String.
```vue
<template>
  <vue-drawing @image-export="exportHandler"></vue-drawing>
</template>

<script>
  export default {
    // other code in a usual .vue file
    methods: {
      exportHandler (svg) {
        console.log(svg)
      }
    }
  }
</script>
```

You can customize the width and height of the canvas in this way.
```vue
<vue-drawing :width="1000" :height="1000"></vue-drawing>
```
The default width and height is 500 and 300 respectively.

---
_Source: https://npm.io/package/vue-drawing · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._