Is there a Vue3 wrapper ?

[Neon22]

Feature request

I love svgdotjs but would like to use it in Vue3 reactively for fairly complex weaving tool. I'm using Vite and Vue3 (Node.js). Does anyone know of a Vue3 wrapper ? Do I even need one ?

Svgdom doesn't appear to be fully formed but I think its regular svgdotjs I need instead.

There is non svgdotjs version here for Vue3 but it is very limited. I'd very much rather use svgdotjs.

• https://bestofvue.com/repo/shrpne-vue-inline-svg-vuejs-svg

Stackexchange suggests we don't need one (a wrapper) but I can't get it to work in Vite/Vue3:

To use version 3.x you would either just do it with esm imports:

import { SVG } from '@svgdotjs/svg.js' import '@svgdotjs/svg.draggable.js' // ... No need to use plugins for vue. Just use SVG() in your code when you need it. If you need other functionality like the "old" SVG.on() you need to import it, too: import { SVG, on } from '@svgdotjs/svg.js'

My Vite/Vue3 foo is weak. My environment is:

• https://www.youtube.com/watch?v=JLt3GrDZDvQ

[Neon22]

I found a closed issue that was very useful:

• https://github.com/svgdotjs/svg.js/issues/861 It pointed me here:
• https://blog.carbonteq.com/creating-interactive-map-in-vue-js/

[Fuzzyma]

svg.js runs on the regurlar dom and cant work on a vdom that vue creates. If you want to use svg.js in vue you need to get a reference to a dom element and pass that to svg.js. However to be clear: You will not have the advantages of the vdom and reactivity with svg.js. Svg.js just builds a little bit of dom for you. You have to maintain that piece yourself.

[Fuzzyma]

For reference a quick example:

<template>
  <div ref="canvasRef" />
</template>

<script setup>
import { onMounted, onUpdated, ref } from 'vue'
import { SVG } from '@svgdotjs/svgjs'

const canvasRef = ref()

const drawCanvas = () => {
  const canvas = SVG().addTo(canvasRef.value)
  canvas.text('Hello World')
}

// have to redraw on every rerender
onMounted(drawCanvas)
onUpdated(drawCanvas)

</script>