Vuejs3 external library undefined funtion - vue.js

Question

I am currently working on a Vuejs3 application with the fabricjs library added.
Now I am trying to add an external library called fabricPublisherTools in the application. But the method/function "_registerSnaps" that is being called is somehow "undefined".
The external library gives me the following working example.
<script type="module">
import {fabricAddSnapper,fabricAddSmartGuides} from 'https://cdn.jsdelivr.net/gh/mtrudw/fabricPublisherTools/dist/fabricPublisherTools.min.js';
fabricAddSnapper();
fabricAddSmartGuides();
var canvas = new fabric.Canvas('c4');
var rect = new fabric.Rect({left: 100,top:100,width:150,height:100,fill:'blue'});
var rect2 = new fabric.Rect({left: 500,top:500,width:150,height:100,fill:'green'});
var rect3 = new fabric.Rect({left: 400,top:200,width:150,height:100,fill:'yellow'});
canvas._registerSnaps(canvas._getSmartGuides.bind(canvas));
rect.doesSnap();
rect2.doesSnap();
rect3.doesSnap();
canvas.add(rect,rect2,rect3);
</script>
The way I implemented in Vuejs3 is as follows:
<script setup>
import { onMounted } from "vue"
import { fabric } from 'fabric';
import {fabricAddSmartGuides,fabricAddSnapper,fabricAddUndoRedo} from 'https://cdn.jsdelivr.net/gh/mtrudw/fabricPublisherTools/dist/fabricPublisherTools.min.js';
let canvas;
const setupEditor = () => {
fabricAddSnapper();
fabricAddSmartGuides();
canvas = new fabric.Canvas('canvas');
canvas.setHeight(500);
canvas.setWidth(500);
canvas.backgroundColor = "#f00";
canvas.setDimensions({width: 500, height: 500});
var rect = new fabric.Rect({left: 100,top:100,width:150,height:100,fill:'blue'});
var rect2 = new fabric.Rect({left: 500,top:500,width:150,height:100,fill:'green'});
var rect3 = new fabric.Rect({left: 400,top:200,width:150,height:100,fill:'yellow'});
canvas._registerSnaps(canvas._getSmartGuides.bind(canvas));
rect.doesSnap();
rect2.doesSnap();
rect3.doesSnap();
canvas.add(rect,rect2,rect3);
canvas.renderAll();
}
onMounted(() => {
setupEditor()
})
</script>
It gives me the following error when I try to run it:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'bind')
And its about this line:
canvas._registerSnaps(canvas._getSmartGuides.bind(canvas));
When I console log "_registerSnaps" I see it's undefined which means something has not been appended/added by the library.
I just don't know if I did something wrong when I imported the library that caused the problem.
What exactly am I doing wrong?
Thank you in advance.

Answer 1

If bind is what's undefined, have you checked if your problem is with _getSmartGuides since that is what calls the bind() function?

Answer 2

You'll need to call fabricAddSmartGuides();
purely from reading the (fabricPublisherTools) source: _getSmartGuides is created in fabricAddSmartGuides(). Do you / where do you call fabricAddSmartGuides ?