Solution for using snap-svg in Vue

[ap1969]

Hi all,

I've been reading about all the webpack-related issues, eve being undefined, and so on, and decided to put together a solution for using Snap.svg in Vue 3.

The solution is pretty straightforward, so should be relatively easy to map across to React, and it may even work in Vue 2 as-is.

Hope it helps.

Here's the gist.

Regards, Andy

[Alex-Golovin]

https://www.npmjs.com/package/snapsvg-cjs-ts

[ralexrdz]

Used like this

<template>
  <svg id="svg"></svg>
</template>

<script>
import * as Snap from 'snapsvg-cjs'

export default {
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {

       var s = Snap('#tree');
       s.rect(0,0, 100, 100);

    },
  },
};
</script>

<style>
#svg {
  width: 100%;
  height: 100%;
}
</style>