vue-svg-sketch

A Vue.js component Demo

Installation

Install through npm:

npm install vue-svg-sketch

Available props:

• disabled - state disabled (Boolean)
• width - svg width (Number)
• height - svg height (Number)
• size - size brash (Number)[default: 3]
• color - color brash [default: 'red']

Usage

<template>
    <div id="app">
        <svg-sketch ref="sketch"
                    :disabled="disabled"
                    :width="800"
                    :height="600"
                    :size="size"
                    :color="color"></svg-sketch>
    </div>
</template>
 
<script>
    import svgSketch from 'vue-svg-sketch'
 
    export default {
        name: 'app',
        components: {
            svgSketch
        },
        data () {
            return {
                disabled: false,
                size: 3,
                color: '#000',
                json: ''
            }
        },
        methods: {
            revert () {
                this.$refs.sketch.revert()
            },
            clean () {
                this.$refs.sketch.clean()
            },
            getJSON () {
                console.log(this.$refs.sketch.getJSON())
                alert('See console')
            }
        }
    }
</script>

Build Setup

# install dependencies
npm install
 
# serve with hot reload at localhost:8080
npm run dev
 
# build for production with minification
npm run build
 
# build for production and view the bundle analyzer report
npm run build --report
 
# run unit tests
npm run unit
 
# run e2e tests
npm run e2e
 
# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.