Svg.js: how can I use in vue

[imkiven]

Hello,I am confused in how can use in VUE project,could you give a example

[Alixhan]

Read official documents

[Xiaoleng123]

<template> <div id="drawing"> </template>

import SVG from 'svg.js'
export default {
  mounted () {
    this.draw = SVG('drawing').size(200, 200)
  }
}

[GeoffCapper]

As noted in #948 & #954 the documentation is for version 2.7 and hasn't been updated to the 3.x series so "Read official documents" wont work. To get the 3.x series to work in Vue I've used:

<template>
    <div>
        <div id="tester"></div>
    </div>
</template>

<script>
    import {SVG} from "@svgdotjs/svg.js";

    export default {
        name: 'home',
        data () {
            return {
            };
        },
        mounted: function() {
            this.draw = SVG().addTo('#tester').size(300, 300);
            var rect = this.draw.rect(100, 100).attr({ fill: '#f06' });
        },
    }
</script>

[Fuzzyma]

@GeoffCapper your code looks fine. However, I am not a user of vue so I cant really judge. But as far as I can tell the svg.js part is correct.

[epaezrubio]

A better idea is to use $refs instead of tag ids. Ideally in Vue you will be reusing your component in different places and using global ids is considered a bad practice. Also I'd recommend using the unmounted hook to clear your svg.js instance.

Furthermore, you need to declare the draw property in the object returned by the data function. Otherwise Vue won't create an observer for that property.

Check this pen https://codepen.io/epaezrubio/pen/ZEzpJVp

[Xiaoleng123]

@epaezrubio Why we need to observe the draw? I think we don't need that.

[epaezrubio]

I see your point. I guess it's just a good practice to do it but you are right, you don't need it.

[Fuzzyma]

After using vue myself I would go with:

<template>
 <div>
 </div>
</template>

<script>
import {SVG} from "@svgdotjs/svg.js";

export default {
  name: 'home',
  data () {
    return {};
  },
  mounted: function() {
    const canvas = SVG().addTo(this.$el).size(300, 300);
    const rect = canvas.rect(100, 100).attr({ fill: '#f06' });
  },
}
</script>