How to use it in Vue?

[862149260]

I've tried 👍

import {svgPanZoom} from 'svg-pan-zoom'
and
import {svgPanZoom} from 'svg-pan-zoom/dist/svg-pan-zoom.js'

then use

svgPanZoom('#Id');

Error: Object(...) is not a function"

It seems like that it is imported wrong and svgPanZoom() cannot be identified as a function.

[FrankBuchholz]

Are you talking about https://vuejs.org/ ?

I guess your path to svg-pan-zoom.js respective svg-pan-zoom.min.js is wrong. Do you have copied or forked it to your own space or do you load it from the original location?

Latest version: https://cdn.jsdelivr.net/npm/svg-pan-zoom/dist/svg-pan-zoom.min.js Specific version (example): https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.0/dist/svg-pan-zoom.min.js

I assume that these are the correct links - not tested in my project because I use a different approach. I never have used "import module" but I use pure javascript: <script type="text/javascript" src="<...path...>/svg-pan-zoom.min.js"></script>

By the way, it's useful to keep the reference to be able call more functions later:

<script type="text/javascript"> // svg-pan-zoom
"use strict";
[...]
const panZoom = svgPanZoom("#svg", { ... };
[...]
panZoom.resize();
panZoom.fit();
panZoom.center();
[...]   

[lcottret]

For me, to use svg-pan-zoom:

npm install --save svg-pan-zoom`

In js:

import * as svgPanZoom from 'svg-pan-zoom'
...
mounted () {
    this.zoom = svgPanZoom('#svg')
  },

In the template:

<svg id="svg" :width="width" :height="height" >

And that's all!

[janvorisek]

Guys, there is a Vue component implementing this library.

See here.

[lcottret]

Well, there is a warning at the beginning of the README : "WARNING: the module is young, basic, probably will have its API change with no notice, and likely to have bugs. Use at your own risk, send patches for my eternal gratitude." When the use of a package is so easy, I wonder if it's necessary to use a new and maybe not very stable wrapper...

[janvorisek]

Well, there is a warning at the beginning of the README : "WARNING: the module is young, basic, probably will have its API change with no notice, and likely to have bugs. Use at your own risk, send patches for my eternal gratitude." When the use of a package is so easy, I wonder if it's necessary to use a new and maybe not very stable wrapper...

You are right about their readme comment. However, I have been using the plugin without problems in production for months. OP also can examine the plugin and make his own Vue integration :)

[4KDA]

work for me import svgPanZoom from "svg-pan-zoom";